tag line
powered by screenstepslive
< Previous Lesson Table of Contents Next Lesson >

Creating a Template

Template Folders

A template is made up of all files that reside in a template folder. A template contains at least one template configuration file and may contain any number of supporting files.

To reveal the folder where templates are stored, chose File->Custom Templates->Reveal Template Folder.

In the template pictured, Default.html is the template configuration file and styles.css is a supporting file.

Creating Your Own Template

To create a new template choose File->Custom Templates->Duplicate Template and duplicate the "Default" template. You can then modify Default.html in the newly created template as needed.

Template Configuration File

The template configuration file is used to tell ScreenSteps how to process the template. It consists of four sections - Configuration, Content, Step and Media:Image.

Each section starts with "[-- START SECTION_NAME --]" and ends with "[-- END SECTION_NAME --]". The start and end entries appear on their own line.

Configuration Section

This section provides processing instructions as well as template output information.

Parameters
web safe - true/false
If true then all file names will be made web safe.

text style - html, xml, plain
"html" will output instructions using html tags for formatting (<strong>, <i>, <p>). "xml" will encode any xml entities. "plain" just outputs plain text. The default is "html".

newline - unix, windows, mac
Specifies what to use for newlines. "unix" uses ASCII 10, "windows" uses ASCII 13 + 10 and "mac" uses ASCII 13. The default is "unix".

output name - string
Path where the template will be output to. This path is relative to the folder you select when exporting.

media folder - string
Path where the template media will be output to. This path is relative to the folder you select when exporting.

Variables
You can use the following variables in your parameters.

@PROJECT_NAME - The name of the project the user provides when exporting the session.

Media:Image Section

The media:image section is the text that will be used for each image in your document. In our HTML example each image will be wrapped in a IMG tag.

Variables
You can use the following variables in this section:

%source% - the relative path of the image.
%width% - the width of the image. To specify a maximum width for the exported image you can append "|MAX_SIZE" e.g. %width|600%".
%height% - the height of the image. To specify a maximum height for the exported image you can append "|MAX_SIZE" e.g. %height|480%".

Step Section

The step section contains text that will be replicated for each step in the exported document.

Variables
You can use the following variables in this section:

%Title% - the step title.
%Instructions% - the step instructions.
Step_Section.jpg - the contents of the Media:Image section.
%StepNumber% - the step number.

The navigation section can be used for creating a list of all step titles in the lesson.

Variables
You can use the following variables in this section:

%Title% - the step title.
%StepNumber% - the step number.

Content Section

The content section contains the main body of the template.

Variables
You can use the following variables in this section:

%PageTitle% - the title of the lesson with formatting removed.
%LessonTitle% - the title of the lesson.
%LessonSteps% - the contents of the Steps section.

Sharing Templates

You can easily share templates by exporting a template package. Choose File->Custom Templates->Export Template... to export a template package. You can then send this file to others who can install the template for use when exporting HTML.