Confluence 2.10 has style. This not only means that it looks great out of the box, but now it is easier then ever to change the look and feel of Confluence.
This is the first of a handful of tutorials that will show you how its done. We will look at the Confluence tabs in this tutorial and how we can change their look & feel with a few lines of CSS. First, let’s take a look at what we are trying to achieve:
At the bottom of this page you can find the code for the custom tabs. Simply copy and paste it into the Space Stylesheet form within the Space Administration section. We will discuss each selector in detail:
Container Style
#navigation, #tab-navigation{
border-bottom: 1px solid #CCC;
background-color: transparent;
margin: 1em 0 2em -5px;
}
Lets start with the container around the tabs. We don’t want a background-color for the tabs and the container, therefore we will set the color to be transparent. With the border-bottom attribute we will create a thin grey line at the bottom to separate the navigation from the rest of the page. Lastly we adjust the margins of the container to create some space around the tabs.
Tab Style
.tab-navigation .tab a {
font-weight: normal;
color: #999999;
background-color: transparent;
border: none;
}
Then we style each link within the tab. We set the font-weight to normal, to make the tabs less dominant and change the color to a dark grey. We also have to specify the border and background-color attributes explicitly to overwrite the default styles in Confluence. If we don’t specify the background color for example, the blue color of the default style will be applied.
Hover Style
.tab-navigation .tab a:hover {
font-weight: normal;
color: #0088CC;
background-color: transparent;
border: none;
}
Now we want to specify the hover attributes of the links. Note that we have to overwrite the background-color and the border attributes again, otherwise the default styles will be applied. We also change the color of the text for the hover effect of the link.
Currently Selected Element Style
ul.tab-navigation .current a:hover, ul.tab-navigation .current a {
color:#000000;
background-color: transparent;
border:none;
}
The last selector we will need to customise is the element with the class current. Note that we use a more specific selector this time. The reason we are doing this is because these specific selectors are used in the default CSS stylesheet. If we were to use more general selectors, like we did above (ignoring the ul), the default style would still be applied since more specific selectors are rendered with a higher priority. We want to keep the general style of the other links but simply change the color of the text to black.
Complete CSS Style
Simply copy and paste the code below to change the look of the tabs in Confluence.
/* @group Tab Styles */
.tab-navigation .tab a {
font-weight: normal;
color: #999999;
background-color: transparent;
border: none;
}
.tab-navigation .tab a:hover {
font-weight: normal;
color: #0088CC;
background-color: transparent;
border: none;
}
#navigation, #tab-navigation{
border-bottom-color:#CCC;
margin: 1em 0 2em -10px;
background-color: transparent;
}
ul.tab-navigation .current a:hover, ul.tab-navigation .current a {
background-color: transparent;
border:none;
color:#000000;
}
/* @end */
