ThemeBuilder for Confluence Server and DC

ROOT HTML Structure

The following HTML markup represents a highly simplified version of the HTML output by pages when viewed with the ThemeBuilder ROOT skin on Confluence 5—​if you’re looking to go the extra mile with CSS customisation, this should help:

<body id="com-atlassian-confluence" class="atb-body skin-ROOT nospacekey mode-dashboard context-global decorator-global action-dashboard flag-without-sidebar themeengine dashboard theme-default aui-layout aui-theme-default">
<!--themebody.vm-->
<ul class="assistive" id="assistive-skip-links">
<li>
<a rel="nofollow" href="#title-heading">Skip to content</a>
</li>
<li>
<a rel="nofollow" href="/#breadcrumbs">Skip to breadcrumbs</a>
</li>
<li>
<a rel="nofollow" href="#header-menu-bar">Skip to header menu</a>
</li>
<li>
<a rel="nofollow" href="#navigation">Skip to action menu</a>
</li>
<li>
<a rel="nofollow" href="#quick-search-query">Skip to quick search</a>
</li>
</ul>
<div id="page">
<div id="full-height-container">
<div id="header-precursor">
<div class="cell"></div>
</div>
<div class="aui-header-inner">
<div class="aui-header-primary">
</div>
<div class="aui-header-secondary">
</div>
</div>
<div class=" aui-page-panel" id="main">
<div id="main-header">
<div class="content-navigation" id="navigation">
</div>
<h1 class="pagetitle with-breadcrumbs" id="title-heading"></h1>
<div id="breadcrumb-section">
<h1 class="pagetitle with-breadcrumbs" id="title-heading"></h1>
</div>
<ol id="breadcrumbs"></ol>
</div><span class="with-breadcrumbs" id="title-text">Dashboard</span>
</div>
<div class="pagebody">
<div class="dashboard">
<div class="dashboard-section">
<div id="action-messages"></div>
<div class="PageContent">
<!-- GENERAL PAGE DECORATING BEGINS -->
<a href="#dashboard-recently-updated" class="assistive">Skip to Recently Updated</a>
<div class="PageContent">
<div class="dashboard-group left">

                     </div>
                     <div class="dashboard-group right">
                     </div>
                  </div><!-- GENERAL PAGE DECORATING ENDS -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <div id="footer">
   </div>
</div><!-- \#full-height-container -->
<!-- \#page -->
<!--END themebody.vm-->
</body>