Adding CSS to your digital workplace

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

Sections in this article:

Who can do this?

  • Enterprise Administrators
  • Workplace Administrators
  • Members of groups with the Manage Themes role

Considerations

  • Centralized CSS: While CSS can be added to other locations within a digital workplace (space's 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.
  • Theme section of the Appearance page: Applying custom CSS depends on whether the digital workplace is using a theme from the Theme Library or an entirely custom theme. If the Theme section contains an Add custom CSS button, it uses the Theme Library.

Add CSS to a digital workplace using the Theme Library

  1. On the Userbar, select  Control Panel.
  2. Under Presentation, select Appearance.
  3. Select Add custom CSS.
  4. Enter your custom CSS in the provided text box.
  5.  (Optional) After adding your CSS, select Preview to open a version of your digital workplace with this new CSS applied. You may need to navigate to the item you are styling to view its appearance.
  6. Select Apply to save and apply the CSS. 

Add CSS to your custom workplace theme

  1. On the Userbar, select  Control Panel.
  2. Under Presentation, select Appearance.
  3. Select Edit Custom Theme.
  4. Enter your custom CSS in the provided text box.
  5. (Optional) Select Save & Preview to open a version of your digital workplace with this new CSS applied. You may need to navigate to the item you are styling to view its appearance.
  6. Select Publish to save and apply the CSS. 

Additional resources