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.
You can add CSS customization at the group level. It then applies to the group and all children groups.
General recommendations
- Test the code on your test environment.
- Copy-paste the code in your prod environment.
- Save a copy of the code in a separate file.
Add, delete or edit custom CSS
- In the left sidebar of the homepage, click on the platform group.
- In the top right corner, click
Settings.
- In the left sidebar, click Advanced.
- Scroll down to the section Web platform Custom CSS.
- Add, edit or delete CSS code.
- Click outside the field to save.
- 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;
}