ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Adding a CSS class by way of an article's category

July 15, 2012 11:57pm

Subscribe [4]
  • #1 / Jul 15, 2012 11:57pm

    DymaxionWeb

    17 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. 

  • #2 / Jul 16, 2012 12:07pm

    Kurt Deutscher

    827 posts

  • #3 / Jul 16, 2012 2:57pm

    DymaxionWeb

    17 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?

  • #4 / Jul 16, 2012 5:26pm

    Firebrand Media

    64 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="http://{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.

  • #5 / Jul 17, 2012 1:12am

    DymaxionWeb

    17 posts

    Brad,

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

    -Gamiel

  • #6 / Jul 17, 2012 8:01am

    Firebrand Media

    64 posts

    Awesome to hear.

  • #7 / Jul 17, 2012 12:23pm

    Kevin Smith

    4784 posts

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

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

  • #8 / Jul 17, 2012 11:32pm

    DymaxionWeb

    17 posts

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

  • #9 / Jul 18, 2012 4:49pm

    Kyle Cotter

    730 posts

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

    Thanks!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases