addy88
addy88

Reputation: 83

Change Header background based on category selected

I need a be able to change the header background on a cubecart v5 on different categories.

So When for example Category 1 is selected I need header background to change to cat1.jpg and for it to stay the same when a product is selected. This is needed for each of the category.

this is how the category url looks

index.php?_a=category&cat_id=1

and this is how the product url looks

index.php?_a=product&product_id=1

Any help would be appreciated.

Upvotes: 1

Views: 336

Answers (1)

Jonas G. Drange
Jonas G. Drange

Reputation: 8845

This is how I would go about doing it, so this may not suit your needs perfectly:

Assuming the header is not part of the content, it should not be an <img> tag. We should use the CSS background property on <header> or the <div id="header"> element.

So, in your template where you have your header, you do create a CSS class with the category ID.

<div id="header" class="cubecart-category cubecart-category-<?php print $catID; ?>">

If this prints out cubecart-category-5, lets say, our CSS will look like this:

.cubecart-category {
    height: 100px;
    width: 980px;
    ...
    background: none no-repeat scroll 0 0 transparent;
}
.cubecart-category-5 {
    background-image: url(cat5.jgp);
}
.cubecart-category-6 {
    background-image: url(cat6.jgp);
}

You could then just put a default image on the class cubecart-category and let it be overridden.

I know this is a generic answer, but is it of any help to you? Let me know.

Upvotes: 1

Related Questions