ThemeBuilder for Confluence Server and DC

Panel Code Dashbaord Example

The ROOT theme has been written in Confluence Storage Format. The Dashboard panel is a combination of HTML elements and XML macro calls.

Confluence Pre 5.9

<div class="PageContent">
<div class="dashboard-group left">
<div class="dashboard-item welcome-message wiki-content">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-welcome</ac:parameter>
</ac:macro>
</div>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-actions</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-panels</ac:parameter>
</ac:macro>
</div>
<div class="dashboard-group right">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-recent</ac:parameter>
</ac:macro>
</div>
</div>

Confluence Post 5.9

There are now three skin panels that control the Dashboard: dashboard, standard-dashboard and classic-dashboard.

Dashboard Panel

This panel controls which version of the dashboard to show.

  • standard = Confluence 5.9+

  • classic = Confluence pre 5.9

<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">standard-dashboard</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-show">
<ac:parameter ac:name="atleastbuild">6200</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">standard-dashboard</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-show">
<ac:parameter ac:name="darkfeatures">simple.dashboard.disabled</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">standard-dashboard</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">standard-dashboard</ac:parameter>
<ac:parameter ac:name="flag">standard-dashboard</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">classic-dashboard</ac:parameter>
<ac:parameter ac:name="notflag">standard-dashboard</ac:parameter>
</ac:macro>

Standard-Dashboard

Creates a dashboard as in Confluence 5.9+

<div class="confluence-dashboard">
<div id="nav-sidebar" class="aui-sidebar ">
<div class="aui-sidebar-wrapper">
<div class="aui-sidebar-body">
<nav class="aui-navgroup aui-navgroup-vertical">
<div class="aui-navgroup-inner">
<div id="sidebar-discover" class="aui-sidebar-group aui-sidebar-group-tier-one sidebar-discover spa">&nbsp;</div>
<ac:macro ac:name="panel-hide">
<ac:parameter ac:name="user">@anonymous</ac:parameter>
<ac:rich-text-body>
<div id="sidebar-my-work" class="aui-sidebar-group aui-sidebar-group-tier-one sidebar-my-work spa">&nbsp;</div>
</ac:rich-text-body>
</ac:macro>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-sidebar-spaces</ac:parameter>
</ac:macro>
</div>
</nav>
</div>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-sidebar-footer</ac:parameter>
</ac:macro>
</div>
</div>
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content content-body">&nbsp;</section>
<aside class="aui-page-panel-sidebar content-sidebar">
<div class="dashboard-buttons">
<ac:macro ac:name="simple-section">
<ac:parameter ac:name="location">system.dashboard.button</ac:parameter>
<ac:parameter ac:name="display">buttons</ac:parameter>
<ac:parameter ac:name="itemclass">dashboard-button-web-item</ac:parameter>
</ac:macro>
</div>
<div id="welcome-message" class="welcome-message wiki-content">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-welcome</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-show">
<ac:parameter ac:name="permission">siteadmin</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-welcome-message-edit</ac:parameter>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
</div>
<div class="dashboard-items">
<ac:macro ac:name="simple-section">
<ac:parameter ac:name="location">system.dashboard</ac:parameter>
<ac:parameter ac:name="display">buttons</ac:parameter>
<ac:parameter ac:name="itemclass">dashboard-button-web-item</ac:parameter>
</ac:macro>
</div>
<ul id="web-panels">
<ac:macro ac:name="web-panel">
<ac:parameter ac:name="location">atl.dashboard.secondary</ac:parameter>
<ac:parameter ac:name="wrapper">list-item</ac:parameter>
<ac:parameter ac:name="wrapClass">web-panel</ac:parameter>
</ac:macro>
<ac:macro ac:name="web-panel">
<ac:parameter ac:name="location">atl.dashboard.left</ac:parameter>
<ac:parameter ac:name="wrapper">list-item</ac:parameter>
<ac:parameter ac:name="wrapClass">web-panel</ac:parameter>
</ac:macro>
</ul>
</aside>
</div>
</div>
</div>
<div class="dialogs">&nbsp;</div>

classic-dashboard

Creates a dashboard as in Confluence 5.9+

<ac:macro ac:name="panel-main-wrapper">
<ac:parameter ac:name="wrapper">dashboard</ac:parameter>
<ac:rich-text-body>
<div class="dashboard-group left">
<div class="dashboard-item welcome-message wiki-content">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-welcome</ac:parameter>
</ac:macro>
</div>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-actions</ac:parameter>
</ac:macro>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-panels</ac:parameter>
</ac:macro>
</div>
<div class="dashboard-group right wiki-content">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.dashboard-recent</ac:parameter>
</ac:macro>
</div>
</ac:rich-text-body>
</ac:macro>

How to Set and Edit Your Confluence Dashboard

ThemeBuilder and Confluence Status Dashboard Style Required Notes

ThemeBuilder New install

5.9+

Edit the dashboard in your custom skin’s panel called standard-dashboard

ThemeBuilder New install

Pre 5.9

In dashboard panel set this flag to false

<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">standard-dashboard</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>

Edit the dashboard in your custom skin’s panel called classic-dashboard

ThemeBuilder previously installed when Confluence has been upgraded from pre 5.9

5.9+

Copy the code from the ROOT skin dashboard panel into your custom skin’s dashboard panel Edit the dashboard in your custom skin’s panel called standard-dashboard

ThemeBuilder previously installed when Confluence has been upgraded from pre 5.9

Pre 5.9

Copy the code from your custom skin’s dashboard panel into your custom skin’s classic-dashboard panel Copy the code from the ROOT skin dashboard panel into your custom skin’s dashboard panel

<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">standard-dashboard</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>

Edit the dashboard in your custom skin’s panel called classic-dashboard

HTML Elements

The HTML has been based on Confluence 5’s code, and makes use of Atlassian ids and classes so that it matches the default Confluence look. The identifiers on any of these elements can be added to, or changed, and then styled with the CSS editor.

Macros

ThemeBuilder Panels can use any macro available to Confluence, including other plugins. ThemeBuilder also has its own macros for displaying Confluence or ThemeBuilder content. The panel-element with the parameter ‘page.<content-name>’, as seen in the Dashboard panel, is a macro that can display blocks of Confluence content like the Get Started section.

The Panel Element page has a full list of Confluence page elements.

See a full list of ThemeBuilder macros in the documentation section of the same name, on the left hand side menu.