This documentation relates to the latest version of Confluence.
If you are using an earlier version, please go to the documentation home page and select the relevant version.

Customising Colour Schemes

All Versions
Click for all versions
Confluence 2.9 Documentation

Index

A Confluence administrator can configure a new colour scheme for the site dynamically from the Administration Console.

The default colour scheme for the site will also become the default for all spaces within it. However, it is possible for space administrators to configure a different colour scheme for spaces from the space administration screens.

To change the site's colour scheme,

  1. Go to the Confluence 'Administration Console'. To do this:

    • Open the 'Browse' menu and select 'Confluence Admin'. The 'Administration Console' view will open.
  2. Select 'Colour Scheme' in the left-hand panel.
    This will bring up a new screen. See screenshot below.
  3. Click 'Edit'. Enter standard HTML/CSS2 colour codes, or use the colour-picker to choose a new colour from the palette provided. Any changes you make will immediately be reflected across the Confluence installation.

The colour scheme applies to the following UI elements:

  • Top Bar - the bar across the top of the page that contains the breadcrumbs
  • Tab Navigation Background - the background colour of the tab navigation menus
  • Tab Navigation Text - the text of the tab navigation menus
  • Breadcrumbs Text - the breadcrumbs text in the top bar of the page
  • Space Name Text - the text of the current space name located above the page title
  • Heading Text - all heading tags throughout the space.
  • Links - all links throughout the space.
  • Borders and Dividers - table borders and dividing lines.
  • Tab Navigation Background Highlight - the background colour of the tab navigation menu when highlighted
  • Tab Navigation Text Highlight - the text of the tab navigation menu when highlighted
  • Top Bar Menu Selected Background - the background colour of the top bar drop down menu when selected
  • Top Bar Menu Item - the text colour of the menu items in the top bar drop down menu
  • Page Menu Selected Background - the background colour of the drop down page menu when selected
  • Page Menu Item Text - the text of the menu items in the drop down page menu
  • Menu Item Selected Background - the background colour of the menu item when selected (applies to both the top bar and page drop down menus)
  • Menu Item Selected Text - the text colour of the menu item when selected (applies to both the top bar and page drop down menus)

Please note that some UI elements are specific to the default theme and may not take affect for other themes.

Screenshot : Editing a site's colour scheme

Handy Hint
If you mess things up, just click the 'Reset' button and then try again.
RELATED TOPICS
Adding a Site-Wide Banner
Creating a Theme Plugin
Customising Colour Schemes
Customising Layouts
Customising Look and Feel Overview
Editing the Footer
Global Templates
Theme Plugins
Upgrading Custom Layouts
Working With Decorator Macros

Labels:

customising-looknfeel customising-looknfeel Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.
  1. Nov 21, 2007

    Randy Hansen says:

    Is there a way to access the color scheme elements within a page? For example I ...

    Is there a way to access the color scheme elements within a page? For example I would like to use the border color from the space on all of my panels. That way if the space's color scheme changes, the panels on the various pages would change too.

    1. Nov 21, 2007

      Liam Jones says:

      You can access these properties via Velocity. Take a look at confluence\styles\s...

      You can access these properties via Velocity. Take a look at confluence\styles\site-css.vm and you'll see the following used;

      $action.breadcrumbsTextColor
      $action.spaceNameColor
      $action.headingTextColor
      $action.linkColor
      $action.borderColor
      $action.navBackgroundColor
      $action.navTextColor
      $action.navSelectedBackgroundColor
      $action.navSelectedTextColor

      Example from site-css.vm;

      .panel {
          border: 1px solid $action.borderColor;
          color: black;
          padding: 0;
          margin: 10px 20px;
          background-color: #f0f0f0;
      }
  2. Feb 25, 2008

    Anonymous says:

    Any reason that selected custom color wouldn't be activated? I have have "all ac...

    Any reason that selected custom color wouldn't be activated? I have have "all access" set up in the space permissions.

    thanks for any help,

    1. Feb 25, 2008

      Choy Li Tham says:

      Hi, It would be appreciated that if you could raise a support request at here h...

      Hi,

      It would be appreciated that if you could raise a support request at here for further investigation.

      Regards,
      Choy Li

Add Comment