.png)
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.
| Colour Name | Property |
|---|---|
| Top Bar | property.style.topbarcolour |
| Breadcrumbs Text | property.style.breadcrumbstextcolour |
| Space Name Text | property.style.spacenamecolour |
| Heading Text | property.style.headingtextcolour |
| Links | property.style.linkcolour |
| Borders and Dividers | property.style.bordercolour |
| Menu Bar Background | property.style.navbgcolour |
| Menu Bar Text | property.style.navtextcolour |
| Menu Bar Background Highlight | property.style.navselectedbgcolour |
| Menu Bar Text Highlight | property.style.navselectedtextcolour |
| Custom 1 | property.style.customcolour1 |
| Custom 2 | property.style.customcolour2 |
| Custom 3 | property.style.customcolour3 |
| Custom 4 | property.style.customcolour4 |
| Custom 5 | property.style.customcolour5 |
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.
