How to edit branded themes

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.

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;
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:
#main-menu li {
margin: 0px 1px 0px;
background: #E7FABB;
}

Optionally you can set here a background color for the 'on mouse 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" 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;
}

Assembla Support