Making different categories have different colours/headers/side boxes etc

[SarahL]

What I wanted to do:

Have 2 categories, each category would have a different HEADER LOGO & STYLESHEET as well as image buttons for SIDEBOXES

this is just to help my situation but I thought that I would post it incase it helped anyone else. There is probably a bettera nd cleaner way of doing this BUT I do only change template files using eth override system so it "shouldn't" effect new core code.

As always back up and test. I have this working but can only post url after the site is live.

You might not need to do as much as me as I used images rather than CSS so it could be even simpler than below

Files I edited (use the template override system always):

your_template/common/html_header.php
your_template/common/tpl_header.php
your_template/common/tpl_footer.php
your_template/common/tpl_default_box_left.php
your_template/css/stylesheet.css

new files

your_template/css/split/stylesheet_flame.css
your_template/css/split/stylesheet_esd.css

Note my file variables are called “esd” and “flame” just replace these with your own suitable words throughout

For CSS and general variables

FILE: html_header.php

find line at top

/*** load the module for generating page meta-tags*/
require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));

include the next lines below

/*** which category are we in - flame or ESD determine from this which variable to display */
$cpath = $_GET['cPath'];
$cpath = explode("_", $cpath);
switch ($cpath[0]) {
	case "11":
		$variablecpth = "esd";	
		break;
	case "3":
		$variablecpth = "flame";	
		break;
	default:
		$variablecpth = "flame";	
		break;
}

You will need to expand the switch for the different categories that you want this to work with – just click on the categories themselves and take a note of the cPath value in the URL bar. Don’t forget to set a default value for the cart etc

In Same file locate

/**
 * load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by JuxiJoza.
 */

and add in above it

/**
* load the spilt css for flame and esd SARAH 21 Aug 2006
*/
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"includes/templates/classic/css/split/stylesheet_".$variablecpth.".css\" />\n";

For the changing header logo

This is header because the header logo name is set in the language files – so open

FILE: tpl_header.php

and locate

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

now replace with these lines

<!--allowing different header images to display-->
<!--    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>-->
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . '<img src="includes/templates/classic/images/header_'.$variablecpth.'.jpg" alt="'.$HEADER_ALT_TEXT.'" title="'.$HEADER_ALT_TEXT.'" width="779" height="112" />' . '</a>'; ?></div>

CSS files

Create a new CSS folder called “split” under the folder your-template/css/

In there place the css files that details ONLY the items that will change in colour – everything else keep in css/stylesheet.css, call these css/split/stylesheet_flame.css and css/split/stylesheet_esd.css

Swapping Images

Now I use image for nav buttons a lot so I have to edit ANY location that uses an image and include this:

<img src="includes/templates/classic/images/home_<?=$variablecpth?>.jpg" alt=”" title=" " height="16" />

then I name each image identically except for the “flame” or “esd” item, these are all saved in the same folder your_template/images/

this I change the files within

FILE: tpl_footer.php
FILE: tpl_header.php

But this might not apply to you and you can do most things via CSS

Categories side box headers

FILE: common/tpl_default_box_left.php

Again I like using images for this and so I had to add the home_<?=$variablecpth?>.jpg

Within common/tpl_default_box_left.php for example:

<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><img src="includes/templates/classic/images/<?php echo $title; ?>_<?=$variablecpth?>.jpg" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" width="171" height="33" /></h3>

Basically it’s a little unorthodox and not the best but it does allow you to have different looks for different categories – your SSL will work – no need to play around with the dB or anything else.

I will try to answer questions if you have any

Enjoy
Sarah

[makc]

thank you for sharing, I hope it will be usefull for me, since I will need to implement separate designs for every category.

[DrByte]

For a simpler approach, take a peek in the /docs folder of your Zen Cart files for readme_css_system.html ... you'll find that the CSS portion is a lot simpler. You could even use CSS to dump an appropriate image on a particular box heading using its id.

[SarahL]

quite agree :nod: there is a simpler way to do it BUT looking over the forums this is one question that gets asked an awful lot and no one seemed to have a conclusive answer or "how to" and personally the CSS for the v1.3 is well... lets just say more complicated than I felt it should be, especially for a IE/FF/NS compliant. So I felt that because I needed something now that I would post what I did - and then if at the end I helped people or came up with a better solution then perfect

[DrByte]

Nothing wrong with that ;)
Thanks for the detailed post. The concept will be helpful to folks wanting to understand what needs to be done.
perhaps someone will document the process using a focus on css

[SarahL]

when I am not up against a deadline I will see if I can figure the CSS side of things out, as I must admit I am finding the newer version harder to customise completely than the other table layout. But I know that is just what I know and what I am used too ultimatly its better I just need to bring my brain up to speed with it! and doing things like this mean I can do it this way then few weeks/months later figure out the proper way ;)

[makc]

For a simpler approach, take a peek in the /docs folder of your Zen Cart files for readme_css_system.html ... you'll find that the CSS portion is a lot simpler. You could even use CSS to dump an appropriate image on a particular box heading using its id.

well thanks for pointer.

[makc]

I still have a problem with css way.
I need unique image with link map (what is correct name for it?) per category.
I can override image with css, but not map.
Any ideas?