Preparing a Custom Template
This lesson will show you how to prepare a custom template for use on ScreenSteps Live. This will allow you to make your ScreenSteps Live lessons look like they are coming from your own website.
If you would like to see a video overview of the process click here. But be sure to check this lesson for the detailed instructions as some of the tags you can include in your template have changed.
If you would like to see an example custom template you can download the file below.
Default ScreenSteps Live Template
This is an example of a ScreenSteps Live account with the default template. What we want to do is take our ScreenSteps content and wrap it in a custom template.
The Goal
Here is a ScreenSteps Live site with a custom template. We have taken our ScreenSteps Live content and wrapped it in a unique look. Using this technique you can make your ScreenSteps Live site look exactly like your other web sites.
Follow the directions below to see how.
Grab Page Source From Your Website
Go to your website and get the page source. In most browsers you can get this from the View menu.
Paste Source Into Text Document
Copy the page source and paste it into a new text document in whatever text editor you use.
Turn Relative URLs to Full URLs
This template will be served from the ScreenSteps Live server so you will need to change any relative urls in your web page to full urls. You can see in this example I have added http://www.screensteps.com onto the front of the stylesheet for this page. You should replace www.screensteps.com with the full path to the stylesheets on your server.
Add Page Title
To have ScreenSteps dynamically insert a page title add the {{ page_title }} variable inside your <title> tags.
Add Javascripts, RSS and Stylesheets
Here are some other variables you can add. They are all optional:
1. {{ javascripts }} - If you want your template to still take advantage of the AJAX features on ScreenSteps Live (mainly for submitting comments and lightboxing large images) then you will want to add {{ javascripts }} inside the <head> tag of your template.
2. {{ stylesheets }} - This is will insert formatting for the ScreenSteps content.
3. {{ custom_css }} - This will include any custom css you have added to your space.
4. {{ rss }} - This will add the rss auto-discovery tags to your template.
5. {{ custom_colors }} - This will add in any custom color settings you have made with the Space color editor.
All of these parameters should be added in the <head> section of your template.
Insert Content
When you get to the location on your page where you would like to display your ScreenSteps Live content insert:
{{ content_for_layout }}
Add Navigation Links
If you want to display the links that you have created for your space on ScreenSteps Live you can use the following code
{% for link in space.links %}
<li><a href="{{ link.url }}">{{ link.display_name }}</a></li>
{% endfor %}
This will create a list item for each link in your space.
Override Basic Styles
You can override the styles of the ScreenSteps Live template to make the colors match your own site. Either add the custom css to your template file or insert custom css into your space.
Create Your Custom Template
The next lesson will show you how to insert this text into a custom template on ScreenSteps Live.
Add your comment