The ScreenSteps Online Knowledge Base Everything you need to know about ScreenSteps
Blue mango logo white 250
  • Table of Contents
  • Contact Us
ScreenSteps Documentation » ScreenSteps 2.9 » Configuring HTML and Blog Templates

Topics

  • Getting Started 9
    • New Features in ScreenSteps 2.9
    • Learn About The Blue Mango Learning Systems Customer Support Methodology
    • Creating a Lesson
    • Key ScreenSteps Concepts
    • Display Overview
    • How ScreenSteps Deals With Large Images
    • Registering ScreenSteps With a Serial Number
    • Registering ScreenSteps With a ScreenSteps Live Account
    • Upgrading from ScreenSteps 1 to ScreenSteps 2 Pro or Standard
  • Capturing Images 11
    • Capturing Images Using the Global Key Command
    • Using the Capture Tool
    • Using the Capture Tool Delay
    • Using the Capture Palette
    • How to Update Images in a Lesson
    • Using the Clipboard Recorder
    • Importing Images Into a Step
    • How to Capture a Menu
    • Using SnagIt with ScreenSteps
    • Dragging and Dropping Images Onto Lessons
    • Embedding Video in a Step
  • Editing Steps 14
    • Formatting Text
    • Insert a Link to a Web Page Into Your Lesson
    • Insert a Link to Another Lesson in the Same Manual
    • Removing a link from your text
    • Annotating Images
    • Using the Blur Tool
    • Cropping Images
    • Image Tools
    • How do I Change the Layering of Annotations?
    • How do I Check Spelling?
    • How do I Search for Text in a Lesson?
    • What is Lesson Status?
    • Setting the Draft Status of a Lesson
    • Reordering Steps in a Lesson
  • Exporting and Templates 12
    • Exporting Lessons
    • Getting Started With a ScreenSteps Live Account
    • Configure ScreenSteps to Upload Lessons to Your Blog
    • Uploading a Lesson to a Blog/Wiki
    • Configuring a Clarify-it.com account
    • Assigning a File Name to use for a Lesson or Manual
    • Selecting Word, PDF and HTML Templates for Lessons
    • Changing/Setting the Default Template
    • Overriding the Default Template for a Lesson
    • How Can I See Which Web Servers I've Uploaded a Lesson To?
    • Breaking a Link Between a Lesson and a Web Server
    • How to insert a ScreenSteps Lesson into a forum post or other web application
  • Exporting to the System Clipboard 6
    • Exporting a Lesson to the Clipboard as HTML
    • Exporting a Lesson to the Clipboard as PDF
    • How do I Specify Which Template Is Used When Exporting To Clipboard?
    • How do I paste the path to the PDF file into a file selection dialog on OS X?
    • How do I paste the path to the PDF file into a file selection dialog on Windows?
    • Why don't images show up in emails I send that I pasted a lesson into?
  • Searching/Filtering Lessons 1
    • Searching in Tag Mode
  • Tags 5
    • How Do I Tag a Lesson?
    • How Do I Tag Multiple Lessons Quickly (Using the Tag Palette)?
    • How do I delete tags from a lesson?
    • How do I delete all instances of a tag from my library?
    • Tagging Tip - Dragging Lessons Onto Tags in Tag Mode
  • Manuals 6
    • How to Create a Manual and Stub Out Lessons
    • Adding Existing Lessons To Manuals Using the Lesson Palette
    • What are Draft Chapters?
    • How do I reorder Chapters?
    • Exporting a Manual to Word, PDF or HTML (Pro only)
    • Choosing a Template for a Manual (Pro only)
  • The Library Folder 6
    • Introduction To The ScreenSteps Library
    • Creating New Libraries
    • Opening Libraries
    • Renaming a Library
    • How to Move a Library From One Computer to Another
    • Importing a Library
  • Customizing Output 5
    • Configuring HTML and Blog Templates
    • Customizing PDF Output
    • The ScreenSteps Templates Folder
    • Customizing HTML Templates
    • Updating Your Templates
  • Additional Topics 13
    • Editing Images in an External Editor
    • How to copy an image to the clipboard
    • Importing a Plain Text File Into a Lesson
    • Syncing Image Filenames to Step Titles
    • Using Split Step
    • How to Split a Lesson in Two (Create Two Smaller Lessons Out of One Large Lesson)
    • Duplicating Lessons and Manuals
    • Uploading HTML Lessons to Your Mobile Me or .Mac Site
    • Sharing ScreenSteps Lessons with Other Users of ScreenSteps
    • How do I Resize an Image Without Resizing Annotations?
    • How do I Copy Steps Between Lessons?
    • Where Is The ScreenSteps Preference File Stored?
    • How to have ScreenSteps automatically check for updates

Quicklinks

  • Downloads
  • View forums
  • Submit a help request
  • Contact us
  • Retrieve a lost license key

Last Updated

May 09, 2011

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
  • Zendesk and ScreenSteps Live
  • Help Scout and ScreenSteps Live
  • FAQs

  • FAQs

Comments

2 comments for this lesson

  • Prev: Importing a Library
  • Next: Customizing PDF Output

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

Media_1290014196669_display

Select HTML Templates

Media_1290014894761_display

Screen Overview

Media_1290015279291_display

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

Media_1290015304288_display

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

Font Family

Font_family_display

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

Image_format_display

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

Image Position

Image_position_display

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

Adjust_max_image_width_display

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

Viewing_the_templates_folder_display

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.

  • Prev: Importing a Library
  • Next: Customizing PDF Output

Comments (2)

Marcus Friday Apr 27 at 02:12 AM

I am exporting lessons to Zendesk using the Zendesk template. This works very well. However, is it possible to configure the template so that it would include a PDF attachment of the lesson?

Also the export by default includes the images used in the lesson as "attachments" at the bottom of the post (with quick view text). Is it possible to stop this happening?

Trevor DeVore Friday Apr 27 at 05:05 AM

@Marcus ScreenSteps does not provide a way to generate and upload a PDF file when uploading to blogs/wikis.

We don't have a way of not showing the images as attachments at the bottom of the page. The Zendesk API does not provide a way to do this.

Add your comment

E-Mail me when someone replies to this comment
Blue Mango Learning Systems © 2012