.png)
Customise colours, fonts, headings, menus, and much more using CSS...
What are CSS Custom Styles?
All web pages can be customised using something known as CSS (Cascading Style Sheets). Theme Builder allows you to easily add your own style sheet to all pages that use the theme by adding them to the Custom CSS and IE CSS1 text boxes.
The settings for the custom styles are accessed from Theme Configuration2 :
| Ref | Notes |
|---|---|
| 1 | The IE CSS text box was introduced in Theme Builder 2.0. |
| 2 | In Theme Builder 3.0 and above, the settings are located in the CSS Tab in the Layout Manager. |
Defining Styles
Due to the nature of CSS, there are literally thousands of customisation options available - the most common elements that can be customised with CSS include:
We can't teach you how to use CSS - that's beyond the scope of this documentation - however there are numerous on-line resources and books available that provide additional information on CSS.
Related Tutorials
The following tutorials provide examples of some common customisations:
- Breadcrumbs CSS — This short tutorial shows you how to style the breadcrumbs
- Headings CSS — This short tutorial shows you how to change the heading styles using CSS...
- Text Styles CSS — This short tutorial provides numerous examples showing how to improve text styles...
Comments (11)
May 19, 2006
Anonymous says:
Great work! You might want to warn users to avoid using CSS id selectors. For e...Great work!
You might want to warn users to avoid using CSS id selectors. For example:
#poweredby {
}
Velocity attempts to parse them and fails, everytime you look at the page!
Regards,
Horacio Blanco
May 19, 2006
Guy Fraser says:
Horacio, yhank you for bringing that to our attention! We'll try and get some so...Horacio, yhank you for bringing that to our attention! We'll try and get some sort of automated warning or protection for this added to Builder 2.0.
Nov 09, 2006
Guy Fraser says:
The issue with CSS using id's (ie. the # symbol) was fixed in Builder 2.0The issue with CSS using id's (ie. the # symbol) was fixed in Builder 2.0
Oct 03, 2006
Anonymous says:
Hi, I'm having a problem while I try to customize Blog posts in the custom css....Hi,
I'm having a problem while I try to customize Blog posts in the custom css. For some reason the styles I write to the custom css are over run by the builder css. It produces a combination of my styling and the builder styling.
This is odd because I had no problem for example modifying heading styles.
Kind regards,
Juha Franssila
Oct 03, 2006
Anonymous says:
Ps. I'm using the Builder 2.0. Regards, JuhaPs. I'm using the Builder 2.0.
Regards,
Juha
Jul 31, 2007
Guy Fraser says:
You might need to be more specific with your CSS, for example: .atb-content ....You might need to be more specific with your CSS, for example:
.atb-content .blogTitle { your css }(or something like that)
By specifying the .atb-content part, you make the CSS far more specific and it therefore overrides any other settings that might be having an effect.
Nov 09, 2006
Anonymous says:
"Builder versions 1.5 and above provide a default stylesheet containing heading ..."Builder versions 1.5 and above provide a default stylesheet containing heading styles, text ..."
Where abouts is the style sheet located in v2.2.9 ?
And say if you want to edit the left hand menu bar, what is the div called for that.
I'm sure I'll find it once I have a bit more of a root around...
Ian
Nov 09, 2006
Guy Fraser says:
The panels in Builder 2.0 and above all have unique classes and ID's: Panel Clas...The panels in Builder 2.0 and above all have unique classes and ID's: Panel Classes and IDs
Builder 2.0 completely replaces the Confluence stylesheets with two new stylesheets called Edit CSS and View CSS although these are not currently editable due to preparations for Builder 2.1. You can find out more about the various style sheets in Builder 2.0 here: Style Sheets Overview
Jan 16, 2007
Anonymous says:
Using Builder 2.0, I have created a global CSS template for the entire site. How...Using Builder 2.0, I have created a global CSS template for the entire site. However, as we develop it, we are finding the need to customize certain spaces. I have tried multiple ways (just the theme, importing CSS, and the custom CSS space), but no matter what I do in a given space it is almost completely overriden by the global one. Am I missing something? Is there a way to customize the spaces in this case, or do I have to do it on a page-by-page basis using the div and style macros?
Thanks,
Jason
Jan 16, 2007
Guy Fraser says:
As long as the space-specific CSS is loaded after the global CSS it should overr...As long as the space-specific CSS is loaded after the global CSS it should override it. If you continue to have problems, please open a [support ticket]. If you are using @import to pull in CSS files, please note that the @import directive only works at the top of the custom CSS before any inline CSS styles.
Mar 25, 2008
Daniel A. Munz says:
Is there any detailed guidance for how to mess around with the various menu elem...Is there any detailed guidance for how to mess around with the various menu elements using CSS? if not...please provide some!