Customizing Lesson Navigation Links In Manual Templates

This lesson will show you how to customize lesson navigation links when exporting manuals to HTML.

Before you begin this lesson you should familiarize yourself with the ScreenSteps HTML Template folder.

Copy a Topic Template

Make a copy of one of the Topic (manuals were formerly topics) HTML templates in the ./Templates/HTML/Topic folder.

Open Lesson Template File

In the copy of the topic template folder you just created and copied you will find a Lesson folder. Open the Default.html file in your favorite text editor.

LESSON LINK:PREVIOUS Section

Find the LESSON LINK:PREVIOUS section in the template file.

Modify Template Text

Change the text in this section to whatever suits your needs. Also change the text in the LESSON LINK:NEXT section.

In this example I've changed the link text from Previous Lesson to Previous Tutorial.

Export

Now you can export a manual and select your new template.

The Result

The navigation in your exported manual will display the new text you entered in the lesson template.

4 Comments

french-petzouille

Hi !

It seems to me that the header and the footer are not like another sections.
In the .css file, I wrote "font-size=12px;" on each line where I saw "font-size=x em;"

after saving the css file , after cleaning the cache... only the two sections above are inchanged !
(either in safari and firefox )

i don't understand !

Greg DeVore

@french-petzouille -
Can you email us some pictures of what you are seeing - a ScreenSteps lesson would be great. That way we will have a better idea of what is going on. You can send it to [email protected].

Jérôme

Hi, I tried to translate "Previous Page" in French (Page précédente) with MS Wordpade on Windows XP, unfortunately, accented characters are not displayed correctly.

How can I do that ?

Trevor DeVore

If you are modifying one of the templates that comes with ScreenSteps then the encoding used in the file is UTF-8. I don't know how Wordpad enters characters so the easiest thing to do might be to use the html entity é where é should appear.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.