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

Where to store your company logo

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

Edit Table of Contents File

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

Add &lt;img&gt; Tag

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).

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

Add the logo to the Lesson pages

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

Add <img> tag

Add &lt;img&gt; tag

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).

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

The Result

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

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

0 Comments

Add your comment

E-Mail me when someone replies to this comment