The "Layout color definitions" in the Project configuration is where this type of change is made:
With the exception of the header's company logo color, because this is an image, if it is sufficient to have the header as a solid color, you can change this by replacing the "RendererSettings" definition and using an appropriate setting in the color definiton configuration.
1. Using Web Designer select Layout definitions
, then expand "Display settings" and select "VI_Styles_RendererSettings_Default" under "Standard":
"VI_Styles_RendererSettings_Default" and choose "Copy object". This will make a copy of the original using the customer prefix. Be sure to select the option, "Add replacement rule for current object":
3. Open the newly created definition to edit and select "Basic styles". Then in the Node editor click the edit button for CSS document
. In the CSS document window that opens, scroll down to the ".userinfo" section and replace:
background: transparent url('%permanentlink%img=UserInfoBar.png') repeat-x top left;
4. Change the color for "VI_Common_Color_ColorBaseHighlight" in the Web Project configuration:
- Select Edit | Configure project -> Web project...
- Expand "Layout color definitions" and scroll down to "Highlighting color" (this corresponds to the "VI_Common_Color_ColorBaseHighlight" key).
- Select the entry and click the "Customized" check box.
- From the Details
section use the color selector to change to the desired color.
5. Recompile the web project to see the change: