Blue Mango
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.
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.)
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.
Go to your website and get the page source. In most browsers you can get this from the View menu.
Copy the page source and paste it into a new text document in whatever text editor you use.
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.
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.
There are two ScreenSteps Live stylesheets that you will want to include in your template. This will automatically format the ScreenSteps content so it will look right inside of the browser. Add these two lines of code inside the <head> tags of your template:
<link rel="stylesheet" href="/stylesheets/screensteps_layout.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="/stylesheets/screensteps_colors.css" type="text/css" media="screen" title="no title" charset="utf-8">
Notice that the stylesheets have been split out into a layout sheet and colors sheet. These are both pointing to stylesheets on the ScreenSteps Live servers. If you want to change the colors of certain elements inside of the ScreenSteps Live content then you can either modify or override the contents of the screensteps_colors.css file.
You really shouldn't mess with the screensteps_layout.css file. As we add new features to ScreenSteps Live the positioning information will be updated in the screensteps_layout.css file. As long as you reference that file on the ScreenSteps Live site everything should work fine. If you use your own copy then you might see some unexpected layout bugs as new elements are added to the page.
If you have used the template designer for your space you can insert the custom colors for your template with the text:
{{ custom_colors }}
This should be inserted in the <head> tag of your template after your other css style sheets.
If you would like to include rss feeds in your custom template add the following inside of your <head> tags.
{{ rss }}
When you get to the location on your page where you would like to display your ScreenSteps Live content insert:
{{ content_for_layout }}
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.
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.
The next lesson will show you how to insert this text into a custom template on ScreenSteps Live.
| Prev: Adding Space Dividers | Next: How do I Create a Custom Template? |
Comments (0)
Add your comment