Customize platform appearance with custom CSS

  • Updated

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.

General recommendations

  1. Test the code on your test environment.
  2. Copy-paste the code in your prod environment.
  3. Save a copy of the code in a separate file.

Add, delete or edit custom CSS

Admins can add CSS or HTML customization at the group level. It then applies to the group and propagate to all children groups, until it reaches a group with its own custom CSS or HTML settings.

  1. In the left sidebar of the homepage, click on the platform group.
  2. In the top right corner, click gear cog.svg Settings.
  3. In the left sidebar, click Branding.
  4. In the field Group’s Custom CSS, add, edit or delete CSS code.
  5. In the field Group’s Custom HTML, add, edit or delete HTML code.
  6. Click outside the field to save.
  7. 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;
}
Check out our blog for more L&D resources.

Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request