Part 4. Change Business4 Plone 4 Theme Color Scheme

Tutorial about changing Business4 Plone Theme colour schemes of the main folder and subfolders in Plone 4.

The following tutorial covers customization of Business4 Plone Theme color scheme on a Plone 4 website.

Business4 Plone Theme has site headings, search box, breadcrumbs and top picture selected in a similar color scheme.

Imagine you have replaced default top picture, and want to change color scheme to fit the new image. Let's make color scheme orange so that our site look better with a new top image we set in the Part 2 of this tutorial:

new

Go to the Zope Management Interface portal_skins -> business4theme -> base_properties

base-prop

This file includes baseColor property that defines site colour scheme. To change it we have to customize base_properties file:

customize

Now we can edit the baseColor property:

properties

Save changes. Now get back to Plone interface and see a new front page color scheme: site headings, search box, breadcrumbs are orange.

orange

For the subsequent color scheme changes go directly to portal_skins -> custom -> base_properties.

To customize only the navigation tree text color and make its background darker, add the following line to the /portal_skins/ploneCustom.css file:

dl.portletActionsPortlet { background-color: black; }
or .portletActionsPortlet ul li a { color: black !important; }

Connect with our experts Let's talk