Edit Skins - Skin Editor

Let’s explain some terms you will see in this ThemeBuilder Skin Editor documentation.

What is a Confluence Theme?

ThemeBuilder is a theme because it can be selected as an alternative to the default Confluence theme in Confluence Administration. To select ThemeBuilder as your Theme:

  1. Click Settings.

  2. Under Jira Settings, click System.

  3. The Look and Feel menu is displayed in the left sidebar.

    The Site Theme section of the Look and Feel menu.

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 fine-tune the user experience.
In previous versions of ThemeBuilder, a skin was called the layout.

Example skins shown in the Available Skins section in the Skin Editor.

Skin Editor Overview

Left Panel - Skin Actions and Tree Menu

Example skins shown in the Available Skins section in the Skin Editor.


Icon menu for actions you can apply to skins (from left to right):

-  Save changes to the selected skin

-  New skin based on selected skin – new skin becomes a child of selected skin

-  Duplicate selected skin – new skin becomes sibling to the selected skin

-  Reload current skin – refresh to remove unsaved changes

-  Revert skin to defaults – return to state matching skin it was created from

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

The Overview tab in the Skin Editor.

Overview
Add and edit the skin name and description.

Panels
Editor view for theme code, with context color 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
Customize 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.

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