Change Header Background Colour Per Category

By | May 2, 2008

Interesting questions posed at the osCommerce Forum;

i want to make the header color change when the visitor selects a main category. each main category should have it’s own color.

My reply;

Use a switch on $current_category_id with a stylesheet named the same number.

In depth;

  • We know that $current_category_id gives the ID of the category that is currrently active. We therefore are able to create lots of different stylesheets in order to make each category look different.
  • We know that index.php is the only file that controls Categories – so the code change needs to go in this file.
  • We know that CSS allows us to cascade the style – in other words, css is overridden by later css of the same name.

So, we are able to use a PHP function called “switch” to show a 2nd stylesheet! Like this:

[php]‘;
break;
case 2:
echo ‘‘;
break;
case 3:
echo ‘‘;
break;
}
?>[/php]

This code would be added to index.php right underneath the existing line of code;

[php][/php]

Contained in each .css file would be css code for background colours to OVER-RIDE what you have already defined in the usual stylesheet.css – I’m not going to go into css on this blog post, as I only want to give a brief overview of how I would enable a different theme per category – once I have made a “purple.css” this would then be automatically used for Category ID 2.

Hopefully this blog post will give you some ideas for your own site.

3 thoughts on “Change Header Background Colour Per Category

  1. Nathan

    Excellent work, Exactly what I have been looking for. Doe’s anyone know if you can do this with the Sub-Categories as well?

  2. Gary Post author

    Hi. You can do this for any category or subcategory.

Leave a Reply

Your email address will not be published. Required fields are marked *