The ScreenSteps Online Knowledge Base Everything you need to know about ScreenSteps
Blue mango logo white 250
  • Table of Contents
  • Contact Us
ScreenSteps Documentation » Customizing HTML Templates » How Do I Add My Company Logo to a 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

Quicklinks

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

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

Dec 20, 2010

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

0 comments for this lesson

  • Prev: Changing the Text Encoding of Output
  • Next: How Can I Get a Step Image To Appear Below the Step Instructions?

How Do I Add My Company Logo to a Template?

This lesson will show you the basics of how to add an image, such as your company logo, to the table of contents and lesson pages of a manual HTML template.

If you are not familiar with locating HTML templates in ScreenSteps please see this lesson. If you are modifying one of the default ScreenSteps templates we recommend making a copy of the template and modifying that.

Where to store your company logo

Media_1292861605348

When deciding how to reference the image you want to add to the template you have two options.

The first option is to place a copy of your company logo in the template folder. Doing this will include the image every time you export the manual.

The second option is to point the template to an image that resides on your web server. Doing this means your image will always be up to date if it changes on the server. You may want to consider this approach if you are adding a company logo.

If you want to include your image In the manual template folder then you should place it in the ./TOC/images folder. In this example a company logo has been added to the default template.

Edit Table of Contents File

Media_1292860688522

Next you need to edit the ./TOC/index.html. This file is used when generating the table of contents for the manual.

Open this file in a text editor.

Add <img> Tag

Media_1292861091929

In order for your image to be displayed you need to add an <img> tag. A good place to add the tag is in the CONTENT section (1) right below the "wrapper" <div> (2).

Media_1292861114981

Here is the updated index.html template looks like with the image added to it. Notice that the template is referencing the image in the ./images folder.

Note that if you are referencing a file on your web server then you would need to adjust the "src" property accordingly.

Add the logo to the Lesson pages

Media_1292860688522_1

Now we will look at adding the image to the lessons template. Open ./Lesson/Default.html in a text editor.

Add <img> tag

Media_1292861150358

Add the <img> tag to the lesson template. As with the manual template, a good place to add the tag is in the CONTENT section (1) right below the "wrapper" <div> (2).

Media_1292861163472

Here is the updated Default.html template looks like with the image added to it. Notice that the template is referencing the image in the .,/images folder. Lesson files are stored in a different folder than the table of contents file.

The Result

Media_1292861184386

Here is an example of the table of contents page with a logo added to it.

Media_1292861199903

Here is an example of a lesson page with the logo added.

  • Prev: Changing the Text Encoding of Output
  • Next: How Can I Get a Step Image To Appear Below the Step Instructions?

Comments (0)

Add your comment

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