10 years 4 months ago
OK, here is a quick and easy PHP hack for assigning colors to categories. First, you make the PHP changes. Then, you add CSS in your custom.css file for your colors (including hover colors, etc.).
Here it is in action:
www.asknelly.com
Here are the files to modify, and approximately where to start:
html/com_content/article/default.php (Line 142)
html/com_content/category/blog_item.php (Line 113)
html/com_content/featured/default_item.php (Line 111)
Here is the change; it's the same for all three files:
<!-- [CAT COLOUR MOD] BEGIN -->
<?php if ($params->get('show_category')) : ?>
<?php
if ($this->item->category_alias)
echo JText::sprintf( '<dd class="category-name category-style-' . $this->item->category_alias . '">');
else
echo JText::sprintf( '<dd class="category-name>');
?>
<!-- [CAT COLOUR MOD] END -->
Then, you add your CSS. For each category you want to assign a separate color to, create a corresponding CSS class with the following naming scheme:
category-style- followed by the Joomla category name
So, if your Joomla category name is "ferrets" then your corresponding CSS class would be:
category-style-ferrets
You can do whatever you want in your own CSS, of course. Below is the code from my site for the first two categories. Add as many categories as you want; just make sure the names match up with the category names you create in Joomla.
.category-style-health a {
background: #3833BE;
border-right: 2px solid #0d0980;
}
.category-style-health a:hover {
color: #fff;
background: #0d0980;
border-right: 2px solid #0d0980;
}
.category-style-money a {
background: #007020;
border-right: 2px solid #003d12;
}
.category-style-money a:hover {
color: #fff;
background: #003d12;
border-right: 2px solid #003d12;
}
NOTE: In my site, I also added a bunch of CSS to
category-name for some more styling that applies to all the category names.
OK, so that's it. Enjoy!
Cheers,
Bill
If you use Zentools please post a review at the Joomla! Extensions Directory.
