Navigation:  More Advanced Procedures > Templates in Help & Manual >

Skins

Print this Topic Previous pageReturn to chapter overviewNext page
Show/Hide Hidden Text

You may already be familiar with the concept of "skins" from other programs: You select a skin file and the appearance and layout of the entire program is transformed in seconds. Help & Manual enables you to do this with your HTML-based output. You can save your entire design in a .hmskin file and then select this file when you publish to apply the layout to the current project without changing any of the project's own settings.

Please note that you can only save projects as skins if you have the Professional version of Help & Manual. Standard version users can edit existing skins (for example skins from the Help & Manual Plus Packs) but they cannot create new skins from their own projects.

 

      Productivity Tip

Skins can only be used for HTML-based output formats. You can style your PDF files and printed manuals with print manual templates, which work in the same way as skins.

How to use skins - try it now!
1.Open a project of your own, select Publish in the Project tab, then select Webhelp or HTML Help as the output format.
2.In the Publish dialog click on the Browse button in the Compile with skin: field and select one of the standard .hmskin files in the Skins folder in the Help & Manual program directory.

When you publish your output it will have the "look and feel" applied by the skin. You didn't have to do any design work at all!

How to create a skin file

Skin files contain everything you need to style your HTML-based output: Text and table styles, user-defined variables, your Baggage files (template graphics and logos), HTML page templates and all the settings and templates for Webhelp. You can turn any project into a skin file just by saving it as a skin and you can edit skin files in Help & Manual, just like normal projects.

1.Open a project with a design that you want to use for other projects.
2.Select Save As... in the Application Menu and choose the Skin XML File option.
3.Choose a place to save the skin, enter a name and save.
4.You will be asked which configuration components of your project you want to include in your skin. You should normally include all the listed components.

That's all there is to it. You can now compile other projects to HTML-based output formats with your new skin.

How to edit skin files

Skin files are actually normal single-file projects with some special limitations. You can open them and edit them like normal projects but you can only edit those components that are included in the skin, everything else is unavailable.

1.Select Open in the Application Menu and then select Help & Manual skin files (.hmskin) as the type of file to be opened. (If you don't select this you won't be able to see the skin files!)
2.Select an .hmskin file to load and edit. You can find some sample skins in the Skins folder in the Help & Manual program directory.
3.Now you can edit the settings of your skin. This is exactly the same as editing the corresponding sections of normal projects to configure your output.

Skins have no topics, you can only edit the relevant sections in the Configuration and Baggage Files sections in the Project Explorer and the text and table styles in Write > Styles.

About text and table styles in skin files

Your skin files can include text and table styles. However, for styles to work in skins the text in the project must use the same style names otherwise Help & Manual cannot know where to apply the styles.

Basic procedure:

This is just one suggestion to illustrate how skins work, there are many different ways you could do this you just have to ensure that the style names in all the project files are identical.

1.Make one or more skin files from a project containing the styles you want to use.
2.Open the skin files and edit the styles for the alternative designs that you want to apply with the skins.
3.When you create a new project use the original project from step 1 as a project template then you will start with all the styles you need and you can use your skins files to redefine the styles when you publish.
Using include conditions to configure features in skins

For advanced users:

You can use include options to turn features in skins on and off. This makes it possible for the user to choose features in the skin when they publish their projects because include options stored in skins are loaded into the Include Options: box in the Publish dialog when the skin is selected.

 

       Key Information

Include options in skins must be defined in the skin! Include options defined in normal H&M projects will not be saved in the skin when you save the project as a skin. You must edit the skin file and add the include options you want to use.

For example, suppose you want to give the user the option of having a subtitle underneath the title in the table of contents in your Webhelp output. It would work like this:

1.Define an include option in the skin, let's say it's called OPT_SUBTITLE, and let's also say that we've entered TOC header subtitle as the include option description.
2.Add code using the include option to the HTML template for the Webhelp table of contents, for example (you would also have to define the <%SUBTITLE%> variable in this example, of course):

  <p class="navtitle">Help & Manual 5 - User Help</p>

  <IF_OPT_SUBTITLE><p class="nav-subtitle"><%SUBTITLE%></p></IF_OPT_SUBTITLE>

3.When the user loads the skin in the Publish dialog the option [ ] TOC header subtitle will automatically be loaded from the skin file and displayed in the Include Options: box. The header will only be displayed if the user selects this option.

You can take this concept as far as you like: For example, you can use the same include option to change the CSS definitions in the same HTML template so that the formatting will be different depending on whether the subtitle is included or not.

Including a preview image in a skin

When the user selects a skin in the Publish dialog Help & Manual automatically looks for a PNG graphic file called $HMSKINPREVIEW.PNG in the skin's Baggage files. If this file is found a thumbnail version of the preview image is displayed in the Publish dialog. The user can then click on this image to display a full-size preview.

1.Create your preview image – this will generally be a screenshot of a help file using your skin – and save it in the PNG format as $HMSKINPREVIEW.PNG.
2.Add the PNG preview file to the Baggage Files section of your skin.
3.Select the PNG file in the Baggage Files section, right-click on it, select Include in Builds and deactivate all build options for the file. This will prevent the file from being exported to your published output, where it is not needed.
Using skins to redefine variables and other settings

You don't have to save all your settings in your skin files. For example, it's possible to create a skin that only defines the user variables in your project you just need to deselect everything except Variables when you save the skin file. Then you can redefine your variables in your entire project by selecting the skin file when you publish your project.

You can do the same with your Baggage files, text and table styles, HTML Page Templates or any combination.

Applying multiple skins in command lines and batch files

When you publish manually you can only select one skin for the project you are publishing. However, when you use Help & Manual's command line options you can specify as many skins as you like one after another.

When you do this the settings in the last skin you specify always have priority for duplicate settings for example, if you redefine the same variables in two skins the settings in the second skin are those that will be applied.

See Command Line Options and Skins & redefining variables for more information on this.

See also:

The Publish Dialog

Command Line Options

 


Page url: http://www.helpandmanual.com/help/index.html?hm_advanced_templates_skins.htm