Load CSS file per Article Category

Sometimes you want to style articles depending on which category they belong to. Here's how to load category specific CSS files...

First, add this to the very top of your template's index.php file (above the <!DOCTYPE> declaration). If you are using Yootheme or some specific template framework, please look for 'header.php' or 'head.php'

<?php
$db = JFactory::getDBO(); $id = JRequest::getString('id');
$db->setQuery('SELECT #__categories.alias FROM #__content, #__categories WHERE #__content.catid = #__categories.id AND #__content.id = '.$id);
$category = $db->loadResult();
if ($category == '') {$category = 'uncategorised';};
?>

Then add this within the <head> tags on the same index.php file, just before </head> tag.

This will simply check which category is currently used, then attempts to load a css file that uses the same category alias.

If the current page doesn't belong to a category, then the "uncategorised.css" file is loaded instead.

The last step is to create one css file for each of the categories you have (using the category alias as the filename) and save them in the template's css folder.

e.g. category name : News
category alias : news
css file name : news.css

That's it !

Published in Hacks

Tagged under

More in this category: « Navigation Menus to the Full Width of a Layout