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.

migrated from stackoverflow.com Mar 2 '15 at 13:46

This question came from our site for professional and enthusiast programmers.

  • 1
    Do you wish to use a different template for each category or simply add different css classes based on the category selection? – jonboy Feb 25 '15 at 10:28
  • Different CSS classes, but I guess I could do templates as a fallback! – CSS Apprentice Feb 25 '15 at 15:57
up vote 3 down vote accepted

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">

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.

  • You gave me some ideas, but that's not what I'm looking for :/ all of the described categories will be on the same page, so there won't be multiple menus involved. I have a "Blog" page that calls the different categories (Blog: Portrait w/Text Float, etc.), and by her selecting a category, she will actually be selecting a pre-styled class for the blog page – CSS Apprentice Feb 25 '15 at 19:20

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.

enter image description here

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.

  • Hey, I appreciate the thorough answer, but this, too, isn't what I'm looking what for :/ I can't use Page Classes, it's multiple categories listed on the same page, so I need, specifially, the categories to be styled. Unless there's a workaround with Page Classes I can use – CSS Apprentice Feb 26 '15 at 14:24
  • So, you're trying to style each category description? Or do you have multiple, nested, categories that you then display on one page by having a menu item pointing only to the parent category? Could you explain what your menu structure is like? – Seth Warburton Feb 26 '15 at 17:28
  • My current approach, 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. – CSS Apprentice Feb 26 '15 at 18:05
  • And you want articles on the featured blog to all have different styles, depending on the category they are in? – Seth Warburton Feb 27 '15 at 8:19
  • Yes, that's exactly what I'm looking for! – CSS Apprentice Feb 27 '15 at 19:27

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.