Page History

{scrollbar:no-css=true}
h1. CSS Custom Styles

*{excerpt}Customise colours, fonts, headings, menus, and much more using CSS...{excerpt}*

h2. What are CSS Custom Styles?

All web pages can be customised using something known as {glossary}CSS{glossary} (Cascading Style Sheets). The {builder} theme allows you to inject your own custom styles in to all pages within a space in order to change the way those pages look.

The settings for the custom styles are accessed from the [Theme Configuration] screen:

!builder_custom_css.gif|align=center!

h2. Defining Styles

Due to the nature of {glossary}CSS{glossary}, there are literally thousands of customisation options available.

For just about every thing that appears on a page, there is a wide variety of customisation options, including:
{section}{column}
* [Background colour and images|http://www.w3schools.com/css/css_background.asp]
* [Border style, width and colour|http://www.w3schools.com/css/css_border.asp]
* [Padding|http://www.w3schools.com/css/css_padding.asp] and [Margins|http://www.w3schools.com/css/css_margin.asp]
* [List item styles|http://www.w3schools.com/css/css_list.asp]
* [Text color, indentation, decoration, etc.|http://www.w3schools.com/css/css_text.asp]
* [Font, style and size|http://www.w3schools.com/css/css_font.asp]
* [Voice settings for text-to-speech|http://www.w3schools.com/css/css_ref_aural.asp]
* [Height and width|http://www.w3schools.com/css/css_dimension.asp]
{column}{column}
{center}{html-include:url=http://rcm-uk.amazon.co.uk/e/cm?t=adatapvistcom-21&o=2&p=8&l=as1&asins=0321303474&nou=1&fc1=000000&IS2=1&lt1=_blank&lc1=4860B9&bc1=ffffff&bg1=ffffff&f=ifr}{center}
{column}{section}

As such, it's impossible for us to list all of them, but the related tutorials section below offers some common examples that will help you make general Confluence look much cleaner.

h2. Related Tutorials

The following tutorials provide examples of common customisations:

{tip}{builder} versions 1.5 and above provide a default stylesheet containing heading styles, text styles and various other useful bits and pieces. Simply change it to suit your needs. :){tip}

{children:all=true|excerpt=true}

In addition, there are also specific examples for customising [Menus].