EllisLab text mark
Advanced Search
     
Adding a CSS class by way of an article’s category
Posted: 15 July 2012 11:57 PM   [ Ignore ]
Joined: 2012-01-04
22 posts

Hello,

I’m developing a general interest magazine website that will cover four article sections: World Affairs, Health & Wellness, Science & Innovation, and Culture & Design. On the backend, the site’s structure will be divided into two main channels: daily-updated free content and monthly premium content that’s restricted to paid subscribers. (A typical url structure would be: mysite.com/free-content-channel/article-view/article-title). All articles in both channels will fall into one of the four aforementioned sections (World Affairs, etc). These article sections are assigned to each article as a category.

Here’s the issue: each article section is meant to have slightly different styling; a different color to visually orient a reader on the website. These colors need to dynamically appear in single-article-view templates as well on home/navigation pages (ie, each article excerpt and “read more” link will have it’s color determined by it’s article section). The colors appear based on specific class names. For example: on a list of articles on a navigation page, a Culture & Design article would appear with: <li class=“cltDsng”>. That same article in an single-article-view page would appear with: <html class=“cltDsng”>.

My question is, how can I get these classes to appear dynamically based on the article’s category. I understand that it will likely involve conditional statements but how can I access the article’s category without the benefit of using the url segments (as it stands, the article’s category doesn’t appear in the url title)?

Here’s a link to a static article-view page so you can get an idea of where I’m coming from. I should mention, if it isn’t obvious, I’m still familiarizing myself with ExpressionEngine. So any help is greatly appreciated. 

 
Posted: 16 July 2012 12:07 PM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2003-01-07
693 posts

You might be looking for this: http://ellislab.com/expressionengine/user-guide/modules/channel/channel_entries.html#categories

 Signature 

learn more at eeSiteKit.com


NetRaising | a web services company


Custom Designed Dynamic Websites for Mission Driven Organizations

 
Posted: 16 July 2012 02:57 PM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Joined: 2012-01-04
22 posts

Hi Kurt,

Thanks for the response. I’m not sure how to put it together in an if statement though. Here’s what I have so far (and it’s not working). 

<html {categories}{if category_name==“world-affairs”}class=“wrldAff”{/if}{/categories} lang=“en”>

I’ve tried variations on this too and they didn’t work either. Any idea what I’m doing wrong?

 
Posted: 16 July 2012 05:26 PM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2008-03-15
60 posts

I am using categories (the category_url_title specifically) to apply a class to a list of entries. I am using it to show a particular icon in front of entry title. This is the code that I used.

{exp:channel:entries  channel="blog"  orderby="date" dynamic="off" limit="4" disable="member_data|pagination|category_fields|custom_fields"}
<li class="{categories limit="1"}{category_url_title}{/categories}"><a href="{title_permalink='blog/article'}">{title}</a></li>
{/exp:channel:entries} 

If I’m following you, I think I would use the following code:

<html class=β€œ{categories limit="1"}{category_url_title}{/categories}" lang=β€œen”> 

Then I would just create the classes / styling based on the category_url_title.

Hopefully that helps.

 Signature 

G. Brad Hopkins
Firebrand Media, LLC
firebrand-media.com
twitter.com/firebrandmedia
delicious.com/firebrandmedia/fmsites

 
Posted: 17 July 2012 01:12 AM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Joined: 2012-01-04
22 posts

Brad,

Thank you so much. That did the trick. You’ve saved me from hours—if not days—of continued frustration.

-Gamiel

 
Posted: 17 July 2012 08:01 AM   [ Ignore ]   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2008-03-15
60 posts

Awesome to hear.

 Signature 

G. Brad Hopkins
Firebrand Media, LLC
firebrand-media.com
twitter.com/firebrandmedia
delicious.com/firebrandmedia/fmsites

 
Posted: 17 July 2012 12:23 PM   [ Ignore ]   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2008-01-31
4773 posts

Excellent suggestion there, Brad. Thanks for offering the help!

Gamiel, is there anything else you need help with here?

 Signature 

Need some help? | Current Versions: EE 2.6.1 // MM 1.2.1

 
Posted: 17 July 2012 11:32 PM   [ Ignore ]   [ # 7 ]   [ Rating: 0 ]
Joined: 2012-01-04
22 posts

Kevin, so far so good. Thanks. I’ll be back if things change…

 
Posted: 18 July 2012 04:49 PM   [ Ignore ]   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2008-11-19
777 posts

Glad to hear Gamiel! If you encounter any more issues, feel free to start a new thread.

Thanks!

 Signature 

18. Lover of the web. Pixel placer. Coffee Drinker. Owner of Cotter Interactive.