3

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.

2
  • 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, 2015 at 10:28
  • Different CSS classes, but I guess I could do templates as a fallback!
    – CSS Apprentice
    Feb 25, 2015 at 15:57

3 Answers 3

3

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

1
  • 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, 2015 at 19:20
2

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.

6
  • 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, 2015 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? Feb 26, 2015 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, 2015 at 18:05
  • And you want articles on the featured blog to all have different styles, depending on the category they are in? Feb 27, 2015 at 8:19
  • Yes, that's exactly what I'm looking for!
    – CSS Apprentice
    Feb 27, 2015 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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