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.
1. Custom links for this ScreenSteps Live space
2. ScreenSteps Live content (manuals, lessons, etc.)
The Goal
Here is a ScreenSteps Live site with a custom template. We still have our links (1) and our ScreenSteps Live content. But the template has been completely customized.
Follow the steps below to prepare the html for your own custom template.
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.
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. {{ stylesheets }} - This is will insert formatting for the ScreenSteps content.
2. {{ custom_colors }} - This will add in any custom color settings you have made with the Space color editor.
3. {{ javascripts }} - If you want your template to still take advantage of the AJAX features on ScreenSteps Live (mainly for submitting comments) then you will want to add {{ javascripts }} inside the <head> tag of your template.
4. {{ rss }} - This will add the rss auto-discovery tags to your template.
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. This image shows some quick examples.
1. This style is making the main body of the template wide enough to hold the ScreenSteps Live content. ScreenSteps Live content is 910px wide. "#mainWrapper" is just an example tag. The containing div on your template may be named something different. By making the enclosing wrapper 930px wide we have enough space for a 10px margin on each side. This may or may not be required depending on your template.
2. Here we are just setting the margin on the ScreenSteps Live content.
3. Here we are setting the color of the ScreenSteps Live headers (a navy blue by default). You can set this to any color you would like match your site.
This is just a basic example. You can change additional color settings as well.
Create Your Custom Template
The next lesson will show you how to insert this text into a custom template on ScreenSteps Live.
| Prev: How to hide the "Log out" link on the sidebar | Next: How do I Create a Custom Template? |
Comments (0)
Add your comment