Change colours of top tabs

The colour of Portal tabs, portlet headers and Page Headings can all be customised via the ZMI base properties doc. Here is how you do it.

1. You should have Vasudeva Server's vsSkin as one of you skin layers, or else incoroporate the CSS and properties included at the bottom of the page into your skin.

2. Enter the ZMI, navigate to portal_skins/vsSkin/, click on base_properties and then select Customize.

3. A copy of the base_properties doc is now created inside portal_skins/custom/, where you can now edit it, by first clicking on it inside the custom folder and then selecting the Properties tab.

4. At the bottom of the base_properties document you will find 7 color schemes (vsScheme1 to 7), each with three properties:

   • Name: vsScheme1

     Value: #000099 Controls: portal_tab background color, portletHeader background color, h1 color

   • Name: vsScheme1Border

     Value: #000066 Controls: portal_tab border color, portletHeader border color

   • Name: vsScheme1Hover

     Value: #000077 Controls: portal_tab rollover background color

These values are the portal tabs background color, border color and tab rollover color.

Page header and portlet header colors are also controlled by these 7 schemes ( ie "vsScheme1, vsScheme2, vsScheme3 etc").

Of note is the fact that the design of the portal tabs can still be changed via css additions to ploneCustom.css and yet maintain whatever editable colour values are defined in base_properties.

vsScheme1:string=#000099
vsScheme1Border:string=#000066
vsScheme1Hover:string=#000077

#portal-globalnav .c-1 a, #vs-scheme1 .portletHeader a:link,
#vs-scheme1 .portletHeader a:visited,
#vs-scheme1 .portletHeader a:hover, #vs-scheme1 .portletHeader a:active {
     background:  &dtml-vsScheme1; !important;
     border-color: &dtml-vsScheme1Border; !important;
     border-style: solid solid none solid;
     border-width: 1px;
}

#portal-globalnav .c-1 a:hover {
     background: &dtml-vsScheme1Hover; !important;
     border-color: &dtml-vsScheme1Border; !important;
     border-style: solid solid none solid;
     border-width: 1px;
}

#vs-scheme1 h1 {
     color: &dtml-vsScheme1; !important;
}