Questions? Contact Us
  Blue Mango Learning Systems
  • Home
  • Forums
  • Documentation
  • Submit a request
  • Check your existing requests
ScreenSteps Documentation » Customizing HTML Templates » What is an HTML Template?

Topics

  • Overview 4
    • What is an HTML Template?
    • The ScreenSteps Templates Folder
    • The Anatomy of the Template File
    • Installing/Sharing Templates
  • Customizing Templates 13
    • Setting the Maximum Height/Width for Step Images
    • Changing the Text Encoding of Output
    • How Do I Add My Company Logo to a Template?
    • How Can I Get a Step Image To Appear Below the Step Instructions?
    • How Do I Add An Image Border When Exporting To Blog?
    • Customizing Step Title formatting in Blog Templates
    • How to Add Whatever Font You Want to Your HTML Template
    • How Do I Make The Image Appear To the Left of the Text in an HTML Template?
    • Using Image Zoom in Templates
    • How to center images in an HTML template
    • Customizing Lesson Navigation Links In Manual Templates
    • Creating an XML Template
    • Removing The Lesson Description From the Table of Contents

This manuals will show you how to perform some advanced customizations to HTML and XML templates in ScreenSteps. The main ScreenSteps manual is available here.

Last Updated

Nov 18, 2010

Download Lesson PDF

Download Manual PDF

Other Resources

  • ScreenSteps Desktop & Workgroup

  • ScreenSteps 2.9
  • ScreenSteps Workgroup
  • Customizing HTML Templates
  • ScreenSteps: Tips & Tricks
  • Creating Word Templates
  • Publishing to Blogs & Wikis
  • ScreenSteps Live

  • ScreenSteps Live
  • Setting up a New Admin, Editor or Author on ScreenSteps Live
  • ScreenSteps Live Support Client
  • Integrating ScreenSteps Live With Other Services
  • Collaborating on ScreenSteps Live
  • ScreenSteps Live Remote Authentication
  • ScreenSteps Live API
  • API Examples
  • Implementation Guides

  • Creating a Software Manual With ScreenSteps
  • Creating a ScreenSteps Live Support Site
  • Improving your Zendesk Support Site with ScreenSteps Live

Comments

0 comments for this lesson

  • Next: The ScreenSteps Templates Folder

What is an HTML Template?

An HTML template is a folder that contains a template file that ScreenSteps will parse and use to format lesson and manual output when using the Export to HTML feature. In addition the folder can contain any number of supporting files or folders.

Although we use the name HTML templates you are by no means limited to HTML output. Templates can be customized to export any text-based output. This means you can create your XML templates and import lessons created in ScreenSteps into content management systems.

An Example

Media_1290022291110

This is an example of the Red lesson template that is include with ScreenSteps. It consists of one file and 3 folders. index.html is the template file used to generate the lesson when exporting from ScreenSteps.

The Template File

The_template_file

If you open index.html in a text editor you will see that it is just a text file that contains instructions for ScreenSteps. At the top of a template file you configure template properties (1). Later on in the template file you specify how to format the output (2).

Example Output

Media_1290022493001

This is an example of what the output from the Red lesson template would look like. Notice that index.html has been replaced by the lesson title (1). The three folder were copied over and placed in the output folder (2). Because the media folder template property was set to 'images/@LESSON_NAME', the lesson images were placed in the images folder.

  • Next: The ScreenSteps Templates Folder

Comments (0)

Add your comment

E-Mail me when someone replies to this comment

Documentation powered by ScreenSteps Live