Change background colour of product sections?

[JamesD]

Is it possible to change colour of the background in each of the different product sections? so that it is easier to differentiate between each section?

If so what is the easiest way to go about this?

Please see the screenshot for clarification of what I would like to do at the link below....

http://imageshack.us/f/684/48499623.jpg/

Thanks

[I-CC]

This is covered in the Advanced User Guide if I recall correctly, within the Section about Layouts and Section Pages, so that should cover what you need.

EDIT: Cancel that, you are after the section link panels on the side nav being different colours, sorry, thought you meant section pages.

[NormanRouxel]

A BlockIf inside the TopLevelSectionList containing:

<actinic:variable name="ListIndex"> % 2

Will return true on every 2nd item. So you could use it to include an additional CSS class on your section link entries.

[NormanRouxel]

Here's demo for the Silver Theme.
Replace:

<actinic:block type="TopLevelSectionList" ><li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>

With:

<style>.alternate {background-color:#89abcd;}</style>
<actinic:block type="TopLevelSectionList" ><li<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%25%202" > class="alternate"</actinic:block>><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>

On a live site, it would be best to lose the <style>....</style> line and move the .alternate {background-color:#89abcd;} into the Actinic Stylesheet.

[JamesD]

thanks for your swift answer but considering I don't know too much about editing style sheets etc could you explain this in simpler steps?!

[NormanRouxel]

Sorry, what I wrote is complete, tested, simple and works.

What you're really asking comes over as a request that I expend a lot more effort because you can't be bothered learning.

[malbro]

Here's demo for the Silver Theme.
Replace:

<actinic:block type="TopLevelSectionList" ><li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>

With:

<style>.alternate {background-color:#89abcd;}</style>
<actinic:block type="TopLevelSectionList" ><li<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%25%202" > class="alternate"</actinic:block>><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>

On a live site, it would be best to lose the <style>....</style> line and move the .alternate {background-color:#89abcd;} into the Actinic Stylesheet.

Apply class named alternate to every alternate Section in the Section List, in this case the styling is simply a different background colour.

Classes apply styling to HTML content, for more details take a look at book on CSS or try here http://www.w3schools.com/css/

The blocks and blockifs are conventional Actinic coding

[JamesD]

Sorry, what I wrote is complete, tested, simple and works.

What you're really asking comes over as a request that I expend a lot more effort because you can't be bothered learning.

how do I find this bit of code please?

<actinic:block type="TopLevelSectionList" ><li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a></li></actinic:block></ul>

[NormanRouxel]

It's in your Overall Layout.

How you locate and edit that is covered in the Starter Guide and Help.