Panel Code - Dashboard 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"> </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"> </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"> </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"> </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 panel called standard-dashboard.
ThemeBuilder New install	Pre 5.9	In the 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 panel called classic-dashboard.
ThemeBuilder previously installed when Confluence has been upgraded from pre 5.9	5.9+	Copy the ROOT skin Dashboard panel code and paste it into your custom skins Dashboard panel. Edit the dashboard in your custom skin panel called Standard Dashboard.
ThemeBuilder previously installed when Confluence has been upgraded from pre 5.9	Pre 5.9	Copy your custom skin Dashboard panel code and paste it into your Classic Dashboard panel. Copy the ROOT skin Dashboard panel code and paste it into your custom skin 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 uses Atlassian IDs and classes to match the default Confluence look. The identifiers on 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 macro with the parameter page.<content-name>, as seen in the Dashboard panel, is a macro that can display blocks of Confluence content, like a Get Started section.

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

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