In Frost, a theme is a predefined set of colours, fonts, patterns and widget styles that you apply to your courses for a unified, professional look. Using a theme gives your courses a harmonious appearance with minimal effort.
Frost Designer comes with a set of 6 default themes which are as follows:
- Atlantic Blue
- Basic Blue
- Black & Red
- Cerulean
- Green Pop
- Pebbles
Custom Themes
Custom themes can be requested by clients to accommodate their organization's branding guidelines. There are two ways to get a customised theme created for Frost courses, either client can provide requirements to LearningMate for creating a custom theme OR the clients can create a custom theme and request LearningMate to upload it.
For LearningMate to Create a Customized Theme
How to provide requirements for a customized theme for courses in Frost
Primarily, all tenants will have the default themes enabled. If users want to customize a theme, kindly share the filled theme requirement sheet with LearningMate Product Support Services. In case of any issues, kindly log Zendesk tickets.
- Download the Theme Requirement sheet
- Fill in the required branding guidelines
Note: The theme requirement sheet contains root and body properties for the clients to provide the details. The theme requirement sheet also has details for all widgets & patterns that need to be customized as per the given theme.
- Create a Zendesk ticket and attach the Theme Requirement Sheet
- The theme will be created and uploaded by LearningMate
For Creating a Customized Theme to be Uploaded by LearningMate
Points to remember
- To apply and preview the new font family, navigate to the <head> area of the "designer-preview" component and add the font family CDN link under <head> tag
- Select the --th-body-font / --th-header-font and update the font family name
- Open the style1.css & style2.css in any code editor of your choice
- Update the font family import link at line 4
- Update CSS Variable --th-body-font & --th-header-font at line 20 & 21 respectively
- Note: The default theme font family used is "Lato”
- All colors and font families used for the themes are declared as CSS variables for better management
- All components and widget colors and font family are further declared as variables which are related to the theme's color and font family variables
- All external URL calls should be declared at the start of CSS
- Fontawesome icon library used for the icon display
- Multiple versions of Fontawesome have been used for backward compatibility
- All themes related updates done under style1.css should need to be replicated to style2.css for Preview
What are the best practices for creating a course theme?
Note: Kindly follow the following set of guidelines to create a customized theme more effectively.
- Themes thumbnail canvas should be of width: 204px & height: 90px and named "icon.png"
- All colors added in the themes should be validated for color contrast ratio. We can use https://dequeuniversity.com/color-contrast/[https://webaim.org/resources/contrastchecker/]
- All colors and font families should be declared with CSS variables
- For body section font family should be added under CSS variable --th-body-font & for heading elements under CSS variable --th-header-font
- Use rem/em/% as font units
- Use hexadecimal color codes instead of using color names to declare a color value. E.g.: color: #ff0000 instead of color: red
- When using hexadecimal color codes for the same repeated values, we can shorthand three characters instead of all six hexadecimal codes. E.g.: use #000 instead of #000000
- 0 units should not have any unit association. E.g.: correct 0, incorrect 0px
- Do not use 0 in front of a decimal pointer. E.g.: correct .8rem, incorrect 0.8rem
- Avoid using !important. !important should be opted for as the last option to overwrite some existing CSS properties
How to update the theme for courses using Stylesheets
Note: The style1.css is used for the New Editor Authoring mode and style2.css is used for the New Editor Preview mode.
Updating style1.css
To apply new theme changes modify the CSS variable or CSS properties as applicable following the steps mentioned below
- Navigate to the Preview panel and press F12 to open the inspect element window
Note: Right click will not work in New Editor preview mode, as it would trigger the "Comment" feature
- Choose the "Select an element in the page to inspect it - Ctrl + Shift + C" tool, and choose the targeted element (e.g. Accordion/Tabs etc.)
- The selected element CSS properties will appear under the "Styles" section in the right panel
- To modify the variable value, click on the CSS variable name. This will navigate to the :root { ... } area of the style1.css Identify the CSS variable to modify
Updating style2.css
To apply new theme changes modify the CSS variable or CSS properties as applicable following the steps below
- Navigate to the Preview panel and press F12 to open the inspect element window
Note: Right click will not work in New Editor preview mode, as it would trigger the "Comment" feature
- Choose the "Select an element in the page to inspect it - Ctrl + Shift + C" tool, and choose the targeted element (e.g. Accordion/Tabs etc.)
- The selected element CSS properties will appear under the "Styles" section in the right panel
- To modify the variable value, click on the CSS variable name. This will navigate to the :root { ... } area of the style2.css Identify the CSS variable to modify
- The ID #pc-main has been used as the parent wrapper for the New Editor preview section. Therefore, all the ID/Classes present under style1.css are also present under style2.css and are preceded by the ID #pc-main
Uploading Customized Theme to Frost
- Create a Zendesk ticket and attach the customized theme
- The theme will be created and uploaded by LearningMate
- You will be notified of the successful upload