Customizing platform CSS

Platform Owners can use Custom CSS to customize the look and feel of their platform. To enable this optional setting, contact your Account Manager.

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:

• HTML Color Codes
• W3Schools: CSS Reference

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;
}