CSS Custom Styles
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 CSS
text boxes.
The settings for the custom styles are accessed from Theme Configuration
:
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:
|
|
Unknown macro: {html-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:
Added by
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
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.
The issue with CSS using id's (ie. the # symbol) was fixed in Builder 2.0
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
Ps. I'm using the Builder 2.0.
Regards,
Juha
Updated by Guy Fraser
Jul 31, 2007 22:07
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.
"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
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
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
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.
Is there any detailed guidance for how to mess around with the various menu elements using CSS? if not...please provide some!