ScreenSteps

7.5 How to Customize the 2015 (Old) Site Template [Webinar]

Updated on

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:

Navigate to the Template Editor
Show/remove company name

Check the box to show company name

Uncheck the box to hide company name

Modify the manual layout

You can modify how your manuals appear in your knowledge base by changing the layout and by selecting icons to represent manuals.

Change layout

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
Change icons
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.

Change background

Modify the background color

Add sidebar content

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
Add CSS

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

Rearrange manuals and dividers

Click and drag manuals and site dividers

Change the URL (Host Mapping)

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.

Prepare a custom template

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>
Click to copy

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 %}
    &lt;li&gt;&lt;a href="{{ link.url }}"&gt;{{ link.display_name }}&lt;/a&gt;&lt;/li&gt;
{% endfor %}</p>
Click to copy

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.

Apply a custom template

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article 7.4 Organizing Your SOPs and Policy docs
Next Article 7.6 Decrease Support Tickets
Still Need Help? Contact Us