Applying custom CSS to widgets

You can modify the appearance of widgets by applying custom CSS to them. These styles can help draw attention to important information or better align your digital workplace's appearance with your corporate brand.

Some CSS classes can also be applied to page rows to affect multiple widgets. To do this, check out the article applying custom CSS to page rows.

Sections in this article:

Who can do this

Workplace administrators and users who have at least Edit access to the page or space where the widget is located can apply this custom CSS by adding the related CSS class to the widget's Appearance tab. This CSS class should correspond with a CSS selector that has already been added to your digital workplace's CSS theme.

How to apply custom CSS to widgets

The following steps describe how to add custom CSS to a widget. Applying CSS to a widget will only affect that widget.

  1. Add the CSS that you want to use to the digital workplace's CSS theme. The selector used for this should contain a custom class name; this class will be used to apply the style to widgets.
  2. Go to the page or space that contains the widget that you want to style.
  3. Select  Actions followed by Edit.
  4. While editing the page, select Edit on the widget that you want to style.
  5. Select the widget's Appearance tab.
  6. Enter your custom class name into the Class text field.
    • If applying multiple classes, leave a space between each one. 
    • Classes applied this way don't need to begin with a period.
  7. Select Update to update the widget with these changes.
  8. Select Publish Page to apply and save these changes.

After publishing the page, you should see the effect of your style. If you do not, verify that you are using the correct class name.