Using the Category Field to add a CSS class in EECMS

Some time ago I started, what I thought would be, a series of blog entries on how I use ExpressionEngine. Unfortunately, that turned into a retrospective on how I got started with EE in the first place. That lead to me removing all of the styling on the site and letting it run naked while I planned procrastinated a redesign. Now that I’ve finished most of the major design work on this site I can finally start to look at some of the techniques that I use with EE.

The first entry is actually the result of a question that was posed in the EE Forums - Adding a CSS class by way of an article’s category.

On each page I have a "Recent Content" snippet that acts as a way of discovering the most recently posted content on the site. It includes recent projects, blog entries, upcoming events and my most recent tweet. The blocks themselves are simple unordered lists showing the last 4 entries.

Recent Content Snippet

Here is the complete markup from the "Recent Content" snippet, which we'll dissect a bit later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="secondary_content_wrapper">
<div id="recent_content" class="group">
<div id="blog">
<h5>Blog</h5>
<ul>
{exp:channel:entries  channel="blog"  orderby="date" dynamic="off" limit="4" disable="member_data|pagination|category_fields|custom_fields"}
<li><i class="{categories limit="1"}{category_url_title}{/categories}"></i><a href="{title_permalink='blog/article'}" title="Read {title}">{title}</a></li>
{/exp:channel:entries}
</ul>
</div>
<div id="recent_projects">
<h5>Recent Projects</h5>
<ul>
{exp:channel:entries  channel="portfolio"  orderby="date" dynamic="off" limit="4" disable="member_data|pagination|category_fields|custom_fields"}
<li><i class="{categories limit="1" show="not 18"}{category_url_title}{/categories}"></i><a href="{title_permalink='stuffwevedone/project'}" title="{portfolio_tooltip}">{title}</a></li>
{/exp:channel:entries}
</ul>
</div>
<div id="upcoming_events">
<h5>Upcoming Events</h5>
{exp:channel:entries  channel="talks"  orderby="date" sort="asc" limit="1" dynamic="off" show_future_entries="yes" show_expired="no" disable="member_data|pagination|category_fields|categories"}
<ul>
<li><i class="icon-calendar"></i>{entry_date format="%M. %d, %Y"}</li>
<li><strong>{title}</strong></li>
<li>{talk_excerpt}</li>
<li><a href="{title_permalink='stuffweteach/moreabout'}" title="More information about {title}.">Details about this event.</a></li>
</ul>
{/exp:channel:entries}
</div>
</div>
</div>

I wanted to differentiate each of the entries and the most natural way to do that was by category. Initially, I used the {category_url_title} to indicate the class of each list item. This worked fine and would be perfectly suitable to do using the following code.

1
<li class="{categories limit="1"}{category_url_title}{/categories}"><a href="{title_permalink='blog/article'}" title="Read {title}">{title}</a></li>

The above code would render as:

1
<li class="web_design"><a href="http://firebrand-media.com/stuffwevedone/project/the_church_at_winchester_website" title="Read about the The Church at Winchester Website project">The Church at Winchester Website</a></li>

What's Going On?

A bit of explanation is probably in order. The category of the entry above is Web Design. In the category settings, the category url is "web_design" which was then provided as the class name for the list item using the {category_url_title} tag.

I then created the CSS styling for the class .web_design. The class consisted of a .PNG file that would be used as the list-style-image. I created a separate style for each category.

1
2
3
.web_design {
     list-style-image: url(/images/ui/web_design_img.png);
}

This worked like a charm and I have to say, I was pretty proud of myself. Then the iPad with Retina Display came out.

The Retina Problem

On the Retina Display, the PNG that I used for the list item icon looked bad. Would anyone notice? Probably not. But, the whole justification for buying the new iPad was to test out designs on the Retina Display so I felt compelled to fix it. To solve this, I am using Fontello to create the icons as web fonts which are crisp and scalable on high PPI displays, just like type. The standard procedure for using Fontello is with an <i> tag.

As you can see in the revised code below, I have added an <i> tag after the <li> tag on each list item. The <i> tag now gets the class assigned to it, and serves the proper icon, as selected in Fontello.

1
<li><i class="{categories limit="1"}{category_url_title}{/categories}"><a href="{title_permalink='blog/article'}" title="Read {title}">{title}</a></li>

To make this work, I had to change the {category_url_title} of each category to match its corresponding symbol name provided by Fontello. For example, the icon class for web design projects is now .icon-compass instead of .web-design.

The nice thing about this is that I only have to change the {category_url_title} to change the icons associated with group of entries.

Have a question or comment? Leave it below and I'll see what I can do to help.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins