Adding CSS to your digital workplace

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.

 

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 digital 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 digital 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:

The theme section of the Appearance page when a Theme Library theme is used.

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

The theme section of the Appearance page when a custom theme is used

Sections in this article:

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

  1. 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 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. Select Apply when you want to save and apply this custom CSS to your workplace.

How to add CSS to your custom workplace theme

  1. 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 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. Select Publish when you want to save and apply this custom CSS to your digital workplace.

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