I’ve gotten a lot of feedback on this site’s design, and probably the most frequent compliment I get regards the icons on this site. I added them because it’s a very small addition that makes a site a lot more exciting. As much as I love Drupal, I was surprised when I learned that there’s no unique CSS ID for most menu items in the Drupal core. This tutorial will show you how to add these handlers to make adding icons trivial. Throughout this short tutorial I’ll assume you have some knowledge of Drupal’s theme system, but if you don’t, head over to the
handbook to learn more. Head over to your theme folder and open template.php, or create it if it doesn’t exist. Make sure the file has the opening php tag, but not a closing one. Once the file is ready, add the following code:
<?php
/**
* Add an ID to each item to place icons.
*
*/
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
$link = menu_item_link($mid);
$css_id = strtolower(str_replace(' ', '_', strip_tags($link))) . '-item';
return '<li id="' . $css_id . '" class="' . ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";
}
?>
This function will override the default theme_menu_item() function and turn it into the iconizing function that we want. To generate the ID it’ll get the menu name, strip spaces, and put underscores instead. Finally, it’ll make everything lowercase so it can validate. Although this system will work most of the time, if you have two menu items or more with the same name, and you want different icons for each, there will be a duplicate ID confict. If this is the case, use the following code instead:
<?php
/**
* Add an ID to each item to place icons.
*
*/
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
$link = menu_item_link($mid);
$css_id = strtolower(str_replace(' ', '_', strip_tags($link))) . '-item-' . $mid;
return '<li id="' . $css_id . '" class="' . ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";
}
?>
This will add the menu ID number to the CSS selector as well. The disadvantage of this is that the icons will be name AND order dependent, so if you delete an item, and later add it again, you will have to modify your stylesheet. This will take care of all menu items you add manually. Now on to adding icons page titles. If you haven’t already overriden phptemplate_page() in your template.php file, go ahead and copy the function function and rename it to fit your theme. Look for the long, broken up variables array, and add the following snippet right under it:
<?php
//LONG VARIABLE ARRAY HERE
if ((arg(0) == 'node') && is_numeric(arg(1))) {
$variables['node'] = node_load(arg(1));
$variables['type'] = $variables['node']->type;
}
elseif (arg(0) == 'taxonomy') {
$variables['type'] = 'taxonomy term-' . arg(2);
}
else {
$variables['type'] = 'h2-' . str_replace(" ", "-", strtolower(drupal_get_title()));
}
?>
This will add a new variable called “type” to your long list of variables. The final step to add icons to any page on your site is to head over to your page.tpl file, and replace the title page with a new line. Remember, before replacing it, comment out the old line, in case there’s a problem. Use the following line:
<?php
if ($title): print '<h2 class="' . $type . ($tabs ? ' with-tabs' : '') .'">'. $title .'</h2>'; endif;
?>
This short line will add a special class to all titles so you can add icons to specific pages. In fact, if you’re viewing a node, it’ll let you add a differnt icon per node type. You’ll notice that the attribute is a class and not an ID. This is to prevent issues when viewing multiple nodes, such as a view page, of the same time. All the programming aspects are now complete, all you need now is to open your style.css fie and begin adding icons. For menu items and links, use the following:
li#menu_name a {
padding: 0 0 0 18px;
background: url(icons/some_icon.png) left no-repeat;
}
For page titles, you need to use a class selector, like so:
h2.book {
background: url(icons/bookBig.png) left no-repeat;
padding: 0px 0pt 3px 35px;
}
Finally, you may have noticed that taxonomy listings now have their own class selectors as well. Though tedious, you can now theme specific taxonomy terms if you use them very often (such as the Drupal term on this site.) Here’s an example of how I themed the Drupal theme:
h2.term-5 {
padding: 0px 0pt 3px 35px;
background: url(taxonomy/drupalBig.png) left no-repeat;
}
This concludes this rather long tutorial, but if you follow every step, and you take the time to add the CSS selectors, you’ll spruce up your site with very little work! Unfortunately, the icons used on this site were purchased, and they’re not open source. However, I suggest you take a look at the tango library for some free, great looking icons.
HOME/fbin
ffset}
