Styling Joomla tabs

We have introduced 'Joomla tags' into a number of our components and one subject that is often asked is whether one can actually style the tags in any way. After searching the web site of perhaps the principle designer of the Joomla tags component we discovered this short blog article which is a follow up to a presentation.

Some simple styling can be applied to all tags using something similar to that below: One should be careful about upper and lower case in tags, because it can look messy to have the cases in tags be inconsistent.

For upper case first letter:

.tags a:first-letter {
text-transform: uppercase;
}

For all upper case:

.tags a {
text-transform: uppercase;
}

For all lower case

.tags a {
text-transform: lowercase;
}

 

One of the first things to notice is the each individual tag link (the tag link is what is embedded in content views) can have a specific style assigned to it in the tags editor. By default all tag links have the label label-info class which usually gives you the ubiquitous Boostrap rounded corner buttons. One is free to totally remove that class or to replace it with your own class.

Each tag also is inside its own span which has a class matching the id of the tag. So if the Joomla tag in an article has an id of 3, one can add a background image to the tag-3 class. One can also replaced the default class on the link if one doesn't want the link text on top of the image.

The span for each tag also includes a class indicating the position of the tag in the list of tags, for example tag-list0, tag-list1. Just remember that the counting starts with 0. You could for example change the tag-list3 font family to Times Roman. You may desire to do this with the first tag in a group, for example.

The whole list of tags is contained in a div with a class of tags. This lets you do things like add some space between the bottom of your tags and the start of your article.

Suppose you want to make html changes to tags? For example maybe you would like them marked up as a list or you would like to add a comma or spacer between the tags? Joomla will let you do this using the override system, and it takes advantage of a new and extremely powerful feature in the Joomla 3 series, JLayout. If you look in the folder layouts/joomla/content you will see the file tags.php. This is the file that controls the tags markup. By default it is used everywhere a list of tags for a given item is shown. One can override this file by placing a same named file in a folder called layouts in the html folder of you template. One could also create different named layouts and call them from inside normal layout overrides.

This is the code that brings the tags layout into ones component or module layout:

<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>

You have a lot of control over the exact look and feel of tags on your site, think about taking advantage of this.

Go To Top

The Macrotone Consulting Web site would like to use cookies to store information on your computer, to improve our website. Cookies used for the essential operation of the site have already been set. To find out more about the cookies we use and how to delete them, see our Privacy Policy.

I accept cookies from this site.