Confluence Docs 3.0 : Styling Tabs in Confluence This page last changed on Dec 02, 2008 by edawson. Confluence provides the ability to adjust its visual style via Cascading Style Sheets (CSS). With this feature, it is very easy to change the look and feel of Confluence. This tutorial shows you to change the look and feel of Confluence. We will address the Confluence tabs in this tutorial and how we can change their look completely with a few lines of CSS. Let's take a look at what we are trying to achieve. Notice the dark blue tabs in Screenshot 1? Our goal is to blend them into the background and change the text style as in Screenshot 2. Screenshot 1: Default Confluence Tabs in Admin Screen Screenshot 2: Customised Confluence Tabs in Admin Screen 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. Let's 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 */
## RELATED LINKS Basic Styling Tutorial Styling Tabs in Confluence Including Cascading Stylesheets in Themes Attachments: Before.jpg (image/jpeg) After.jpg (image/jpeg)

Document generated by Confluence on Nov 05, 2009 23:27