Custom css class per category in section blog view

[TheVille]

Hello

I need to create a blog view where entries that are in certain category have certain CSS class, ie:
if entry1 belongs to category "events" it would have css class "events". Entry2 belongs to category "News" and it would have class "news".

This is so I could "color code" different categories with CSS.

Page class suffix isn't working with me here, because all entries would have same class applied. I've also tried to search extensions for component or plugin that does this, but no luck.

I have faint idea that this could be achieved with template overrides but I have no idea how! I'm not an expert in PHP, rather CSS, but I think I could make it happen if someone lead me to right track.

[Dan L]

Yeah you're on the right track. Try creating a template override for the category output layout you want to use, then wrap the PHP-HTML in a DIV using something like this:

Code: Select all

<div class="category-<?php echo $this->category->id; ?>">
....
</div>

This will give you wrapper classes of "category-2", "category-3" etc, where the numerical value is equal to the category ID in the back-end, you can then style up the individual elements:

Code: Select all

div.category-2 .contentheading {color:pink}

...and so on.

That should work...or at least give you some pointers

[TheVille]

Yeah you're on the right track. Try creating a template override for the category output layout you want to use, then wrap the PHP-HTML in a DIV using something like this:

Code: Select all

<div class="category-<?php echo $this->category->id; ?>">
....
</div>

This will give you wrapper classes of "category-2", "category-3" etc, where the numerical value is equal to the category ID in the back-end, you can then style up the individual elements:

Code: Select all

div.category-2 .contentheading {color:pink}

...and so on.

That should work...or at least give you some pointers

Hello Dan, and others

Thanks a million! Didn't work right out the box though, had to change that piece of code to

Code: Select all

<div class="category-<?php echo $this->item->catid; ?>">

and then I got exactly what I wanted.

For others struggling with same problem: You gotta have folder "html" in your template folder. Everything inside that folder will replace the core Joomla files. I navigated to html/com_content/section/blog_item.php and edited line 12 (beez template) where the php creates h2 element with contentheading class.

[Mishmobile]

I also wanted to color-code the categories, and this article helped out!

In addition to /article/tmpl/default.php, I also had to change:

• category/tmpl/blog_item.php
• section/tmpl/blog_item.php
• frontpage/tmpl/default_item.php

These are the specific views my site uses.

I couldn't get the "catid" property to work (Joomla! version 1.5.8?) in all of these files, so I just copied the same code that Joomla! was using to display the category name. For instance, in category/tmpl/blog_item.php, line 75,

Code: Select all

<?php echo $this->item->category; ?>

became:

Code: Select all

<div class="category-<?php echo $this->item->category; ?>">
<?php echo $this->item->category; ?>
</div>

I was then able to create the custom styles in my template.css file.

I realize that I can never rename my categories, because the names are linked to the names in the CSS stylesheet...

Anyway, thanks for all your help in posting the question and replies! Greatly appreciated!

[Mishmobile]

I couldn't get the "catid" property to work (Joomla! version 1.5.8?) in all of these files, so I just copied the same code that Joomla! was using to display the category name.

Okay, I don't know what I was thinking, or what I saw, but using "catid" works perfectly fine. I ran into a problem with a category name containing a space, so I had to search for a different solution other than using the names.

Using the "catid" is of course cleaner, allowing for category renames.

[fudgonaut]

I am trying to color-code my categories as well. I've searched high and low for a solution and have not found one. I am using j1.5.15 with a template I designed myself. I copied blog_item.php from html/components/com_content/category/tmpl to html/templates/my-template/html/com_content/category/ and included the path & filename in the templateDetails.xml

I'm not getting any changes no matter what I try. Maybe I'm just not finding the right place to wrap

Code: Select all

<div class="category-<?php echo $this->item->catid; ?>">
....
</div>

around in the blog_item.php file? Is there a simpler way to implement category-dependent formating? The php stuff is all way beyond me.

Any help is greatly appreciated!

[Mishmobile]

@fudgonaut:

