Category-specific CSS styling in Joomla?

css, joomla

Solution

If each category is sitting on own menu item, you may add 'Page Class' suffix for container div (Advanced Options > Page Display Options)

Other way would be adding template override:

copy `components/com_content/views/category/tmpl/blog.php` to `templates/[your_template]/html/com_content/category/blog.php`)

And inside of the file change

<div class="blog<?php echo $this->pageclass_sfx;?>">

to

<div class="blog<?php echo $this->pageclass_sfx . ' ' . $this->category->alias;?>">

Problem

Any ideas on good ways to apply styling to classes of articles (categories, or anything else?) Currently, I create a first pass at the article manually, wrapping it in a span: ``` <span class="foo"> <p>bar</p> <p>etc</p> </span> ``` I then paste the article into JCK Editor, and have a new css file in the template directory to handle `class foo`. This doesn't work very well, since JCK Editor moves the span class to the internal elements, producing something like ``` <p><span class="foo">bar</span></p> <p><span class="foo">etc</span></p> ``` This is Ok until you start editing the article with JCK Editor, because the new content doesn't go in the span: ``` <p><span class="foo">bar</span></p> <p><span class="foo">etc</span></p> <p>New unstyled content inserted by JCK Editor</p> ``` I'm on Joomla3. What would be ideal would be if the name of the category appeared in the html, so I could hang a style on it, but it doesn't.

Original source