Search the Confluence 4.1.x Documentation:

Index
Downloads (PDF, HTML & XML formats)
Other versions

This documentation relates to Confluence 4.1.x
If you are using an earlier version, please view the previous versions of the Confluence documentation and select the relevant version.
Skip to end of metadata
Comment: Corrected links that should have been relative instead of absolute.
Go to start of metadata

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

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

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

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

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.

 

Related Topics

Basic Styling Tutorial
Styling Tabs in Confluence
Including Cascading Stylesheets in Themes

Labels:
None
Edit Labels

10 Comments

Hide/Show Comments

  1. Jan 27, 2009

    Anonymous

    I'd love to use tabs in my confluence page, but I can't figure out how to do it. tab-deck is not going to work for me, because I have too much content to pull in all at once. I just want a way to use tabs to navigate to the children pages of a space. Am I missing something? It seems like this should be easy. This whole tutorial on how to style tabs, makes it seem to me like I must be missing something.

    1. Feb 17, 2009

      Azwandi Mohd Aris [Atlassian]

      As far as I am concerned, this feature only allows you to customise the styles of existing objects/layouts for Confluence's web interface. However, you might want to check out the Page Tree plugin since it provides a way to navigate through the page hierarchy.

    2. Sep 15, 2010

      Remo Siegwart

      You may want to check out our navitabs plugin for generating tabs for child pages: https://plugins.atlassian.com/plugin/details/28632

      It's free & open source

  2. Apr 01, 2009

    Anonymous

    The tabs at the top of the page ... VIEW ... EDIT ... ATTACHMENTS, etc. Is there any way to move these tabs from the top of the screen to the bottom of the screen?

    Thanks in advance your your tips.

    1. Apr 02, 2009

      Arie Murdianto

      Hi,

      You can try to modify the main decorator which is located in Confluence administration console -> Look & Feel -> Layouts. The appearance of the menu is in the following line especially $sitemeshPage.getProperty("page.browse-menu"):

      <ul id="header-menu-bar" class="ajs-menu-bar">
        #if($sitemeshPage.getProperty("page.browse-menu"))
            $sitemeshPage.getProperty("page.browse-menu")
        #else
            #menuMacros_renderGlobalBrowseMenu()
        #end
        #menuMacros_renderUserMenu()
    </ul>

      1. May 04, 2009

        Anonymous

        Is there a way to take off the "Browse", signin menu for non-registered user?

  3. Jun 11, 2009

    Manoj

    Hi,

    I want to change the main layout of a space in confleunce. I am using confluence 2.7.3. I want similar layout as this site i.e. I want teh Browse space options in the top blue bar. similarly Current user option menu in top bar. and then "ADD" and "TOOLS" menu side by side.. How to generate these menus.. What are the VTL scripts. I used the script from the above comment but it just rendered in the top blue bar.. as followed

    please help.. any help is much appreciated..

    –
    Thankx
    Manoj

  4. Jul 13, 2009

    cha

    I have the same question as the first Anonymous and I also tried to use the deck macro but it's not quite what we wanted. Is it possible to create a tab form in a page that is editable? Or is it possible to replicate Screenshot 1 (see top image) in a page where there is an edit button to edit the content in a pop-up form so that the style of the page is not shown to users?

  5. Jul 06, 2010

    Luqman

    Hi, does anyone know if it is possible to create multiple tabs inside a Confluence page?

    If yes, can I know the codes as well..

    Many thanks!

    1. Jul 09, 2010

      Sashidaran Jayaraman [Atlassian]

      Hi Luqman,

      You might be interested in the Composition Plugin especially the {deck} and {card} macros.

      Hope this helps.

      Cheers
      JSashi