76 lines
2.1 KiB
Markdown
76 lines
2.1 KiB
Markdown
---
|
||
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";
|
||
}
|
||
```
|