ScreenSteps

CSS and Javascript Customizations for the 2015 (Old) Template

Updated on

These customizations apply to the ScreenSteps 2015 template. If you are using the 2011 template then the CSS selectors may not apply to your site design. The 2019 template does not support CSS and JavaScript customizations.

View this article to see where to add CSS and Javascript to your site template:

Adding custom CSS and Javascript to your template

CSS Customizations

Hide the site title
.screensteps-site-title-wrapper { display: none; }
Click to copy
Hide the site title
Change the font size

p {

 font-size: 12pt;

}

Remove the header
.screensteps-header { display: none; }
Click to copy
Adjust the body or article font colors
/* Change default colors for all pages */
body { color: #333333; }

/* Only change font color in the article body */
.screensteps-article { color: #333333; }
Click to copy
Adjust the chapter title font colors
.screensteps-main-content h2.chapter-title a {
  color: green ;
}
Click to copy
Make top levels foldable step titles the same size as other top level headings
.step-depth-1 > a {
 font-size: 1.5em;
}
Click to copy
Remove underlines for links in an article
.screensteps-article a { text-decoration: none; }
Click to copy
Change the color of the search box prompt

Standard Template

.screensteps-training-site .screensteps-main-search .search-field { color: #333; }
Click to copy

Legacy Template

.screensteps-main-search .input-prompt { color: #333; }
Click to copy
Adjust padding on the header
.screensteps-training-site .screensteps-header,
.screensteps-header { padding: 1em 1.5em; }
Click to copy
Adjust padding on the header
Hide the breadcrumb navigation
#screensteps-breadcrumb { display: none; }
Hide the article counts that appear next to chapters in the sidebar
.chapter-count { display: none; }
Click to copy
Hide the next/previous navigation
.screensteps-next-prev-navigation { display: none; }
Click to copy
Replace the icon for a manual (Advanced)

The icons that are used for manuals in ScreenSteps come from Font Awesome. Each manual is given a CSS class that corresponds to an icon. For example, the default class is .fa-book.

If you want to use a custom icon you can upload the icon to your own file server and then add the following CSS.

.fa-book::before{
  content: url('insert url to your image');
}
Click to copy

Replace .fa-book with whatever icon you have assigned to that particular manual. You can find the icon class by inspecting the HTML for the manual table of contents.

Change the color of links in the body of an article
.screensteps-article a {
 color: #477dca;
}

.screensteps-article a:visited {
 color: #3061a7;
}
Click to copy
Adjust spacing below the header
.screensteps-training-site .screensteps-container-wrapper, 
.screensteps-container-wrapper { padding-top: 10px; }
Click to copy
Adjust spacing in below the header
Change the border around the next/previous navigation
.screensteps-next-prev-navigation { border-top-color: #333; }
Remove the "Print Article" button
.print-article { display: none !important; } 
Click to copy
Remove Image background and border
.screensteps-steps .image {
 background-color: transparent;
 border: none;
}
Click to copy
Left align images and remove background
.screensteps-steps .image {
  text-align: left;
  background: inherit;
  border: none;
  padding: 0px;
}

img[data-sizes="auto"] {
  margin: inherit;
}
Click to copy
Center images
/* Center images */
#screensteps-document div.image { width: 100%; }
#screensteps-document div.image img { margin: 0 auto; }
Click to copy
Left align the site table of contents and turn it into a list

This recipe will only work with the Legacy Template.

.screensteps-group header {
  text-align:left;
  margin-left: 0;
}
.asset-list li {
  display: block;
  float: none;
  margin-left: 0;
}
Click to copy
Expand site content to fill entire width of browser window
.screensteps-training-site .screensteps-container, .screensteps-container {
  max-width: none;
}

.screensteps-training-site .screensteps-article .screensteps-textblock {
  max-width: 80em;
}
Click to copy
Change size of the navigation column

To adjust the width of the navigation column you need to change three CSS values. One affects the width of the main content (.screensteps-main-content) and the other two affect the left navigation column (.screensteps-sidebar and .screensteps-content-wrapper:before).

@media screen and (min-width: 800px) {
  .screensteps-training-site .screensteps-main-content, .screensteps-main-content {
    width: 60%;
  }
}

@media screen and (min-width: 800px) {
  .screensteps-training-site .screensteps-sidebar, .screensteps-sidebar {
    width: 37%;
  }
}

@media screen and (min-width: 800px) {
  .screensteps-training-site .screensteps-content-wrapper:before, .screensteps-content-wrapper:before {
    width: 37%;
  }
}
Click to copy
Apply a background color to the sidebar
/* Add a background color and apply white space around edges */
.screensteps-training-site .screensteps-sidebar, .screensteps-sidebar {
  background-color: rgb(225,225,225);
  padding-top: 20px;
}

.screensteps-training-site .screensteps-sidebar-widget, .screensteps-sidebar-widget {
  margin-left: 20px;
  margin-right: 20px;
}
Click to copy
Modify appearance of styled text blocks

A text block in ScreenSteps can have a style applied to it. Currently you can assign a style of introduction, alert, tip, info, or warning. Use the following CSS to target text assigned one of these styles.

This example will change the font size for a text block that has the alert style assigned to it. Just change the word alert with introduction, tip, info, or warning for other styles.

.screensteps-textblock.screensteps-wrapper--alert {
  font-size: 10pt;
}
Click to copy

And this example will change the background color, the font color, and the icon color for the info style.

.screensteps-textblock.screensteps-wrapper--info {
  font: #ffff;
  color: #ffff;
  background-color: #A259DF
}
.screensteps-wrapper--info::before { color: white }
Click to copy
Make code block text wrap

By default, text in a code block will not wrap. If you would like to make your code blocks wrap, use the following CSS:

.screensteps-description pre,.screensteps-steps pre {
    overflow: auto;
    white-space: pre-wrap;
}
Click to copy
Hide the manual group titles in the breadcrumb
.manual-group-breadcrumb { display: none; }
Click to copy

Javascript Customizations

Hide the site description on article pages
jQuery(document).ready(function($) {
  $('.screensteps-site-description').toggle($('.screensteps-article').length == 0);
});
Click to copy
Reduce the size of the "Add comment" box

Add this script to hide the comment form on your site, but make it visible by clicking on a link.

$(document).ready(function() {
  $('.screensteps-add-comment').hide();
 $('.screensteps-add-comment').before('<a href="#" id="add-comment-link">Add a comment</a>'); 
 $('#add-comment-link').click(function(event) {
  $('.screensteps-add-comment').show();
  $(this).hide();
  return false;
 });
});
Click to copy

Here is what it will look like

User clicks on link.

Here is what it will look like

They see the full form.

Add the Next/Prev navigation to the top and the bottom of the article

Javascript:

$('.screensteps-title').after($('.screensteps-next-prev-navigation').clone())

Optional CSS:

.screensteps-title + .screensteps-next-prev-navigation {
 margin-top: 0;
 border-top: none;
 border-bottom: 1px solid #ebebeb;
 padding: 0 0 1.5em;
}

10 Comments

Matthew Fisher

Can you please add how to make the header logo larger?

Greg DeVore

@Matthew -

Right now you can't make the logo larger. That is on our list of improvements to add.

Nicole Biesenbender

Hey is there an eta on this? I see comment is from 2015.

Greg DeVore

@Nicole -

We don't have an ETA at this time.

Damian Stalls

Two questions:
1. Can the sidebar area color be changed to help distinguish between it and the article?
2. Can the search box be moved to the header?

Damian Stalls

Is this list current as of today. Most of these CSS settings do not appear to have any effect.

Trevor DeVore

@Damian - Some of the CSS wasn't working properly for our new 2018 site template that is being used on new sites. The CSS has now been updated so that it will work. Thanks for pointing that out.

Trevor DeVore

@Damian - I've added a recipe for setting the sidebar background color. The search box may be able to be moved above the header using jQuery. jQuery can be used in the JavaScript section of a site template and can move elements around the page.

Louise

How is it possible to change the icon when I "Add a manual tile that links to an external web page"?

Trevor DeVore

@Louise - yes it is. Look for the `fa-play` string in the recipe. That determines what the icon is. For example, `fa-globe` will show a globe. If inspect the CSS associated with an existing icon on your site table of contents then you can find the name of the icon being displayed.

Add your comment

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

Previous Article Adding custom CSS and Javascript to your template in the 2015 (Old) Template
Next Article Use a custom Google font in the 2015 (Old) Template
Still Need Help? Contact Us