ThemeBuilder for Confluence Server and DC

Skin Editor - Panels

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:

Core

The basic panels needed for a skin: dashboard, flagLogic, and main

Custom

Any panels created as new or edited.

Inherited

The additional panels used to create the Confluence 5 look and feel.

Disabled

Any panels disabled from appearing in the current skin.

A red underline means the name or description can be edited by clicking on 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.

Panel Actions

Action

Icon/Example

Description

Edit Panel Content

edit panel icon

Open the panel editor.

Edit Panel Name

edit panel name

Click on any red underlined name to change the text.

Edit Panel Output

edit panel output

Use the dropdown to change the panel output format.

Edit Panel Description

edit panel description

Click on any red underlined description to change the text

Revert Panel

revert panel

Revert the panel back to the content when skin was first created.

Disable Panel

disable panel

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 Panel

enable panel

Enable the panel - retrieve from disabled list to be used in skin.

Delete Custom Panel

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.

Panel Editor

panel editor dashboard

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 colour 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

Action/Feature

Icon/Example

Description

Insert Macro

insert macro

Open the Confluence Macro Browser to choose, customise and add any plugin macro.

Edit Macro

edit macro

Select or click inside a macro, click Edit Macro, and the Macro Browser will open so you can edit that macro’s properties.

Prettify

prettify

Automatically re-indent XML/HTML into a neater version.

before prettify

The image above is before using Prettify: there’s untidy blocks of text.

after prettify

The image above is after using Prettify: there’s neat, indented code with one click.

Fullsize

fullsize

Toggle the Panel Editor between full screen and part screen views.

Numbering

Code numbering e.g. for documentation references

Colour Code Syntax

Auto colour code syntax detects and highlights elements and tags.

Apply

apply

Apply latest panel changes to the skin while keeping the editor open. There is no need to use the Skin Editor 'Save' button, changes are applied from the panel directly.

OK

ok

Apply latest panel changes to the skin and close the editor. There is no need to use the Skin Editor 'Save' button, changes are applied from the panel directly.

Close

close

Close the editor without saving.

Conditional Logic

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:

  • main

    • without-sidebar

      • header

      • title

      • content

        • dashboard

        • standard-dashboard OR classic-dashboard

    • page.footer

Panel Hierarchy

The panels in ThemeBuilder inherit the same properties as the skin they were created from, unless you edit that panel. 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 customisations.

If you used ThemeBuilder, you will be familiar with this inheritance as one of the more powerful features of our theming app. With inheritance, a skin can cascade the majority of its content and styling down to any children while still allowing customisations at the individual skin level that make it unique among its siblings.

See the Skin Hierarchy page for more on this feature.