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 » Customizing Lesson Navigation Links In Manual Templates

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

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

  • FAQs

Comments

4 comments for this lesson

  • Prev: How to center images in an HTML template
  • Next: Creating an XML Template

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

Media_1290026021878

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

Open Lesson Template File

Media_1290026069741

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

Media_1206040065207

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

Modify Template Text

Media_1206040095248

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

Media_1290026205514

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

The Result

Media_1206040348004

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

  • Prev: How to center images in an HTML template
  • Next: Creating an XML Template

Comments (4)

french-petzouille Sunday Oct 05 at 06:37 PM

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 Tuesday Oct 07 at 03:07 PM

@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 support@screensteps.com.

Jérôme Thursday Mar 08 at 05:10 AM

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 Thursday Mar 08 at 05:38 AM

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

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