Editing Custom Templates

First you need to get the html that you want to use for your custom template. The easiest way to do this is to go to your own site.

Depending on your browser the menu command for this will be slightly different. But what you want to do is view the source code for your webpage.

Select all of the source code for your page and copy it.

Open an empty text file in your favorite text editor. You don't have to do this step but we find it much easier to modify the text in a text editor before pasting it into the form on ScreenSteps Live.

Paste your source text from your web page into the empty text file.

Most likely you will have a lot of relative urls (1) in your page. You need to change these to full urls (2). You need to do this for css files, javascript files, links and images.

You then want to delete out the content area of your page and insert the ScreenSteps Live content. ScreenSteps Live uses a templating language called Liquid. To insert your ScreenSteps Live content just enter:

{{ content_for_layout }}

That is where ScreenSteps Live will insert your manuals and lessons on your page.

The {{ content_for_layout }} variable is going to return html for your manuals and lessons on ScreenSteps Live. You are free to use your own styling, but, if you would like some styles that are already setup, you can use the screensteps_live_content.css file we have prepared. You can either link to it on our site or create your own version, modify it and upload it to your own server.

You can get the file here:
http://www.screensteps.com/styles/screensteps_live_content.css

Make sure that you are on the Edit Custom Templates screen in ScreenSteps Live. It should look something like this (you can find custom templates under the Admin tab).

On the right, select the template you would like to edit. Each template represents a page on ScreenSteps Live. You are free to use the same template for each page. But if you would like to customize the look of a page you can have a separate template for each page.

Copy the text from your text file into the edit box and click Update.

Once you have updated the text for a template a check mark and preview link will appear next to it. (Note: preview links only appear if you have manuals with lessons in them on your site).

Either preview the page or select another template to edit.

Here is an example of a preview of our template. The ScreenSteps Live content is highlighted in red.

Edit additional templates in the same way. If you leave a template blank then the standard ScreenSteps Live page will be displayed to the user.

In the screen above you can see that I have added a template for every page except the login screen.

Once you are finished, select Back to Custom Templates List.

If you would like to make your template active just check Active. Once the template is active, any user on your site who is not an admin or author will see your custom template.