Jump to content

Change Header background based on category selected


Sven Kohler
 Share

Recommended Posts

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.

 

Edited by Tony
url spam
Link to comment
Share on other sites

Easy enough.

Consider, though, that a product can be assigned to more than one category. Meaning, if the customer first pulls up a list of cat_id=5 and finds a product that can also be found in cat_id=9, which background image will be in play when viewing that product? (as well as Sale Items and Search Results)

Basically, the product will have a 'primary' category, and that could be the basis for the image. Or a session variable could be logged specifying which source category was being viewed when moving on to view the product.

I will get to work on this in a few hours.

 

Link to comment
Share on other sites

A quick way to get (maybe) what you want is to add a <style> tag to the category and product description. For example, in the editor's Source mode:

<style type="text/css">
body.storefront{background-color:#FFC;}</style>
<p>
	This is a test category setup during install. It can be edited or deleted from the store admin control panel.</p>

Note: Without the .storefront part, this will also affect the editor's rich-text (non-source) view. To stop this, make a change to the skin's main.php file:

From:
<body>
  
To:
<body class="storefront">

A different, more automatic way can be utilized.

Each category can have an image associated with it. Then, in the template file content.category.php, find:

{if isset($category.image)}
<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>
{/if}

Change to:
{if isset($category.image)}
<style type="css/txt">
body.storefront{
  background-image:url("$category.image");
}
</style>
{/if}

Adjust your target CSS selector as necessary.

Link to comment
Share on other sites

  • 1 month later...

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

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

Edited by Bell69
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...