ScreenSteps

How to Customize the Colors on your Site in the 2015 (Old) Template

Updated on

This lesson will show you how to customize the colors on your ScreenSteps site without having to edit any HTML or CSS code. If you would like completely customize the look of your ScreenSteps site, you can use custom CSS.

Click here to see which colors can be adjusted
Color Selector What it controls
Background Background color of header. This will not apply if you have added a custom HTML header.
Text The color of linkable text in the header. Will not apply if you have added a custom HTML header.
Hover The hover color of links in the header.
Color Selector What it controls
Normal Color for links
Hover Hover color for links
Visited Visited color for links

Text

Color Selector What it controls
TOC Headings
Top level heading tags on the site, manual, and chapter table of contents.

This will also control the color of the article title on the article view page.
TOC Subheadings Subheadings on site, manual,  and chapter table of contents pages
Sidebar Headings Top level headings in the sidebar
Sidebar Subheadings Subheadings in the sidebar
Article Headings Top level headings in an article
Article Subheadings Subheadings in an article. This will also control the "Comment Form" labels.
Body Normal body text
Metadata This will control meta data such as article count in a chapter, comments count, timestamps for comments, etc.

Course Tiles

Color Selector What it controls
Background Background color of the tile
Progress Color of the progress bar that fills the course tile as modules are completed
Hover Color of tile when the cursor hovers over it
Text Color of text in the tile

1. Navigate to the Template Editor

2. Adjust colors

Scroll down to see the Colors section.

Edit colors

3. Preview and then Publish changes

0 Comments

Add your comment

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

Previous Article How to Modify the site Description in the 2015 (Old) Template
Next Article How to Modify the Body Text Font in the 2015 (Old) Template
Still Need Help? Contact Us