Different header for different product categories possible?

[Rotkale]

Hi all ^^

Im having a problem with this... I have full html layout of our webstore ready and our header changes depending on category of products. Is it possible to implement this to zen cart too?

I tried to just not use any layout in header, footer and just build the whole page with for example "tpl_index_default.php" file. This works fine with just static pages, but when trying to do this in product listinings it becomes troublesome.

Like you see im new with zen cart ^^;;

Thanks for advance!

- Rotkale

[clydejones]

You can use "per page stylesheets" to accompliish this.

[Rotkale]

You can use "per page stylesheets" to accompliish this.

Thanks for fast reply. This works even when working with images?

[clydejones]

Yep,

for instance in the stylesheet.css you use for for your main page you have this declaration:

#logoWrapper {
background: url(../images/your_main_image.jpg);
}

now create a stylesheet for category one and change it:

the stylesheet would be named c_1.css and would place this declaration along with any others you might need to style the page.

#logoWrapper {
background: url(../images/category_one_image);
}

[Rotkale]

Yep,

for instance in the stylesheet.css you use for for your main page you have this declaration:

#logoWrapper {
background: url(../images/your_main_image.jpg);
}

now create a stylesheet for category one and change it:

the stylesheet would be named c_1.css and would place this declaration along with any others you might need to style the page.

#logoWrapper {
background: url(../images/category_one_image);
}

Thanks alot! I start trying that ^^

[Rotkale]

Hmmm,

I edited stylesheet.css and took #logoWrapper off the line it was earlier:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

and made new section like this:

#logoWrapper {
background: url("Images/header_covington.jpg");
}

I tried that also without the ""
and put this in middle of html section of the header file:

<tr>
<td colspan="2">
<div id="logoWrapper"></td>
</tr>

But my header image wont appear at all ^^;; What am i doing wrong?

[Rotkale]

Oh i found solution for that problem above by using the full url (http://www.mysite.com/images/etc...)

Here is another question about header, in our layout we have jscript like this on header:

<td colspan="2">
<script LANGUAGE="JavaScript">
iArray=new Array(
"Images/met_header1.jpg",
"Images/met_header2.jpg",
"Images/met_header3.jpg",
"Images/met_header4.jpg");
ri=Math.floor(iArray.length*Math.random());
ri='<IMG SRC="'+ iArray[ri]+ '" BORDER=0>';
</script><script>
document.write(ri);
</script></td>

Is there anyway to use this kind of jscript header on product categories? Main site uses just static header like with code like i showed above.

Thanks in advance~

[clydejones]

and made new section like this:

#logoWrapper {
background: url("../Images/header_covington.jpg");
}

You forgot the portion highlighted in red

[Rotkale]

and made new section like this:

#logoWrapper {
background: url("../Images/header_covington.jpg");
}

You forgot the portion highlighted in red

Yeah i tried that too, but i only got it work with full url. My images folder is in store root.

About the question i asked above, the jscript random image thing, can i use category #logoWrapper to point to an js file? So the header image would change randomly like in the code i showed above? Or is there any other way to make it work?

Thanks~

[clydejones]

Sorry, I don't use the random image contribution so I can't give you any kind of definitive answer on its ins and outs.