Different designs for differetn sections

[JimboS]

On a new site I am creating we sell two different brands of products so would like to change the header-background.gif depending on the section.

I have copy the original page layout and created a new entry on the style sheet for the different header background, I thought that would do the job.

This has worked, but on one page their is also some links appearing which I do not want and the search and cart boxes are a different size.

Can't seem to find out how to comment them out without affecting the design further.

Correct page http://www.viteyes.co.uk/supplements...-Research.html
Incorrect page http://www.viteyes.co.uk/supplements...nt-Health.html

James

[peblaco]

In the Design Library under variables create a new variable with Place of setting Section and type as List Of Choices, click New to enter choices. In the content tree Sections set the variable choices. In the outer layout for the header such as <div class="header-area"> you can add blockifs for variable choices or add a custom style.

[JimboS]

Thanks for that - it created the same layout issue but I noticed that you can use block-ifs in the style sheet.

So tried just wrapped the block-if in you suggested around the actual background entry on the CSS. This appears to work on the desktop but when I upload, the whole style is broken.

.header-area {
	<actinic:block if="%3cactinic%3avariable%20name%3d%22HeaderBackground%22%20%2f%3e%20%3d%3d%20%27Viteyes%27" >background: <actinic:variable name="Palette2" /> url("header-background-viteyes.gif") no-repeat;</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22HeaderBackground%22%20%2f%3e%20%3d%3d%20%27Neoflex%27" >background: <actinic:variable name="Palette2" /> url("header-background-neoflex.gif") no-repeat;</actinic:block>">
	color: <actinic:variable name="Palette1" />;
	padding: 10px;
	width: <actinic:block php="true">echo (<actinic:variable name="WebPageOverallWidth" selectable="false" /> - 20);</actinic:block>px;
	}

Can you offer any further suggestions? I have tried a site refresh in case the CSS was not being uploaded.

James

[peblaco]

That will not work. You can use blockifs in the style sheet if it is a setting applied to the whole website. You cannot apply a section blockif to the style sheet because there is only one style sheet file not separate files and blockifs do not work online.

[JimboS]

I have changed back and uploaded but the style still does not look the same at the top.
http://www.viteyes.co.uk/supplements...-Research.html
http://www.viteyes.co.uk/supplements...nt-Health.html

Do I need to create .header-area2 entries elsewhere in the CSS? All I have added so far is:

.header-area {
	background: <actinic:variable name="Palette2" /> url("header-background-viteyes.gif") no-repeat;
	color: <actinic:variable name="Palette1" />;
	padding: 10px;
	width: <actinic:block php="true">echo (<actinic:variable name="WebPageOverallWidth" selectable="false" /> - 20);</actinic:block>px;
	}
.header-area2 {
	background: <actinic:variable name="Palette2" /> url("header-background-neoflex.gif") no-repeat;
	color: <actinic:variable name="Palette1" />;
	padding: 10px;
	width: <actinic:block php="true">echo (<actinic:variable name="WebPageOverallWidth" selectable="false" /> - 20);</actinic:block>px;
	}

James

[peblaco]

Your CSS is fine. The problem is it looks like you are still using two different outer layouts for the two pages because one has the issue you originally mentioned "links appearing which I do not want and the search and cart boxes are a different size". Check the Settings and Sections for overall layout.

[JimboS]

They all say - use parent and then have the same Full Width Header And Two Sidebars

[peblaco]

You are customising the style .header-area and there are other styles in the CSS style sheet for that not applied to the custom style. You could instead create your own custom names. Also your Terms / Login / Contact Us / Search need colours set because they are white on white and invisible. Check your colours in your style sheet for: .header-area p and .header-area .housekeeping li a