Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-04-28 15:44:01

mwr
Member
From: Canada
Registered: 2006-01-31
Posts: 164
Website

Styling based on category

For example, if you had a card-based layout and some of the cards were in the “foo” category — how would you style them with a red background?


Mark

Offline

#2 2021-04-28 19:29:36

TNT
Member
From: Rotterdam, Netherlands
Registered: 2006-01-06
Posts: 256
Website

Re: Styling based on category

You could try this:

<div class="card <txp:if_article_category name="foo">red</txp:if_article_category>">contents of card</div>

And then of course in your css you’ll need:

.red { background: red; }

Prrrrrrrr

Offline

#3 2021-04-28 19:46:12

mwr
Member
From: Canada
Registered: 2006-01-31
Posts: 164
Website

Re: Styling based on category

Brilliant — thanks!


Mark

Offline

#4 2021-04-28 20:25:07

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Styling based on category

Or this to inject the actual category name directly into the div’s class:

<div class="card <txp:category1 />">contents of card</div>

(or category2)

With of course corresponding css, one for each category you wish to colour:

.foo { background: red; }
.bar { background: blue; }
...

Edit: fixed global category / article category confusion. See below.

Last edited by Bloke (2021-04-29 08:24:47)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#5 2021-04-29 08:09:10

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Styling based on category

Bloke wrote #329992:

Or this to inject the actual category name directly into the div’s class:

I was going to say that too. Just to add to that, if it happens to be an article that you’re showing, you may want to use <txp:category1 /> and/or <txp:category2 /> to add the class that is assigned in the article itself.


TXP Builders – finely-crafted code, design and txp

Offline

#6 2021-04-29 08:23:05

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Styling based on category

jakob wrote #329995:

if it happens to be an article that you’re showing, you may want to use <txp:category1 /> and/or <txp:category2 />

Haha. Oops. Yes, you’re right. I’ll amend my post to fix the oversight. Thank you!


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#7 2021-04-29 08:32:49

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Styling based on category

Bloke wrote #329996:

Haha. Oops. Yes, you’re right. I’ll amend my post to fix the oversight. Thank you!

You know this but I’ll add it for future readers. If you’re not dealing explicitly with articles, using txp:category or even txp:section to insert a class and then assigning that class a background and foreground colour works well.


TXP Builders – finely-crafted code, design and txp

Offline

#8 2021-04-29 15:45:16

mwr
Member
From: Canada
Registered: 2006-01-31
Posts: 164
Website

Re: Styling based on category

Thanks, jakob. I can confirm that you do indeed need to specify category1 or category2 if you’re working with articles.

The advantage of TNT’s solution is that you can make the class anything you want, which might be useful in some cases.


Mark

Offline

Board footer

Powered by FluxBB