Confluence Colours

This tutorial shows you how to use colours from the Colour Scheme settings in Space Administration within your CSS...

If you use Confluence colours within your style sheets, space administrators will be able to customise the colours of your layout even if they don't have access to edit it. This is particularly useful when you want to allow a layout to be customised on a space-by-space basis.

Example

Simply insert the colour property in to your CSS where you would normally use a HTML colour reference, for example if you want to set the border colour of the menu bar you could use:

.atb-menu {
 border-color: property.style.bordercolour;
}

The layout will automatically replace the colour property with the colour specified in the colour scheme. If the colour scheme is changed, the layout will automatically update to the new colours.

Colour Properties

The table below shows the colour name as it appears in the colour scheme and it's corresponding colour property that can be used in your CSS files.

Other Notes

When viewing themed pages at global level (eg. Dashboard, search results, etc.) the global colour scheme will be used. When viewing at space level (eg. wiki pages, alphabetical index, etc) the space's colour scheme will be used.

See Also

• Colour Picker
• Border Settings
• Background Settings
• Text Settings