Sven Kohler Posted February 11 Share Posted February 11 (edited) 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 April 8 by Tony url spam Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 11 Share Posted February 11 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 11 Share Posted February 11 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. Quote Link to comment Share on other sites More sharing options...
Bell69 Posted Saturday at 06:47 AM Share Posted Saturday at 06:47 AM (edited) 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 4 hours ago by Bell69 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.