Converting a Custom Template to the ScreenSteps Live 2011 Content Template
This document will show you how to migrate a your existing custom template to the new ScreenSteps Live 2011 content template. The new templating system has several advantages including:
- customizable sidebars
- improved styling and layout
- the ability to add custom javascript to your layout (ideal for integrating with chat or analytics services)
You can read all about the changes to the content template here.
Remove old stylesheet references
If you are referencing older stylesheets then you will want to get rid of them. Look for these stylesheet references to remove:
<link href="http://screenstepslive.com/stylesheets/screensteps_colors.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://screenstepslive.com/stylesheets/screensteps_layout.css" media="screen" rel="stylesheet" type="text/css">
Instead of those references just include this tag in the <head> section of your template:
{{ stylesheets }}
Additional tags for <head> section
You will also want to include the following tags:
{{ javascripts }}
{{ custom_css }}
{{ rss }}
Everything else should be the same.
Updating your custom CSS
The selectors for the ScreenSteps Live content template have changed. If you have added custom CSS then you will need to update the CSS selectors you are using in your stylesheet. You can find the new selectors you need to target by using tools such as Firebug or the Safari developer tools. If you have questions about how to target a specific element on the page, please let us know.
Add your comment