Adding CSS to your digital workplace

Workplace Administrators and users with the Manage Theme role can modify a digital workplace's CSS from the Appearance page. CSS located here will be loaded on every page in a workplace. Custom CSS is often used to reflect an organization's brand, hide unwanted elements, or modify the appearance of widgets.

Applying custom CSS depends on whether the workplace is using a theme from the Theme Library, or an entirely custom theme. A workplace that is using a theme from the Theme Library will have a Theme section that looks like this:

While a workplace that is using a custom workplace theme will have a Theme section that looks like this:

Note: While CSS can also be added to other locations within a digital workplace (Space Header, or the Advanced page), it can make managing the appearance of your digital workplace difficult. By keeping all CSS within the theme area of the Appearance page you will have a central location for managing the look and feel of your digital workplace.

How to add CSS to a workplace that is using the Theme Library

1. Click the Control Panel button to open the Control Panel.
2. Select Appearance to navigate to the Appearance page.
3. Click the Add custom CSS button to display the text box where CSS can be entered.
4. Enter your custom CSS in this text box.
5. After adding your CSS, click the Preview button to open a version of your digital workplace that has this new CSS applied. You may need to navigate to the item you are styling to view what it will look like.
6. Click the Apply button when you want to save and apply this custom CSS to your workplace.

How to add CSS to your custom workplace theme

1. Click the Control Panel button to open the Control Panel.
2. Select Appearance to navigate to the Appearance page.
3. Click the Edit Custom Theme button to access the themes CSS.
4. Enter your custom CSS in this text box.
5. Click the Save & Preview button to open a version of your digital workplace that has this new CSS applied. You may need to navigate to the item you are styling to view what it will look like.
6. Click the Publish button when you want to save and apply this custom CSS to your workplace.

Note: If you save but do not publish your changes, other users could inadvertently publish them. Treat all added CSS as if it were being applied immediately.

Additional Resources

• Recover past versions of custom workplace themes
• Apply custom CSS to Widgets
• Apply custom CSS to Page rows
• Mozilla's CSS resource (External Link)