Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified by Unknown User (gwilson) on Dec 22, 2011

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

1

text boxes.

The settings for the custom styles are accessed from Theme Configuration

2

:

  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...

11 Comments

  1. Anonymous

    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

    1. Unknown User (gfraser)

      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.

      1. Unknown User (gfraser)

        The issue with CSS using id's (ie. the # symbol) was fixed in Builder 2.0

  2. Anonymous

    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

    1. Anonymous

      Ps. I'm using the Builder 2.0.

      Regards,
      Juha

      1. Unknown User (gfraser)

        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.

  3. Anonymous

    "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

    1. Unknown User (gfraser)

      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

  4. Anonymous

    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

    1. Unknown User (gfraser)

      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.

  5. Unknown User (dan_munz)

    Is there any detailed guidance for how to mess around with the various menu elements using CSS? if not...please provide some!