The following tutorial covers customization of Business4 Plone Theme color scheme on a Plone 4 website.
- Instruction for Plone 3 website - see in Business4 Color Scheme Customization in Plone 3 tutorial.
- Instruction for Business4 diazo theme on Plone 4.1 website - see in Business4 diazo theme Color Scheme Customization tutorial.
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:
Go to the Zope Management Interface portal_skins -> business4theme -> base_properties
This file includes baseColor property that defines site colour scheme. To change it we have to customize base_properties file:
Now we can edit the baseColor property:
Save changes. Now get back to Plone interface and see a new front page color scheme: site headings, search box, breadcrumbs are 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; }