Style Drupal 6's Taxonomy Lists with PHP, CSS and jQuery

Whilst developing this, and other Drupal websites for clients, I decided that I wanted to categorise content using the taxonomy system. However, I wasn't happy with the way that Drupal displayed the terms lists by default, and I started comparing this to other websites that I look at.

To start with, I wanted to have something that described what the list was displaying - like in the second example above. I wanted to have the words 'Posted in' displayed before the list of terms. To do this, I had to edit the node template file that exists within my theme folder (sites/all/themes). As I only wanted this change to affect my Blog posts, the file that I needed to change is node-blog.tpl.php

I scrolled down until I found the piece of code that displayed the terms list:

<?php if ($terms): ?>

<?php print t('Posted in') . $terms; ?>

<?php endif; ?>

Adding print t(' Posted in ') will print the words 'Posted in' before outputting the terms.

I then added some CSS to re-size the spacing between the items, and then add the commas between them to separate them:

.terms ul.links li {
margin-right: 1px;
padding: 0;
}

.terms ul.links li:after {
content: ",";
}

.terms ul.links li.last:after {
content: ".";
}

I created a file named script.js in my theme folder with the following code in it. After clearing Drupal's caches, this file is automatically recognised by Drupal 6.

if (Drupal.jsEnabled) {
$(document).ready(function() {
$('.terms ul.links li.last').prev().addClass('test');
})
}

This code finds the last item in the list, uses .prev to select the one before it, and then uses .addClass to assign it the HTML class of "test". We can then use this class to target it with specific CSS.

.terms ul.links li.test:after {
content: " and";
}