Skip to end of metadata
Go to start of metadata

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 StatusDashboard style requiredNotes
ThemeBuilder New install5.9+Edit the dashboard in your custom skin's panel called standard-dashboard
ThemeBuilder New installPre 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.95.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.9Pre 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 ’s 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. 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.

Panel Element   has a full list of Confluence page elements.

ThemeBuilder Macros has a full list of ThemeBuilder macros.

  • No labels