I don't think there is any other way to get color-coded categories without modifying the PHP code, because there's no way to differentiate the different categories as they are displayed on the page.

First and foremost, let's make sure your desired override is taking effect. When you view the source of a page that uses the blog_item template, can you see the additional DIV tag that you added? If not, then:

• the override isn't working, or
• you're modifying the wrong file for what you expect to see. (I.e. you're modifying blog_item, but you're not actually viewing a blog_item style page, so no changes seem to appear.

For instance, in the source for my page, I now see this just above an article from our sports category:

Code: Select all

<div class="category-12">Sports</div>

Second, once you have the new DIV tags in place, you'll need to make your desired color modifications to your template's CSS file. For instance, in my template.css, I have an entry like this:

Code: Select all

/*Sports*/
div.category-12 {
	color: white;
	text-transform: uppercase;
	background-color: #0000FF; /*Bright Blue*/
	font-weight: bold;
}

If your site is live, PM me with your URL, and I can at least check the generated HTML from your PHP file, if you'd like.

Take care!

[Mishmobile]

@fudgonaut:

By the way, I took a look at my old code, and my changes inside of blog_item.php were made at about line 74, just after the lines that read:

Code: Select all

<?php if ($this->item->params->get('link_category')) : ?>
  <?php echo '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug, $this->item->sectionid)).'">'; ?>
<?php endif; ?>

My code then follows:

Code: Select all

<?php
//Added on 2009 08 25 @ 1:20 PM
//A div wrapper was placed around the php code for showing the category name.				
//This allows the categories to be stylized.
?>
<div class="category-<?php echo $this->item->catid; ?>">			
  <?php echo $this->item->category; ?>
</div>

OK. Good night, and happy coding!

[fudgonaut]

@Mishmobile

Thanks for the info! I know have the right display layout because the <?php print ('hello world'); ?> I added to /section/blog_item.php is showing up on the page. However, when I added your code I did an 'inspect element' and 'view page source' in Firefox and do not see any reference to <div class="category-n">. I merely added the code you showed me - I did not replace anything.

I will PM you with the php/url. Thanks for the help!!!

[Mishmobile]

So, I can't send PMs unless I have posted at least five times. Oh! I guess this will be the fifth. I'll send you a link to my site, and I'll let you know what I think is wrong.

[fudgonaut]

@Mishmobile

Thanks for the help - got it figured out! Because I want to color-code the background of an entire article based on category, I had to wrap most of the blog_item.php in a div. So around line 10 where the contentpaneopen table starts:

Code: Select all

<table class="contentpaneopen<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>">

I added the div opening

Code: Select all

<div class="category-<?php echo $this->item->catid; ?>">         
<table class="contentpaneopen<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>">

And then I closed the div right after closing the table (around line 145).

Code: Select all

</table>
</div>

And now I have a color-coded category blog layout!

Cheers!

[Mishmobile]

@fudgonaut,

Great! I'm glad it worked out for you!

Take care!

[hungry4knowhow]

I'm trying to have different backgrounds in my Article Headings, and Article body based on the Articles Category.

Example, an Article is in the PS3 category so the Title would have the ps3titlebg image. and the article body would have the ps3 symbol enlarged behind it.

Same for XBOX360, Sports, etc...

Would this override thing work for that?

Howmuch of an endeavor is it? I don't consider myself a coder at all. I can hack and edit though with the help of google.

Thanks in advance

/EDIT also edited to add, I dont have any of this stuff inside the html folder of my template which is rhuk milkeyway...but the other two default templates do have this information....am i missing something.

[Mishmobile]

@hungry4knowhow,

The idea you are describing sounds really interesting! The idea of the background images for different categories of articles is reminiscent of the simple iconic backgrounds of "My Pictures" or "My Music" in Windows XP.

Once again, you'll need to determine what views you will be using on your site: frontpage blog or item? Category or Section listings? Once you have that determined, you can use the Joomla override mechanism to copy the appropriate files.

