Tumblog Style theme.

jaser · 2017-02-04 18:35:45

I have been trying to build a tumblr style theme with masonry excerpts of all the posts, On the front page.

I want to use different CSS styling for each of the articles by type. (video, picture,quote, etc.)
What is the best way to go about achieving this by styling each post type as a separate section.

I know I can use categories. But I did not want to use up one of the default 2 without resorting to plug-ins.

Is there a more obvious solution? or is this the best way to go.
Any help would be appreciated. Making my head hurt.

Last edited by jaser (2017-02-04 18:43:39)

phiw13 · 2017-02-05 00:24:40

One possibility: use a custom field (e.g. ‘type of post’), then assign a class based on the value of that custom field.

<div class="<txp:custom_field name='type_of_post' />">content here</div>.

michaelkpate · 2017-02-05 03:58:28

jaser wrote #303838:

What is the best way to go about achieving this by styling each post type as a separate section.

The most obvious way to me is Sections.

jakob · 2017-02-05 11:28:03

And yet another way: you could use the little-known “override form” option to output each article type with its own markup. You’ll find the “override form” dropdown in the “Advanced Options” block of the write tab. The drop-down shows you all forms of type “article” in the dropdown.

How to do it: create an article form with the html/txp markup for each article type. For your most common type, use the “Default” form. In your page template, us a standard txp:article tag without setting the form attribute. Then set the article type using the “override form” drop-down on a per-article basis.

jaser · 2017-04-15 15:44:12

I have got the masonry working on the front page using media queries. Putting page breaks in as the page collapses. The only thing is the when I apply it to the section list it also carries the style sheet to the individual article page level.
What are the tags/id’s to use to get around this. #default.article

Is it possible to just apply to the section/page level?
Separate layout for the article level.

uli · 2017-04-15 16:52:03

jaser wrote #305353:

Is it possible to just apply to the section/page level?
Separate layout for the article level.

Like I said in your other topic:

uli wrote #303607:

Are you looking for something like the if_individual_article tag?

Use it with a <txp:else/> tag and you can turn its logic around. Or — for more intuitive tagging — use its counterpart tag if_article_list.

jaser · 2017-04-15 17:40:53

I have tried that does not make any difference.
Applies site wide the CSS.

Why can’t I separate page/section lists & article styling?

uli · 2017-04-15 17:53:48

jaser wrote #305356:

Applies site wide the CSS.

Hard to analyze without seeing the website. Do you have the style sheet twice on the page, once inside the tag, once from when there wasn’t an if_article_list tag? Is it online so we could look at it, debugging turned on?

jaser · 2017-04-15 17:59:54

[Removed]
I want the pages css to be all like the front/home page.
When click non-static pages the at article level they are 25% width.

e.g.
“article page”

Last edited by jaser (2018-10-17 15:06:08)

phiw13 · 2017-04-15 23:45:58

If I understand correctly, this, from your stylesheet (line 28):

 .video-page .grid-item, .quotes-page .grid-item, .articles-page .grid-item, .front-page .grid-item {
width: 50%;
}

This applies to your individual article page (selector: .articles-page .grid-item) and your front page (selector: .front-page .grid-item) . You’ll need to separate them.

jaser · 2017-04-16 12:40:05

I realise what you are saying about separating the styles.
But when I do that the articles-page list is 100% width as well as the article.
I want the articles-page list 4 columns of 25% & the article width 100%.

Thanks for your assistance it is appreciated :)

Last edited by jaser (2017-04-16 12:44:11)

colak · 2017-04-16 15:00:53

Hi jaser,

You could create a number of style sheets to cater for the different situations. The code below may give you a hint but please do return with any questions you may have.

<txp:hide>General styles used in all cases</txp:hide>
<txp:css format="link" name="default" />
<txp:hide>Styles used in article lists</txp:hide>
<txp:if_article_list><txp:css format="link" name="lists" /></txp:if_article_list>
<txp:hide>Styles used in individual articles</txp:hide>
<txp:if_individual_article><txp:css format="link" name="individual" /></txp:if_individual_article>

Textpattern CMS

Textpattern CMS support forum

#1 2017-02-04 18:35:45