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.
Header
| 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. |
Links & Buttons
| 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.
3. Preview and then Publish changes
0 Comments
Add your comment