CSS and Javascript Customizations

Updated May 30, 2019

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.

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; }
Hide the site title
Change the font size

p {

 font-size: 12pt;

}

Remove the header
.screensteps-header { display: none; }
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; }
Adjust the chapter title font colors
.screensteps-main-content h2.chapter-title a {
  color: green ;
}
Remove underlines for links in an article
.screensteps-article a { text-decoration: none; }
Change the color of the search box prompt

Standard Template

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

Legacy Template

.screensteps-main-search .input-prompt { color: #333; }
Adjust padding on the header
.screensteps-training-site .screensteps-header,
.screensteps-header { padding: 1em 1.5em; }
Hide the breadcrumb navigation
#screensteps-breadcrumb { display: none; }
Hide the next/previous navigation
.screensteps-next-prev-navigation { display: none; }
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');
}

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;
}
Adjust spacing below the header
.screensteps-training-site .screensteps-container-wrapper, 
.screensteps-container-wrapper { padding-top: 10px; }
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; } 
Remove Image background and border
.screensteps-steps .image {
 background-color: transparent;
 border: none;
}
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;
}
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;
}
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%;
  }
}
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;
}
Left align images and remove background
.screensteps-steps .image {
  text-align: left;
  background: inherit;
  border: none;
  padding: 0px;
}

img[data-sizes="auto"] {
  margin: inherit;
}
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;
}

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 }
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;
}
Hide the manual group titles in the breadcrumb
.manual-group-breadcrumb { display: none; }

Javascript Customizations

Hide the site description on article pages
jQuery(document).ready(function($) {
  $('.screensteps-site-description').toggle($('.screensteps-article').length == 0);
});
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;
}

Still Need Help?

Contact Us