How to edit branded themes
MakeThe branded portfolio tool allows you to set the header and tab colors to match your space your own.branding. Go to the 'Branding'"Branding" optiontool in the portfolio space. Choose a custom style. It will load in the main"Custom menuCSS" andpanel. choose any of the optional pre build styles that we have forNow, you orcan edit the stylesstyle.
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 color of 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;
}
#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'on mouse over'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:
#main-menu li {
margin: 0px 1px 0px;
background: #E7FABB;
}
Optionally you can set here a background color for the 'on'on mouse over'over' effect here:
#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:
#main-menu a:link,
#main-menu a:visited {
color: #2E4b73;
}
Choose the background color for the current or selected tab:
#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"'#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;
}
