oliverdavies.uk-old-sculpin/source/_posts/style-drupal-6s-taxonomy-lists-php-css-and-jquery.md

---
title: Style Drupal 6's Taxonomy Lists with PHP, CSS and jQuery
date: 2010-04-05
excerpt: Getting started with Drupal theming by styling Drupal’s taxonomy lists.
tags:
  - drupal-6
  - drupal-planet
  - drupal-theming
  - taxonomy
---

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:

```language-php
<?php if ($terms): ?>
  <div class="terms terms-inline">
    <?php print t('Posted in') . $terms; ?>
  </div>
<?php endif; ?>
```

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

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

```language-css
.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.

```language-js
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.

```language-css
.terms ul.links li.test:after {
  content: " and";
}
```