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:
CSS Customizations
.screensteps-site-title-wrapper { display: none; }
p {
font-size: 12pt;
}
.screensteps-header .company-logo { display: none; }.screensteps-header { display: none; }.screensteps-header .company-logo img { display: none; }
.company-logo {
background: url("https://www.image-url");
background-repeat: no-repeat;
display: block;
height: 197px;
width: 310px;
}/* Change default colors for all pages */
body { color: #333333; }
/* Only change font color in the article body */
.screensteps-article { color: #333333; }.screensteps-main-content h2.chapter-title a {
color: green ;
}.step-depth-1 > a {
font-size: 1.5em;
}.site-article .screensteps-anchor {
display: none;
}.screensteps-article a { text-decoration: none; }.screensteps-main-search { display: none; }Standard Template
.screensteps-training-site .screensteps-main-search .search-field { color: #333; }Legacy Template
.screensteps-main-search .input-prompt { color: #333; }.screensteps-training-site .screensteps-header,
.screensteps-header { padding: 1em 1.5em; }
.chapter-count { display: none; }.screensteps-next-prev-navigation { display: none; }.screensteps-training-site .screensteps-group .asset-list a,
.asset-list li a:before {
color: #3535;
}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.
.screensteps-article a {
color: #477dca;
}
.screensteps-article a:visited {
color: #3061a7;
}.screensteps-training-site .screensteps-container-wrapper,
.screensteps-container-wrapper { padding-top: 10px; }
.print-article { display: none !important; } .screensteps-steps .image {
background-color: transparent;
border: none;
}.screensteps-steps .image {
text-align: left;
background: inherit;
border: none;
padding: 0px;
}
img[data-sizes="auto"] {
margin: inherit;
}/* Center images */
#screensteps-document div.image { width: 100%; }
#screensteps-document div.image img { margin: 0 auto; }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;
}.screensteps-training-site .screensteps-container, .screensteps-container {
max-width: none;
}
.screensteps-training-site .screensteps-article .screensteps-textblock {
max-width: 80em;
}/* 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;
}.screensteps-article-content::after {
content: "Copyright © 2016 My Company";
display: block;
margin-top: 60px;
}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 }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;
}.manual-group-breadcrumb { display: none; }li.logout, li.profile { display: none; }Javascript Customizations
jQuery(document).ready(function($) {
$('.screensteps-site-description').toggle($('.screensteps-article').length == 0);
});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;
});
});Here is what it will look like
User clicks on link.
They see the full form.
This will take the first tile on your table of contents, clone it and then replace the link, text and icon.
Javascript:
// Change the addTile function calls to have the correct arguments
// groupIndex, title, url, tileIndex
// Arguments:
// groupIndex: Index of group on the page you are adding to (0, 1, 2, etc.)
// title: Title of the link
// url: Url to link to
// tileIndex: This is optional. Use this in case you want insert the tile
// somewhere besides after the first tile
$(document).ready(function() {
//Examples only
addTile(0, 'Forums', 'https://example.com');
addTile(1, 'Downloads', 'https://example.com', 2);
});
function addTile(groupIndex, title, url, tileIndex = 0) {
// if you are using small icons change 'large' to 'small'
var group = $('.site-toc .asset-list.large')[groupIndex];
var tile = $(group).find('li')[tileIndex];
var newTile = $(tile).clone().insertAfter(tile);
var link = newTile.find('a');
link.attr('href', url);
link.attr('target', '_blank');
link.text(title);
link.removeClass().addClass('fa-play');
}Javascript:
$(document).ready(function($) {
$('.screensteps-external-nav a').prop('target', '_blank');
});
This will remove the links from Chapter headings in the table of contents and turn them into standard h2 tags.
$('h2.chapter-title a').contents().unwrap();
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.