The ThemeBuilder framework uses nested HTML divs as editable panels. The structure of the ROOT skin is based on the default theme for Confluence 5.
There are 4 levels of panel:
The basic panels needed for a skin:
Any panels created as new or edited.
The additional panels used to create the Confluence 5 look and feel.
Any panels disabled from appearing in the current skin.
A red underline means the Name or Description can be edited by clicking that area.
If a panel name is changed, the appropriate Panel Import must also be changed where it has been used to make the panel appear in other panels.
Edit Panel Content
Open the panel editor.
Edit Panel Name
Click on any red underlined name to change the text.
Edit Panel Output
Use the dropdown to change the panel output format.
Edit Panel Description
Click on any red underlined description to change the text
Revert the panel back to the content when skin was first created.
Disable the panel - panel is no longer used in skin and will drop to the disabled list so it can be retrieved if needed. Ensure that all references to the panel are removed from the skin to avoid error messages.
Enable the panel - retrieve from disabled list to be used in skin.
Delete Custom Panel
Only custom panels can be deleted, and they must be disabled first. Ensure that all references to the panel are removed from the skin to avoid error messages.
The ThemeBuilder Panel Editor is a powerful new tool for Confluence theme developers that uses the Emmet web-developer toolkit for an enhanced text editor experience. It allows you to add code in Storage Format, Plain HTML, and Wiki Markup. When in Storage Format mode, the Confluence Macro Browser is available to allow the easy addition of complex functionality. There is also an Edit Macro button for amending existing macros in your code. ThemeBuilder includes CodeMirror for color syntax highlighting and Prettify to re-indent everything for easier reading. The name of the current Skin and Panel are always visible at the top of the editor so you can be sure you are working in the right place.
Panel Editor Actions
Open the Confluence Macro Browser to choose, customize, and add any plugin macro.
Select or click inside a macro, click Edit Macro. The Macro Browser opens, so you can edit that macro’s properties.
Automatically re-indent XML/HTML into a neater version.
The image above is before using Prettify: there’s untidy blocks of text.
The image above is after using Prettify: there’s neat, indented code with one click.
Toggle the Panel Editor between full screen and part screen views.
This produces code numbering, allowing for references within documentation.
Colour Code Syntax
Auto color code syntax detects and highlights elements and tags.
Apply latest panel changes to the skin while keeping the editor open. Changes are applied from the panel directly.
Apply latest panel changes to the skin and close the editor. Changes are applied from the panel directly.
Close the editor without saving.
Conditional logic is used to control which panel is shown in certain circumstances. The main panel is the wrapper used to contain all other panels. For example, in the Confluence Dashboard, the ROOT theme uses panels in this nested order:
standard-dashboard OR classic-dashboard
The panels in ThemeBuilder inherit the same properties as the skin they were created from, unless you edit them. For example, say you copied MAIN skin to make child MAINCHILD. Panels in MAINCHILD will change when you make changes to their equivalent MAIN panels. If you then edit any panel in MAINCHILD, it will stop inheriting changes and instead display its own customizations.
This inheritance is one of the more powerful features of our app. With inheritance, a skin can cascade the majority of its content and styling down to any children while still allowing customizations at the individual skin level that make it unique among its siblings.
See the Skin Hierarchy page for more on this feature.