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:
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;
}
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-steps .image {
text-align: left;
background: inherit;
border: none;
padding: 0px;
}
img[data-sizes="auto"] {
margin: inherit;
}
.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; }
Javascript Customizations
jQuery(document).ready(function($) {
$('.screensteps-site-description').toggle($('.screensteps-article').length == 0);
});
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();
Can you please add how to make the header logo larger?