Version 5, last updated by nadia.romano at 23 Feb 13:42 UTC

The branded portfolio tool allows you to set the header and tab colors to match your branding.  Go to the "Branding" tool in the portfolio space.  Choose a custom style.  It will load in the "Custom CSS" panel.  Now, you can edit the style. 

 

Branded spaces image

1. Header

Set a color for the header background color (both must be the same color):
#header-w {
background: #2E4B73;
}
#main-menu-w {
background: #2E4B73;
}

Choose a color for the header links ("My Start Page" and "Logout"):
#header a:link,
#header a:visited {
color: #B6CFF2;
}

2. Help tab

We recommed that the background colorof the "Help" box must be the same for the open help background, choose that color and repeat it 4 times here:
#show-help {
background-color: #5274A5;
}
#help-panel {
background-color: #5274A5;
border-top: 1px solid #5274A5;
border-bottom: 2px solid #5274A5;
}

Now select a color for the "Help" link color (you can optionally use a different color for the link when its open or close:
#show-help a.closed:link,
#show-help a.closed:visited {
color: #E3EFFC;
}
#show-help a.open:link,
#show-help a.open:visited {
color: #E3EFFC;
}


And choose a 'on mouse over' link color:
#show-help a.closed:hover, #show-help a.open:hover {
color: #FFFFFF;
}

3. Top navigation menu

Set here the color for the main menu tab background:
ul#main-menu li {
margin: 0px 1px 0px;
background: #E7FABB;
}

Optionally you can set here a background color for the 'on mouse over' effect here:
ul#main-menu li:hover {
background-color: #D6E8AD;

> (Or just use the same as the main menu tab background).

This the color for text in the main menu tab:
ul#main-menu a:link,
ul#main-menu a:visited {
color: #2E4b73;
}


Choose the background color for the current or selected tab:
ul#main-menu li.current {
background: #FFFFFF;
}

> We recommend that the current or selected tab to be white as the main content background. If you decide to use a different color, we recommend to use a header underline by adding this to '#main-menu-w" and using the same color for the current or selected background color tab:
#main-menu-w {
border-bottom: 5px solid #FFFFFF;
}

4. Company name

If you are not using a company logo, choose a color for the name of your company here:
div#space-customlogo a:link, div#space-customlogo a:visited {
color: #5375A6;
}

5. Space name

Text color for the space name:
div#space-name a:link, div#space-name a:visited {
color: #B6CFF2;
}

6. Space role

Set a color for the text color for the space role indicator:

h1 div#space-role {
color: #b6cff2;
}

7. Wiki title

Color for the main title of the wiki page:
#wiki-content h1 {
color: #2E4B73;
}