FlagLogic in Skins

The ROOT skin uses FlagLogic to switch between four primary content panels related to the context of the page:

• without-sidebar: no sidebar - dashboard, edit

• with-sidebar: adds a left-hand sidebar - standard page view, space admin

• profile: user profile screens

• login: login, logout, signup

ROOT FlagLogic Content

 
<!-- create and set flags to control the login and sidebar views
- default is without-sidebar, e.g., for dashboard and space pages
- set flag with-sidebar = false
- flag without-sidebar = true
- and login = false -->
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">with-sidebar</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">without-sidebar</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">login</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<!-- use panel-hide (builder-hide) to detect the confluence decorator
- we are looking for the page and blog post view, so for everything else the code inside is hidden -->
<ac:macro ac:name="panel-hide">
<ac:parameter ac:name="decorator">global,profile,search,login,null</ac:parameter>
<ac:rich-text-body>
<!-- use panel-hide (builder-hide) to detect the edit mode and only show the sidebar if not in that mode
- set flag with-sidebar = true
- flag without-sidebar = false
- and login = false -->
<ac:macro ac:name="panel-hide">
<ac:parameter ac:name="mode">edit</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">with-sidebar</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">without-sidebar</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">login</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
<!-- use panel-show (builder-show) to detect the confluence decorator
- we are looking for the login, so for everything else, the code inside is hidden
- set flag with-sidebar = false
- flag without-sidebar = false
- and login = true -->
<ac:macro ac:name="panel-show">
<ac:parameter ac:name="decorator">login</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">with-sidebar</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">without-sidebar</ac:parameter>
<ac:parameter ac:name="state">false</ac:parameter>
</ac:macro>
<ac:macro ac:name="set-flag">
<ac:parameter ac:name="name">login</ac:parameter>
<ac:parameter ac:name="state">true</ac:parameter>
</ac:macro>
</ac:rich-text-body>
</ac:macro>

For a standard page, the nested panel order is:

• main

  • with-sidebar

    • header

    • page.ia-sidebar

    • title

    • content

    • page.footer

In the with-sidebar panel this looks like:

 
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">header</ac:parameter>
</ac:macro>
<div class="ia-splitter">
<div class="ia-splitter-left">
<div class="ia-fixed-sidebar">
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.ia-sidebar</ac:parameter>
</ac:macro>
</div>
</div>
<div id="main" class=" aui-page-panel">
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">title</ac:parameter>
</ac:macro>
<div id="sidebar-container">  </div>
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">content</ac:parameter>
</ac:macro>
</div>
<ac:macro ac:name="panel-element">
<ac:parameter ac:name="element">page.footer</ac:parameter>
</ac:macro>
</div>

Notice the two ‘panel-element’ macros for page.ia-sidebar and page.footer. This tells ThemeBuilder to use the default Confluence content for these areas. To customize the content in this area: make a new panel, add your content, and use the Panel Import macro with your new panel name to replace the Panel Element macro.

Related Content

• Customize Panel Content: Footer Example