Skins are made up of various sections and properties used to personalise the look-and-feel of your platform. The purpose of this article is to provide an overview of the options available when creating/editing Skins.
Important: The options, colours etc. shown in this article are for example purposes only. You do not need to use the same values for your own platform.
Table of Contents
Login Box
Contains options relating to the styling of the sign-in form that appears on the login page.
| Field Name | Description | Comments/Tips |
| 1. Login Box Position | Select the position the login box will appear in on the page (Top Left, Top Center, Top Right, Center Left, Center Center, Center Right, Bottom Left, Bottom Center or Bottom Right) | Choose a position that best highlights your background image |
| 2. Login Button | Select the button to use for the login form, or upload your own (custom) image |
|
| 3. Login Header | Choose whether or not to display the header (top bar) on the login page | Keep this unchecked if you wish to display the background image + login form only |
Header
Contains options relating to the styling of the header (top banner) that appears throughout the platform.
| Field Name | Description | Comments/Tips |
| 1. Header Background Colour | Choose the colour to use as the header (top banner) background | This colour will only be visible if there is no background image set and/or wherever there are gaps (around the image)
Important: This also applies as the 'button background' colour within the iOS & Android mobile apps, so please choose wisely, to avoid legibility issues |
| 2. Header Background Image |
Upload a custom image to be used within the header (top banner) background |
|
| Header Background Image Position | Select the position the background image will appear in within the header (Left, Center or Right) | Choose a position that best highlights your background image |
| Header Background Image Repeat | Choose whether or not the background image should repeat across the entire header (top banner) | |
| 3. Header Image |
Upload a custom image to be used as the 'logo' within the header (top banner) |
The default position for the 'logo' is left, which cannot be changed
|
| Header Image (Square) | Deprecated. Please disregard and do not use/change | |
| 4. Button Background Colour | Choose the colour to use as the header icons/buttons background colour | |
| 5. Button Border Colour | Choose the colour to use as the header icons/buttons border colour | |
| 6. Button Outline Colour | Choose the colour to use as the header icons/buttons outline colour |
Important: This also applies as the 'button text' colour within the iOS & Android mobile apps, so please choose wisely, to avoid legibility issues |
| 7. Badge Background Colour | Choose the colour to use as the (notification) badge background colour | |
| 8. Badge Border Colour | Choose the colour to use as the (notification) badge border colour | |
| 9. Badge Text Colour | Choose the colour to use as the (notification) badge text colour |
Slide-out Panel
Contains options relating to the styling of the (left-side) menu 'toolbox' section.
| Field Name | Description | Comments/Tips |
| 1. Background Colour | Choose the colour to use as the slide-out panel background | |
| 2. Primary Text Colour | Choose the colour to use as the slide-out panel text | |
| Secondary Text Colour | Deprecated. Please disregard and do not use/change | |
| 3. Button Background Colour | Choose the colour to use as the slide-out panel/toolbox menu button background colour | |
| 4. Button Border Colour | Choose the colour to use as the slide-out panel/toolbox menu button border colour | |
| 5. Button Text Colour | Choose the colour to use as the slide-out panel/toolbox menu button text colour | |
| Drop-down Background Colour | Deprecated. Please disregard and do not use/change | |
| Drop-down Border Colour | Deprecated. Please disregard and do not use/change | |
| Drop-down Text Colour | Deprecated. Please disregard and do not use/change | |
| 5. Separator Colour | Choose the colour to use as the slide-out panel/toolbox menu separator (line) colour |
Toolbox
Contains options relating to the styling of the (left-side) menu 'toolbox' section as well.
| Field Name | Description | Comments/Tips |
| 1. Menu Background Colour | Choose the colour to use as the toolbox menu background | |
| 2. Menu Text Colour | Choose the colour to use as the toolbox menu text | |
| 3. Menu Active Background Colour | Choose the colour to use as the toolbox menu background when active/selected | |
| 4. Menu Active Text Colour | Choose the colour to use as the toolbox menu text when active/selected | |
| 5. Menu Hover Background Colour | Choose the colour to use as the toolbox menu background when hovered | |
| 6. Menu Hover Text Colour | Choose the colour to use as the toolbox menu text when hovered | |
| 7. Submenu Background Colour | Choose the colour to use as the toolbox submenu background | |
| 8. Submenu Text Colour | Choose the colour to use as the toolbox submenu text | |
| Submenu Disabled Background Colour | Deprecated. Please disregard and do not use/change | |
| Submenu Disabled Text Colour | Deprecated. Please disregard and do not use/change | |
| 9. Submenu Hover Background Colour | Choose the colour to use as the toolbox submenu background when hovered | |
| 10. Submenu Hover Text Colour | Choose the colour to use as the toolbox submenu text when hovered |
Footer
Contains options relating to the styling of the footer (bottom banner) that appears throughout the platform.
| Field Name | Description | Comments/Tips |
| 1. Footer Background Colour | Choose the colour to use as the footer (bottom banner) background | This colour will only be visible if there is no background image set and/or wherever there are gaps (around the image) |
| 2. Footer Background Image | Upload a custom image to be used within the footer (bottom banner) background |
|
| 3. Footer Background Position | Select the position the background image will appear in on the footer (bottom banner) (Left, Center or Right) | Choose a position that best highlights your background image |
| Footer Background Repeat | Choose whether or not the background image should repeat across the entire footer (bottom banner) | |
| 4. Footer Text Colour | Choose the colour to use as the footer (bottom banner) text |
Buttons
Contains options relating to the styling of the various buttons that appear throughout the platform.
Plain
| Field Name | Description | Comments/Tips |
| 1. Background Colour | Choose the colour to use as the button background | This colour should blend into the background of the page |
| 2. Border Colour | Choose the colour to use as the button border | We recommend using the same colour as the background |
| 3. Text Colour | Choose the colour to use as the button text | |
| 4. Hover Background Colour | Choose the colour to use as the button background when hovered | This colour should be different to the standard background colour, to indicate it is being hovered over |
| 5. Hover Border Colour | Choose the colour to use as the button border when hovered | We recommend using the same colour as the hover background |
| 6. Hover Text Colour | Choose the colour to use as the button text when hovered |
Primary
| Field Name | Description | Comments/Tips |
| 1. Background Colour | Choose the colour to use as the button background | This colour should match the overall colour scheme of your platform |
| 2. Border Colour | Choose the colour to use as the button border | We recommend using the same colour as the background |
| 3. Text Colour | Choose the colour to use as the button text | |
| 4. Hover Background Colour | Choose the colour to use as the button background when hovered | This colour should be different to the standard background colour, to indicate it is being hovered over |
| 5. Hover Border Colour | Choose the colour to use as the button border when hovered | We recommend using the same colour as the hover background |
| 6. Hover Text Colour | Choose the colour to use as the button text when hovered |
Secondary
| Field Name | Description | Comments/Tips |
| 1. Background Colour | Choose the colour to use as the button background | This colour should compliment the overall colour scheme of your platform (as well as the 'primary' button) |
| 2. Border Colour | Choose the colour to use as the button border | We recommend using the same colour as the background |
| 3. Text Colour | Choose the colour to use as the button text | |
| 4. Hover Background Colour | Choose the colour to use as the button background when hovered | This colour should be different to the standard background colour, to indicate it is being hovered over |
| 5. Hover Border Colour | Choose the colour to use as the button border when hovered | We recommend using the same colour as the hover background |
| 6. Hover Text Colour | Choose the colour to use as the button text when hovered |
Danger
| Field Name | Description | Comments/Tips |
| 1. Background Colour | Choose the colour to use as the button background | This colour should stand out to indicates its severity |
| 2. Border Colour | Choose the colour to use as the button border | We recommend using the same colour as the background |
| 3. Text Colour | Choose the colour to use as the button text | |
| 4. Hover Background Colour | Choose the colour to use as the button background when hovered | This colour should be different to the standard background colour, to indicate it is being hovered over |
| 5. Hover Border Colour | Choose the colour to use as the button border when hovered | We recommend using the same colour as the hover background |
| 6. Hover Text Colour | Choose the colour to use as the button text when hovered |
Background
Contains options relating to the platform background.
| Field Name | Description | Comments/Tips |
| 1. Background Image | Upload a custom image to be used as the background throughout the entire platform |
The background of the 'default' skin is what appears on the login page (for all users)
|
| 2. Background Position | Select the position the background will appear in on the page (Left, Center or Right) | Choose a position to match where the point of focus is on the background image |
| 3. Background Colour | Choose a colour to use for the background | This colour will only be visible if there is no background image set and/or wherever there are gaps (around the image) |
Title Bars
Contains options relating to the styling of page title bars.
| Field Name | Description | Comments/Tips |
| 1. Title Bar Style | Select the style/colour you wish to use for the header/title of the element | This colour is also applied to the element border |
| 2. Title Bar Text Colour | Choose the colour to use for the text of the element header/title | The most commonly used colours are White and Charcoal, but choose the colour that best suits the Title Bar Style chosen |
Widgets
Contains options relating to the default styling Dashboard widgets use (unless specifically configured).
| Field Name | Description | Comments/Tips |
| 1. Widget Background Colour | Choose a colour to use as the main background of the widget container/box | |
| 2. Widget Border Colour | Choose a colour to use as the border colour around the entire widget | |
| 3. Widget Text Colour | Choose a colour to use for the text within the widget | This colour applies to plain, non-link text only |
| 4. Widget Header Background Colour | Choose a colour to use for the background of the widget header/title | |
| 5. Widget Header Text Colour | Choose a colour to use for the text of the widget header/title |
Career Mapper
Contains options relating to the styling of the platform Career Mapper Dashboard widget.
| Field Name | Description | Comments/Tips |
| 1. Career Mapper | Upload a custom image to use as a training indicator, which 'fills up' as a user's training progresses |
Choose an image with a transparent background, for the most effective look
|
Fuel Gauges
Contains options relating to the styling of training-related statuses within the various Performance Monitor pie charts.
Note: The colours/styling of the tables at the top of the Performance Monitor page cannot be changed.
| Field Name | Description | Comments/Tips |
| 1. Pass / Complete Colour | Choose a colour to use that indicates a pass/complete status | |
| 2. Fail Colour | Choose a colour to use that indicates a fail status | |
| 3. Pending Colour | Choose a colour to use that indicates a pending/not attempted status | |
| 4. Pass Colour Shadow | Deprecated. Please disregard and do not use/change | |
| 5. Fail Colour Shadow | Deprecated. Please disregard and do not use/change |
Important: Whilst there are many more options available within the Skins tool, we highly recommend leaving the default options as is to avoid legibility issues.
If you require any assistance with Skins styling, please contact our Support Team at wmsupport@franconnect.com.