Platform Owners can use Custom CSS to customize the look and feel of their platform. To enable this optional setting, contact your Account Manager.
⚠️ 360Learning does not set up, maintain, or provide support for custom code.
Before enabling Custom CSS, we recommend:
- Evaluating a testing and update process before enabling Custom CSS.
- Hiring a developer if you plan to make substantial CSS changes to your platform.
If you determine Custom CSS is the right fit for you, Platform Owners should be prepared to:
- Test the custom code every 3 weeks.
- Manage, troubleshoot, and support any custom code issues.
Things to know about Custom CSS before getting started:
- Due to the impact level of CSS changes, this feature is only available to Platform Owners.
- Our platform updates every 3 weeks, so there can be a heavy administrative load to maintain custom code.
- Customization happens on the platform group level and applies to all sub-groups.
Updating your Custom CSS
We recommend following these general steps when updating the platform CSS:
- Inspect the elements you want to customize.
- Test your custom CSS in your test environment.
- Save your verified code in your production environment.
- Save your custom code in a separate file in case you need to review it later.
Adding custom CSS
To edit your Custom CSS:
- From the homepage, click on the platform group
- In the top right corner, click
...
>Settings
- In the left navigation panel of the Settings tab, click
Advanced
- Scroll down to the Web platform Custom CSS field.
- Enter your custom CSS code
- Click out of the field to save your rule
- Refresh your browser to view changes
Deleting custom CSS
To remove Custom CSS:
- From the homepage, click on the platform group
- In the top right corner, click
...
>Settings
- In the left navigation panel of the Settings tab, click
Advanced
- Scroll down to the Web platform Custom CSS field.
- Delete the CSS code you no longer want to appear
- Click out of the field to save your rule
- Refresh your browser to view changes
Example CSS
To update the platform CSS, you need to know the element and property that you want to edit.
- Element:
.collapsing-panel
- Property:
background
Most simple changes will look something like this.
element {
property: value;
}
Other resources:
Change the buttons
This code changes the color.
button.button-regular.high-impact {
background: #692193!important;
}
This code changes both the color and font.
button.button-regular.high-impact {
background: #692193!important;
font-family: Helvetica, sans-serif
}
Change the left navigation panel
This code changes the color of the various elements that make up the navigation panel.
.group-list {
background: #3B2F87!important;
}
.collapsing-panel {
background: #3B2F87!important;
}
.section.top.is-selected {
background-color: #EBE9FA!important;
}