Inserting background images for the article titles will be similar to color-coding the category listings, with the exception that you will not place the <div> tags around the category name, but rather the article title. After that, it's a matter of getting the CSS styles in your stylesheet to appropriately display the background images.

As for the article body background images, you'll again be using <div> tags, but this time around the line of code that says:

Code: Select all

<?php echo $this->item->text; ?>

(Alternatively, you could stylize the surrounding <td> tag, but I think the <div> tags might be better.)

Once again, you'll need to add correspond entries to your stylesheet and display the appropriate background.

I haven't tested this, since I haven't had time to try this out on a non-production server. But, I think that this example might work. In your frontpage/tmpl/default_item.php for a front page item listing, if you changed:

Code: Select all

<?php echo $this->item->text; ?>

to

Code: Select all

<div class="article-in-category-<?php echo $this->item->catid; ?>">         
  <?php echo $this->item->text; ?>
</div>

and added lines to your stylesheet like:

Code: Select all

div.article-in-category-1{
  background-image:url('ps3-grayscale.png');
  background-repeat:no-repeat;
  background-position:top right;
}

you would probably be on your way to customizing your categories.

I wouldn't worry about the lack of the HTML folder in rhuk_milkyway. The other templates are just using overrides, while rhuk_milkyway isn't. I would recommend making your own template, even if it is based off another template that has the right licensing for derivations. IMHO, it makes it easier to make modifications for graphics and such.

[hungry4knowhow]

Thanks for the in depth reply mishmobile.

I have often thought about making my own template. Currently the hacked up version of rhuk im using looks nothing like the original. Its just a bit daunting to me as I am not a from scratch coder.

But it looks as if that may be the way I need to go. Time to grab a CSS book and read up on making templates in joomla.

[modhumiah]

If I want to make joomla templates from where should I start? Is there any detailed tutorial anywhere?

[Ludwig Heijden]

Hi,

This might be a bit of an old topic but it would be so great to get this to work.
I almost got it (at least I think so )
But I am a bit confused to where I should paste this:

Code: Select all

<div class="category-<?php echo $this->category->id; ?>">
....
</div>

I am using a template I made from scratch. So no extra HTML folder in my template folder.
I have been looking at the beez template and copying stuff over from the html folder to a html folder in my template folder and looking for lines similar to the ones used in this thread but that didn't help.
Also tried to paste the code around my mainbody. The last gave me a div class-"catagory-" but no id number...

I have no knowledge of PHP. So it is a cut and paste thing for me.

Any help welcome!

[Mishmobile]

@Ludwig Heijden,

Wow, I haven't visited this thread in a long time. After reading your question, I realize there's a bit of a road ahead in learning how to make modifications to your template, but with determination I think you can do it.

First, read up on creating templates as well as template overrides for your version of Joomla, (in particular, 1.5.x differs from the newer versions.) Google was definitely a friend in this department; as far as I know, there is no one central repository for this type of documentation.

Second, realize that PHP commands are not like fruit toppings for ice cream; one cannot add them to the top of a section of code and have the code take on that flavor. Instead, PHP commands modify a specific section of the code, because PHP is really a programming language. In this case, the PHP code snippets given above must be placed around the exact location in your modified template files that have to do with displaying the category. This is a case where your judgment comes into play. You will have to understand how your template is working to be able to modify it with the above code.

Ludwig, I realize that this is not a direct answer, but, I hope that you'll be able to find that for which you are looking. Best of luck to you.

[kdurrum]

I had to use

Code: Select all

<div class="category-<?php echo $this->article->catid; ?>">

to get this to work properly.

[Mishmobile]

@kdurrum:

I am glad you got it working!

[shiho]

Hi,

I also want to set different styles (title colour) for each of two categories (blue and red) that my news module that I use (mini frontpage) is using on my joomla 2.5 site when showing news blog. As Im not a programmer, above post don't give me clear enough instructions to set up custom news title colours, so is it possible that someone writes step by step instruction:
1. which file, location, what to change/add in that file
2...

Thank you.