Customizing platform 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.

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:

  1. Inspect the elements you want to customize.
  2. Test your custom CSS in your test environment.
  3. Save your verified code in your production environment.
  4. Save your custom code in a separate file in case you need to review it later.

Adding custom CSS

To edit your Custom CSS:

  1. From the homepage, click on the platform group
  2. In the top right corner, click ...> Settings
  3. In the left navigation panel of the Settings tab, click Advanced
  4. Scroll down to the Web platform Custom CSS field.
  5. Enter your custom CSS code
  6. Click out of the field to save your rule
  7. Refresh your browser to view changes

Deleting custom CSS

To remove Custom CSS:

  1. From the homepage, click on the platform group
  2. In the top right corner, click ...> Settings
  3. In the left navigation panel of the Settings tab, click Advanced
  4. Scroll down to the Web platform Custom CSS field.
  5. Delete the CSS code you no longer want to appear
  6. Click out of the field to save your rule
  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.