ThemeBuilder for Confluence Server and DC

Edit Skins - Skin Editor

Let’s start with an explanation of some terms you will see in this ThemeBuilder documentation.

What is a Confluence Theme?

ThemeBuilder is a Theme in the sense that it can be selected as an alternative to the default Confluence theme in Confluence Administration > Look and Feel.

edit skins 01

What is a ThemeBuilder Skin?

A skin is the collection of editable panels that make up one whole page framework that can be applied to Confluence through ThemeBuilder. You can have multiple skins in the Skin Editor, and each can be applied automatically to individual spaces, pages, actions and similar options, to finely tune the user experience.
In previous versions of Theme Builder a skin was called the layout.

edit skins 02

Skin Editor Overview

Left Panel - Skin Actions and Tree Menu

edit-skins-03 Icon menu for actions you can apply to skins (from left to right):
- edit-skins-04 Save changes to selected skin
- edit-skins-05 New skin based on selected skin – new skin becomes child of selected skin
- edit-skins-06 Duplicate selected skin – new skin becomes sibling to selected skin
- edit-skins-07 Reload current skin – refresh to remove unsaved changes
- edit-skins-08 Revert skin to defaults – return to state matching skin it was created from
- edit-skins-09 Delete selected skin
Tree navigation showing all the skins available
Note that ROOT is always at the base of this tree and cannot be edited or deleted.

Right Panel - Seven Tabs for the Editor Tools

Click the headings on the right for more information on that item.

edit-skins-10

Overview
Add and edit the skin name and description.

Panels
Editor view for theme code, with context colour coding.

CSS
Editor for custom CSS, with options for IE only and CSS includes.

JS
Editor for custom JavaScript and JQuery.

Options
Advanced skin, site and SEO options.

HTML
Customise the site DOCTYPE, add HTML to the Header, Body and Footer elements.

Permissions
Set permissions by Confluence group for skin selection and editing, and panel editing.

Resources
Add a text or image resource to be used by ThemeBuilder in your skin.