When you edit a theme with the layout set to 2, our new intuitive interface allows you to personalize various aspects of the Lab experience. This enables you to display the image, colors, fonts, etc. of your brand, while ensuring that learners and candidates get the best learning experience. Below is a step-by-step guide to help you navigate through the customization process.
Basic Settings
Styles Settings
This guide focuses on the Styles Tab, where the theme roller is hosted. To get here, edit your Theme, navigate to the Styles tab, and here you will see the new personalization theme roller.
This tab is split in two:
The custom settings and fields, where you can personalize the theme.
Preview, this where you can pre-visualize exactly how the Lab will look for learners and candidates in real-time on every change you make.
At the top of the screen, you will see 4 general options that will help you to bootstrap a branded experience.
Color Modes. These are the modes that will be available for learners and candidates. Each checkbox next to the options Light, Dark, or High Contrast will be added to the dropdown selector inside the Settings screen on the Lab client. Additionally, you may be able to personalize each theme you make available.
Lab Header Display Type. Here, you may set an option on what the header should display:
Lab Name - this option will display the name of the Lab on the header
Skillable Logo (light on dark) - This Skillable logo is meant to be used on dark background colors.
Skillable Logo (dark on light) - This Skillable logo is meant to be used on light background colors.
Custom Logo - You have the options to upload your own custom logo. We also have an option to set your the look of your logo differently in case you decide to set up a dark theme.
None - The head bar is empty with this option.
Customization Fields
By setting up these options, you can tailor the interface through various settings such as color modes, font choices, and theme elements. As a best practice, keep in mind the diverse learner's and candidate's preferences and their accessibility needs.
For most of these settings, you may use the color picker controller or enter the color code in hexadecimal format. A color picker is a tool used to select and apply colors. Using the component is simple, by clicking on the displayed color palette the control generates a hexadecimal code (like #FFFFFF) or RGBA value (e.g., rgba(18, 191, 121, 0.25)) which is automatically typed on the setting input field.
In the Styles Guide section below, you can find a visual guide of the settings that shows which area of the client is changed.
Final Touches
Custom CSS: Add your own CSS code for additional customization. Here, you will need knowledge of CSS and which classes to override user the browser inspector or a similar tool.
Save and Apply: Once satisfied with the changes, save and apply them to update your theme and use it with your end-users.
Remember, you can always revert to default settings by selecting the Mint Green option under the Load Color Preset field, which will overwrite all colors to one of the color presets Skillable provide.
Additional Settings
Inheritance
The Inheritance tab is a feature within the Theme creation tool for a Lab Client, designed to streamline the process of building a new theme by utilizing an existing one as a foundation. By clicking on the "Add Parent Theme" link, users can easily search for and choose a parent theme, which then passes its custom CSS and JavaScript to the new theme.
This inheritance mechanism ensures that the new theme retains the styling and functionality of its parent, allowing for efficient customization and consistency across themes.
Advanced Settings
Advanced Users Only
This tab is designed for users with proficient knowledge in CSS and JavaScript. Modifying the theme using these advanced features should be approached with caution to maintain an optimal experience for learners and candidates. Only in exceptional circumstances should the theme be altered, ensuring that any changes serve a specific, beneficial purpose.
The Advanced tab is designed for customizing the appearance and behavior of the Lab client using JavaScript and CSS.
Instructions Script & CSS: JavaScript and CSS that influence the instructions window of the Lab client.
Virtualization Script & CSS: Code that affects the virtual machine window, altering icons, menus, and toolbar options.
Styles Guide
General Settings
Page Header Background Color
Page Header Text Color
Primary Color
Page Background Color
Heading Color
Text Color
Accent Background Color
Accent Border Color
Footer Background Color
Primary Color Low Opacity
Feedback and Navigation
Menu Item Text Color
Menu Background Color
Menu Item Hover Background Color
Positive Feedback Color
Negative Feedback Color
Page Navigation Button Hover Background Color
Page Navigation Button Background Color
Page Navigation Button Text Color
Page Navigation Button Border Color
Input and Button Styling
Checkbox Checked Background Color
Checkbox Check Color
Checkbox Border Color
Checkbox Background Color
Scrollbar Face Color
Scrollbar Track Color
Input Border Color
Input Background Color
Primary Button Text Color
Primary Button Background Color
Blocks and Notifications
Alert Block Color
Note Block Color
Help Block Color
Hint Block Color
Code Block Background Color
Code Block Title Background Color
Notification Background Color
Virtualization Styling
Virtualization Header Background Color
Virtualization Header Text Color
Virtualization Menu Icon Color
Virtualization Menu Divider Color
Virtualization Menu Background Color
Virtualization Menu Item Hover Background Color
Virtualization Menu Item Text Color
