Joomla! - Give Blog Categories Classes

Question

First off, I'm a PHP noob :/ just to get that out of the way

My goal is to give each Joomla! category a class, so I can pre-style layouts for my client, and when they choose a Category, they would basically be choosing a style (Blog: Portrait w/Text Float, Blog: Landscape Pic w/Text, Blog: Multi-Pic Layout, etc.)

I found this thread for an older version of Joomla, but I received "Undefined Property" errors when I added their code to my index.php http://forum.joomla.org/viewtopic.php?f=466&t=406991

I also tried adding their code to /components/com_content/views/category/tmpl/blog_item.php

Any help would be greatly appreciated, Thanks!

• edit: Using Stock Protostar Template

Update

I'm using "Featured Articles" as my "Blog" Menu Item Type. Since this lists all Featured Articles regardless of Category, my hopes are to use the Categories (BlogStyle1, 2, etc.) to style the Featured Articles. That way, my client can just choose how she wants the blog to be styled, by choosing a category. To be clear, I want articles on the featured blog to have different styles, depending on the category.

Answer 1

To add a special "category" class to the articles of the featured articles menu item, you need to create a template override.

Simply, copy the : default.php file, located in:

components/com_content/views/featured/tmpl/

to ->:

templates/YOURTEMPLATENAME/html/com_content/featured/

Create any of the above folders (html, com_content, featured) if they don't exist.

Then open the copied default.php file with a text-editor (notepad) and locate around line 29:

<?php if (!empty($this->lead_items)) : ?>
<div class="items-leading clearfix">
    <?php foreach ($this->lead_items as &$item) : ?>
        <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix" 
            itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">  

Change to this:

<?php if (!empty($this->lead_items)) : ?>
<div class="items-leading clearfix">
    <?php foreach ($this->lead_items as &$item) : ?>
        <div class="leading-<?php echo $leadingcount ." $item->category_alias";?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix" 
            itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

This will add an extra class, with the alias-name of the category each article belongs, to all leading items of the featured articles view.

Similarly, you can do the same for the intro_items:

Around line 61:

<div class="item column-<?php echo $rowcount ." $item->category_alias"; ?>
    <?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round((12 / $this->columns));?>"
itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

Answer 2

You have a few options, you can duplicate your current template and rename it. Then you can alter the css and add extra classes as required, then assign this template to your desired category pages. You can find some help on how to do this here.

The easiest option (in my opinion) would be to use a different template for the category sections. Providing you can find a suitable template it will save you lots of time.

Depending on your version of Joomla the instructions will be something like;

1. Navigate to the template manager.

2. Click on the template name to enter the template administrator screen or check the check box next to the template name and click on edit in the toolar at the top of the page.

3. Click on the “Menu Assignment” tab in the configuration screen

4. You will then get a list of all menus defined on the website and list of all menu items in each menu. Select the menu item/s for which you want to assign this copy of the template.

5. Click on “Save & Close” button to save changes.

The second way of assigning a template to a specific menu item is through the menu item configuration itself. This way of assigning a template can be useful when you already have prepared copies of the required template as described previously.

1. Create a new menu item in the menu manager.

2. Look for a “Template Style” configuration parameter in menu item configuration.

3. Click on the select box next to that parameter title and you will get a selection of available templates and template copies.

4. Select the appropriate template and click on the “Save” button.

5. That menu item will be assigned to a selected template after that.

Now you just need to find a template that you like!

Hope this helps.

Answer 3

There's a very easy way. In menu manager it's possible to assign custom css classes to a menu item. In Protostar this page class will be applied directly to the component container, in this case <div class="blog">, which will allow you to style the entire blog output with your custom css.

Now you can add your styles using the page class to provide the scope, for example:

.my-css-scope .page-header {opacity: .1;}

Headsup! If you don't enter a space before your page class it will be appended to the default page class, e.g. .blogmy-css-scope which, IMO is not so useful. I would always recommend entering a leading space before entering your page class in the menu option. The same is true elsewhere in Joomla, as with custom module classes for example.