Part 4. How to configure BrendA diazo theme colors

Learn how to change BrendA diazo theme colors in Plone 4.1.

The following tutorial covers customization of diazo BrendA Plone Theme colors on a Plone 4.1 website.

BrendA Plone Theme has three customizable colors which can change to make the theme look in a different way. Available editable colors are:

  1. pathbar_color - color of breadcrumbs pathbar, slogan, and color of text in news and events portlets
  2. secondary_color - color of footer background, inner page header, calendar portlet days bar
  3. content_bg_color - color of content area, and left porltet column portlet headings background

See the following screenshot to see where these colors are used on the front page:

front-page.png

and on inner site pages.

inner-page.png

You can configure BrendA theme colors via Site Setup -> Diazo theme control panel.

Note: For Diazo Support extension starting with 1.1b1 version, proceed to Site Setup ->Theming.

Open Advanced settings tab and in Parameter expressions field enter new CSS colors for the following parameters:

  • pathbar_color = context/pathbar | string:#EFD143
  • secondary_color = context/seccolor | string:#49B3CA
  • content_bg_color = context/contentbgcolor | string:#f3f2ef

diazo-settings.png

Let's for example put the following values for pathbar, secondary, and content colors:

  • pathbar_color = context/pathbar | string:#A2CD5A
  • secondary_color = context/seccolor | string:#006400
  • content_bg_color = context/contentbgcolor | string:#F1EDC2

As a result site's front page will have the following look.

new-front-page.png

And site's inner page.

new-inner-page.png

Connect with our experts Let's talk