Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2017-02-04 18:35:45
- jaser
- Member
- Registered: 2016-05-28
- Posts: 17
Tumblog Style theme.
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)
Offline
Re: Tumblog Style theme.
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>.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Tumblog Style theme.
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.
Offline
Re: Tumblog Style theme.
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.
TXP Builders – finely-crafted code, design and txp
Offline
#5 2017-04-15 15:44:12
- jaser
- Member
- Registered: 2016-05-28
- Posts: 17
Re: Tumblog Style theme.
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.
Offline
#6 2017-04-15 16:52:03
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: Tumblog Style theme.
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.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#7 2017-04-15 17:40:53
- jaser
- Member
- Registered: 2016-05-28
- Posts: 17
Re: Tumblog Style theme.
I have tried that does not make any difference.
Applies site wide the CSS.
Why can’t I separate page/section lists & article styling?
Offline
#8 2017-04-15 17:53:48
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: Tumblog Style theme.
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?
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#9 2017-04-15 17:59:54
- jaser
- Member
- Registered: 2016-05-28
- Posts: 17
Re: Tumblog Style theme.
[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)
Offline
Re: Tumblog Style theme.
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
#11 2017-04-16 12:40:05
- jaser
- Member
- Registered: 2016-05-28
- Posts: 17
Re: Tumblog Style theme.
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)
Offline
Re: Tumblog Style theme.
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>
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Pages: 1