Category-specific CSS styling in Joomla?

Question

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.

Answer 1

There are a number of ways to approach this. If you want to add a class to the body tag for this purpose, take a look at how I do it at https://github.com/construct-framework/construct5/blob/master/index.php#L65 and starting at https://github.com/construct-framework/construct5/blob/master/elements/logic.php#L235. This assumes that you are going to edit your template.

You could also whip up a simple plugin to add these classes to you body tag dynamically.

Otherwise, it could be possible to do this with something like http://extensions.joomla.org/extensions/style-a-design/templating/14053

Answer 2

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

2. 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;?>">