No announcement yet.

How can I have a different background colour on different pages?

  • Filter
  • Time
  • Show
Clear All
new posts

    How can I have a different background colour on different pages?

    To have a different background colour on each page, you need to create a new user-definable variable called 'BackgroundColor' to replace the default 'BGColor' system variable.

    1. To do this, first of all go into 'Design | Themes' and click 'Advanced Themes Configuration'.

    2. Make a note of whatever you have set for the background colour at the moment.

    3. Next, go to 'Design | Library | Variables', right-click on 'Appearance Settings' and select 'New Variable'.

    4. Give it a name of 'BackgroundColor' and use a prompt of 'Background Color'.

    5. Under 'Place of Setting', select 'Site', 'Section' and 'Brochure' and set the 'Tab Name' to 'General'.

    6. In 'Top Level Value', enter whatever you have got set as the background colour e.g. 'white' or '#ffffff'.

    7. Click 'OK' and close the library.

    You now need to insert this variable into your overall page layouts for your sections and brochure pages.

    8. View a section in the 'Design' tab.

    9. Select the overall page layout for the page.

    10. Locate the <body... > tag.

    11. Add in the following line within the <body> tag:

    HTML Code:
    style="background-color: <actinic:variable name="BackgroundColor" />;"
    You should now be able to change the background colour for each section by changing the 'Background Color' value in the 'General' tab of each section.

    To apply this to brochure pages, just edit the overall page layout of a brochure page.

    Note: some themes use <div> tags to control the background colour of the main area of the page separately from the body background. For example, in the 'Executive' look out for this line:

    HTML Code:
    <div class="page_body" align="center">
    Add the style= command into this line to see the effect.