Skip to end of metadata
Go to start of metadata

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

 

ActionIcon/ExampleDescription
Edit Panel ContentOpen the panel editor.
Edit Panel NameClick on any red underlined name to change the text.
Edit Panel OutputUse the dropdown to change the panel output format.
Edit Panel DescriptionClick on any red underlined description to change the text
Revert PanelRevert the panel back to the content when skin was first created.
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 PanelEnable 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.

 

Panel Editor

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 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/FeatureIcon/ExampleDescription
Insert MacroOpen the Confluence Macro Browser to choose, customise and add any plugin 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

Automatically re-indent XML/HTML into a neater version

Before - untidy blocks of text:

After - neat indented code with one click:

FullsizeToggle 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.
ApplyApply 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.
OKApply 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.
CloseClose 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:

  • 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 that 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  Theme Builder then you will be familiar with this inheritance as one of the more powerful features of our theming plugin. 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 Skin Hierarchy for more on this feature.

 

 

 

 

  • No labels