[All Adaptavist Apps]

Page tree
Skip to end of metadata
Go to start of metadata

This document lists the panels available in Theme Builder 2.0 and their CSS classes and HTML IDs...

Builder themed pages are organised in to several panels as illustrated below:

Each panel has a class and most have an ID allowing very precise control over style sheet settings:










Header Bar



Menu Bar



Navigation Bar



Left Sidebar



Left Slider



Page Title



Page Content



Page Footntotes



Right Slider



Right Sidebar



Footer Bar



(warning) Wherever possible, avoid using the ID in your style sheet as these may change in later versions of Builder.


 I've added some styles but they aren't taking effect...

Try making them more specific, eg:

.atb-body .atb-content h1 {
 color: red;


  1. Unknown User (dhivya)

    is this above css

    .atb-body .atb-content h1 {
     color: red;

    is to be placed in a new css file and if so how to add it to the current page

    1. Unknown User (gfraser)

      Add it to the CSS Custom styles section of the Builder theme configuration and it'll be propagated to all pages. Alternatively you can use the style macro to apply it to a specific page.

  2. Unknown User (jbenfield)


    I'm trying to change the color of the attribution line in the document panel just below the footer. It reads:

    Adaptavist Theme Builder (3.3.3) Powered by Atlassian Confluence 2.9.1, the Enterprise Wiki.

    If I use atb.body, it obviously changes the color of all links on the page, is there a way to just style this bit of text (mainly the links)? I'm using a dark document background and the default blue link text is too dark.