Skio Colors

Outline:

• Overview
• Text
• Header
• Button

Overview

Skio gives you the option to customize the colors of the customer portal to match your site's branding. To change the colors of the customer portal you can click “Customer Portal” in the Skio dashboard menu and then "Portal settings" or go here: https://dashboard.skio.com/portal-settings . The "Theme Colors" section is toward the bottom of that page.

Along with the brand colors you intend to use so the customer portal matches the rest of your site, we recommend testing the contrast of your background and foreground colors to maximize accessibility. You can do this by using a tool such as the a11y color contrast validator.

Color option fields will accept Hex, RGB, RGBA, and named colors options (a list of named options can be found here).

Below is a walkthrough of each section to help guide you through the customization. 

Note: Be sure to click the green "Save" button in the top right corner to see your changes reflected in the customer portal.

Text

This is all text throughout the customer portal that is not a button or header.

• Color: This changes the text color. 
• Weight: This is the thickness or boldness of the text throughout the customer portal. This defaults to normal or 400. Weight values can be 100 - 700 lightest to heaviest (or boldest). For more information on CSS font-weight go here.

Header

Header text is all the large and prominent text throughout the customer portal. Header text shows new pages and sections.

• Color: This changes the text color. 
• Weight: This is the thickness or boldness of the text throughout the customer portal. This defaults to normal or 400. Weight values can be 100 - 700 lightest to heaviest (or boldest). For more information on CSS font-weight go here.
• Uppercase: Yes or No options. This will make every letter in the header uppercase.

Button

This affects all buttons throughout the customer portal and the account login page.

• Text color: This changes the text color for all buttons in the customer portal and the account login page. 
• Color: This is the background color for all buttons in the customer portal and the account login page. 
• Border color: Optional field to add an extra or different border to all buttons.