ScreenStepsFAQs General FAQsUpgrading your ScreenSteps Site Template from the 2011 Template to the 2015 Template

Upgrading your ScreenSteps Site Template from the 2011 Template to the 2015 Template

In order to use new features in ScreenSteps that were released in 2016, you will need to upgrade the content template used for your ScreenSteps site from the 2011 template to the 2015 template. This article will explain why you should make this change and how to do it.

Why you should upgrade your template

The 2015 site content template offers many more customization options over the 2011 template. Below are two screenshots comparing a typical site with the 2011 and 2015 content templates.

Benefits of the 2015 template

The 2015 content template has many advantages including:

  • Ability to display content in the new ScreenSteps web and desktop editor (coming in 2016)
  • Ability to set large or small icons for manuals in your table of contents
  • Easier customization of site colors and logo
  • Easier custom template modifications of site header and footer (on plans that allow custom templates)
  • Optimized responsive layout for display on mobile devices

Benefits of the new article editor coming in 2016

The new article editor will offer many enhancements including:

  • Table support
  • Styling of text blocks for tips, warnings, alerts and info
  • Multiple images per step
  • Multiple text blocks per step
  • Expandable and collapsable sections

You are going to love the new editor, but you can only use it if you upgrade your site content template to the 2015 template.

If a site is connected to a target service (e.g. Zendesk), you will not need to update the template.

How to prepare the 2015 template (if you aren't using a custom template)

Select your site from the dropdown

Select Site Template

Preview and publish the site design

You will be able to preview the site design, adjust color settings, etc. As you make changes, select Preview Changes to see the changes.

Publish Changes

Once you are done you can select Publish Changes to activate your changes.

How to prepare the 2015 template (if you are using a custom template)

With the 2011 content template your entire custom template was stored in one file.

With the 2015 content template your customizations are broken up in the separate sections to make editing the content much easier:

  • Head (for including external stylesheets and javascript files)
  • Header
  • Footer
  • CSS
  • Javascript

Migrate your custom template

1. Get your custom template from the old interface

1.1. Go to Account Management > Custom Templates > Edit

1.2. Copy the template content

2. Go to the 2015 template editor

Go to your site in the admin interface

Select Edit Site Design

Go to the advanced editor

3. Split up your template

You will want to split up your content into the different sections.

Look at this code example to see instructions on how to split up your template:

 -- this is your head content. Copy it into the 'Head' section
 -- remove anything in {{}}, e.g. {{javascripts}}
 -- If you have inline CSS definitions move them to the 'CSS' section
 -- If you have inilne Javascript move it to the 'Javascript' section
 -- You do not need to include script tags
 -- References to external css or js files should stay in the 'Head' section
  some html
 -- copy this to the 'Header' section
 {{content_for_layout}} - you can ignore this
 some more html
 -- copy this html to the 'Footer' section
4. Preview and publish

First preview your changes.

Then publish them.

Switch your site content template to ScreenSteps 2015

Once you have configured the Site Settings to your liking you need to tell ScreenSteps to use the new ScreenStep 2015 template. Navigate to the Settings (1) for the site and change the Content template to ScreenSteps 2015 (2).


Add your comment

E-Mail me when someone replies to this comment