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 CSS classes by way of Article Categories

July 20, 2012 2:28am

Subscribe [1]
  • #1 / Jul 20, 2012 2:28am

    DymaxionWeb

    17 posts

    This question may be related to a resolved thread.

    Hello,
    This issue is related to my previous post (which was resolved). Here’s the situation: The magazine site that I am developing has four Article Sections (world affairs, science & innovation, etc) in the global navigation that need to be highlighted with a “current” CSS class when the user is reading an article within that section. Now, I know this would be simple enough with conditional statements referencing the name of the article’s url segment. But the way the site is structured has these Article Sections as categories rather than channels.

    I’ve attempted a number of ways to get this to work with conditional statements and category tags and category variables, but so far I’m either getting errors or no class being applied whatsoever. Here’s the bit of HTML that I’m working with:

    ...
       <ul class="mainNav accordion">
     <li class="navCol1">
         <h5 class="articleSections head">Article Sections</h5>
      <ul>
         <li><a href="#">World Affairs</a></li>
         <li><a href="#">Health & Well-Being</a></li>
         <li><a href="#">Science & Innovation</a></li>
         <li><a href="#">Culture & Design</a></li>
      </ul>
     </li>
                    ...

    I’m confused when it comes to applying the {if} statements and including the category variables. Any help would be greatly appreciated.

    -Gam

  • #2 / Jul 20, 2012 10:32am

    Kevin Smith

    4784 posts

    Hi Gam,

    I think we can come up with a solution here. What are the URLs used to view each of these 4 categories? (You can replace your actual domain with example.com if you need.)

  • #3 / Jul 20, 2012 5:41pm

    DymaxionWeb

    17 posts

    Hi Kevin,

    I’ve yet to prepare the template for the categories pages yet (I’m still lighting up my homepage and article-view pages). But the urls will likely be along the lines of: mysite.com/journal/show/category/world-affairs. The thing is is that the actual article template urls will appear as: mysite.com/journal/article/article-title. The category name doesn’t appear in the url at all, otherwise, as I said, I would naturally access it and provide the appropriate page styling using url segments. (On a side note: is there a way to get the Article Sections to appear in the url without altering the site’s 2-channel structure? A way of composing custom url’s? If so, I imagine that could make things easier.)

    My previous solution (of styling the article-view page based on the Article Section) worked with the following:

    <!DOCTYPE html>
    {exp:channel:entries channel="journal|primer" status="Featured Articles|Second Leads|open"}
     <html class="{categories limit='1'}{category_css}{/categories}" lang="en">  
    {/exp:channel:entries} 
    <head>

    I was attempting something along these lines within the global navigation with:

    <ul class="mainNav accordion">
       <li class="navCol1">
          <h5 class="articleSections head">Article Sections</h5>
          <ul>
          {exp:channel:entries channel="journal|primer" status="Featured Articles|Second Leads|open"}
        
     <li {if {categories limit="1"}{category_name}=="World Affairs"{/categories}}class="current"{/if}><a href="#">World Affairs</a></li>
     ...   
          {/exp:channel:entries}
          </ul>
       </li>
       ...

    But apparently this is incorrect syntax (yes, I’m new here). I’ve tried variations on this theme but nothing has worked so far.

    -Gam

  • #4 / Jul 23, 2012 5:45pm

    Kevin Smith

    4784 posts

    Ok, I see what you’re trying to do now.

    In answer to your original question, then, try something like this:

    {exp:channel:entries limit="1"}
     <li class="{categories}{if category_id == '5'}active{/if}{/categories}"><a href="#">World Affairs</a></li>
     <li><a href="#">Health & Well-Being</a></li>
     <li><a href="#">Science & Innovation</a></li>
     <li><a href="#">Culture & Design</a></li>
    {/exp:channel:entries}

    Assuming the World Affairs category has the ID #5. You’ll replicate the same class in the other list items as well, though I only showed it on the first one for easy readability.

    You can only use this on single entry pages since an index page would likely cause this code to flag all categories as active.

  • #5 / Jul 24, 2012 12:55am

    DymaxionWeb

    17 posts

    Hi Kevin,

    This did the trick! I think I was forgetting the

    limit="1"

    parameter. It’s always the little things that make all the difference.

    Thanks so much. I really appreciate your help. Take care.

    -Gamiel

  • #6 / Jul 24, 2012 5:33pm

    Kevin Smith

    4784 posts

    You’re quite welcome! Glad I could help, Gamiel.

    Let me know if there’s anything else I can do for you.

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

ExpressionEngine News!

#eecms, #events, #releases