Skip to end of metadata
Go to start of metadata

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.

See Also

  • No labels