Page History

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 CSS (Cascading Style Sheets). TheTheme {builder}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 lookthat use the theme by adding them to the Custom CSS and IE CSS{footnote}The IE CSS text box was added in Theme Builder 2.0.{footnote} text boxes.

The settings for the custom styles are accessed from the [Theme Configuration 1.6.x] screen]{footnote}In Theme Builder 3.0 and above, the settings are located in the [CSS Tab].{footnote}:

!builder_custom_css.gif|align=center!

{display-footnotes}

h2. Defining Styles

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

For just about every thing - the most common elements that appearscan onbe acustomised page,with there is a wide variety of customisation options, including:CSS include:

{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 usWe can't teach you how to listuse allCSS of them, but- that's beyond the scope relatedof this tutorialsdocumentation section- belowhowever offersthere someare commonnumerous exampleson-line thatresources willand helpbooks youavailable makethat generalprovide Confluenceadditional lookinformation muchon cleanerCSS.

h2. Related Tutorials

The following tutorials provide examples of some 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].