How to Customize the 2015 (Old) Site Template [Webinar]
The videos below are from a webinar that was recorded on June 1, 2016. Below each video are some additional instructions for implementing the customizations mentioned in the video.
What customizations are available?
You can take advantage of the built-in customizations, or you can go beyond the basics. If you go beyond the basic customizations, you will need to know HTML and CSS (or know somebody who is familiar with HTML and CSS).
Basic Customizations
Basic customizations are simple to implement with ScreenSteps. See below for specific instructions for making the customizations:
Check the box to show company name
Uncheck the box to hide company name
You can modify how your manuals appear in your knowledge base by changing the layout and by selecting icons to represent manuals.
Scroll down the side to select a Group Layout. This will affect how your manuals appear in your knoweldge base.
This is a List view
This is a Large icons view
You can also modify which icon appears for each manual
Click dropdown to modify the icon
Make sure to click Preview Changes after each update to view changes.
Click Upload new logo
Changes can be seen in preview
Modify the background color
Click on content you want to appear
Scroll down the left-hand side to view sidebar content. Note that you can identify content that will appear in the knowledge base or when an article is being viewed.
Selections appear in the preview
Add a message
Click on Edit
Add your message
You can also add HTML to include Call-to-Action buttons or videos (using embed code).
Message appears on the sidebar
Here are some CSS recipes you can add. If you know CSS, you can add your own recipes.
Click Advanced Layout
Select the CSS Template
Add CSS code
Click + Add link
Click and drag manuals and site dividers
Create a CNAME DNS
Ask your website administrator to create a CNAME DNS. This will be done with the service you use to host your marketing website domain. For example, if you are using Hover to manage your domain name, you would create a new CNAME DNS.
In the example below, readers will go to help.weburl.com. The target host will be your screensteps account: company_name.screenstepslive.com
Example of creating a CNAME DNS in Hover
Add Host Mapping to your ScreenSteps account
After you create the CNAME DNS, go to Settings in your ScreenSteps account.
Add the URL that your readers will navigate to. In the example below, readers will go to help.story-trainer.com.
Notice that help was used as the hostname when setting up the CNAME DNS.
Custom Templates
If you have a Small Business plan or above, you can use a custom template. A custom template is great for making a ScreenSteps knowledge base look more identical to your marketing website or your SaaS product's web design.
This is a good option if you want your customers to feel as though the knowledge base is just an extension of your marketing site.
If you would like to start with a base custom template, you can use the code found here:
https://gist.github.com/bluemango/6542741
Otherwise, follow the instructions below to use the HTML and CSS from your website.
1. Grab page code from your website
Go to your website and view the page source. In most browsers you can get this from the View menu.
2. Paste source into text document
Copy the page source and paste it into a new text document in whatever text editor you prefer.
3. Turn relative URLs into full URLs
This template will be served from the ScreenSteps 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.
4. Add page title
To have ScreenSteps dynamically insert a page title add the {{ page_title }} variable inside your <title> tags.
5. Add Javascript, 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 (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 will insert formatting for the ScreenSteps content.
3. {{ custom_css }} - This will include any custom css you have added to your site.
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 Site color editor.
All of these parameters should be added in the <head> section of your template.
6. Insert content
When you get to the location on your page where you would like to display your ScreenSteps content insert:
<p>{{ content_for_layout }}</p>7. Add navigational links
If you want to display the links that you have created for your site on ScreenSteps you can use the following code
<p>{% for link in space.links %}
<li><a href="{{ link.url }}">{{ link.display_name }}</a></li>
{% endfor %}</p>This will create a list item for each link in your site.
8. Override Basic Styles
You can override the styles of the ScreenSteps template to make the colors match your own site. Either add the custom css to your template file or insert custom CSS into your site.
After you have prepared your HTML and CSS for the custom template, you will need to add it to your ScreenSteps site.
1. Click on Site Template
2. Click on Advanced Layout
3. Add HTML
Select Header
3.1. Paste HTML
4. Add CSS
4.1. Select CSS
4.2. Paste CSS > Preview/Publish Changes
Getting help with custom templates
Preparing and applying a custom template to your site is definitely a job for somebody who knows HTML and CSS. For an experienced coder, the process takes less than an hour to do.
If somebody on your team knows HTML and CSS, adding a custom template will be an easy task. If you don't have somebody on your team who has the knowledge (or the time), we recommend that you contact a contractor who can help out.
Asking contractors for help
If you do not know how to work with HTML and CSS, you can use services like Upwork. This is a marketplace that matches work with contractors from around the world.
Share this article with a contractor, and have them prepare and apply the custom template.
0 Comments
Add your comment