Configuring HTML and Blog Templates

This lesson will show you how to do some basic customization to HTML templates in ScreenSteps 2.

To learn more about HTML templates and how to customize them take a look at the "Customizing HTML Templates in ScreenSteps" manual.

Open Preferences

Select HTML Templates

Screen Overview

There are four types of templates:

  1. Lesson Templates: These apply when exporting lessons.
  2. Manual Templates (Pro only): These apply when exporting manuals.
  3. Blog Templates: These are used when posting to your own blog.
  4. Clipboard Templates: These are used when you export HTML to the system clipboard.

Select the tab for the type of template you wish to edit.

Template Configuration

Template configuration controls appear to the right of each template type.  The controls will apply to the selected template.

Font Family

Not all systems have the same fonts installed when viewing web pages.  For this reason you don't select a font, but instead a font family.  Basically, one of the fonts in the family should be installed on any system that will view your page.  

Select the font family you would like to use for your template.

Image Format

You can also adjust the image type to use as well as JPEG Quality.

Image Position

You can select whether to have the image appear above instructional text or to the right.

If you want your images to appear below the step text then you will need to manually modify the HTML template as described in our manual on customizing HTML templates.

Quick Tip: If you use large images in your lessons we suggest choosing the Above option.

Adjust Max Image Width

Here you can set the maximum images width that will be allowed when exporting to this template (in pixels). Any images that are wider than this value will be scaled down.

Quick Tip: Use this setting to makes images fit inside of your blog or wiki template for your site. We suggest setting the value at about 10 pixels less than the width of your content area.

Viewing the Templates Folder

If you would like to view/edit the actual template files right-click on a template and select Reveal Template Folder (1) or click on the Reveal Template Folder icon (2).

That's It

To see if you like your new settings, export a lesson.  If you want to make further adjustments to the HTML template you will have to actually edit the HTML template document.


Add your comment

E-Mail me when someone replies to this comment