When you select a skin in the Publish page you may notice the Custom Skin option at the bottom of the list. This allows you to select and use skins you have built and stored yourself. A custom skin is a single XML file with a predefined format that can be stored anywhere you like and selected with the Custom Skin option.

About custom skins

A HelpXplain skin is an XML file that contains the XML definitions and variables for your skin, together with the HTML code for the Xplain page in an XML C-Data section. The CSS formatting code for the skin is also included directly in the HTML code, in the head section.

For a fully documented and commented example  see the default.xml file that you can find in the \Resources\Skins\ folder in the HelpXplain program directory.

The basics

If you look at the default.xml skin file with its included documentation you should see how it works fairly quickly if you have experience with this kind of layout. The basic principles are:

Variables

Variables are used to insert elements and code in the HTML code of your skin. You simply write the variable in the HTML code in the format <%VARIABLE_NAME%>. Then it will be replaced with the current contents of the variable when you publish with the skin.

Predefined Variables

These variables are all listed in the documentation in the default skin and most of them are required. They insert the necessary components of a HelpXplain skin.

Custom Variables

You can define as many of these as you like in the <variables> block of your XML skin file. There are several variable types you can use, which are all defined in the documentation. The definition must include the variable type, its name and a default value, like this:

<var type="text" name="CUSTOM_BUTTON_TEXT" default="Click Here" />

IF and IFNOT Sections

You can include and exclude code on the basis of the values of boolean variables with IF and IFNOT blocks, like this:

<%IF:PLAYER_CONTROLS_OVERLAY%>
   div#xplplayercontrols {
   put some CSS code here...
   }
<%/IF:PLAYER_CONTROLS_OVERLAY%>

See the default.xml file for full details and examples.