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:
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.
I'm an Acquia-certified Drupal Triple Expert with 17 years of experience, an open-source software maintainer and Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.