Applying custom CSS to widgets
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. 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.
Some 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.
How to apply custom CSS to Widgets
The following steps describe how to add custom CSS to a Widget. Applying a CSS to a Widget will only affect that Widget.
- 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.
- Navigate to the page or space that contains the Widget that you want to style.
- Click the
Actions Button and select Edit from the provided menu.
- While in page edit mode, click edit on the Widget that you want to style.
- Navigate to the Widget's Appearance tab.
- Enter your custom class name into the Class text field on the appearance tab.
- If applying multiple classes, leave a space between each one.
- Classes applied this way don't need to begin with a period.
- Click the Update button to update the Widget with these changes.
- Click the Publish Page button 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.
- 3,097 views
- 0 previews
- 33 versions
- 0 comments
- 1 follower
- Updated By:
- Jesse Langstaff
- June 22, 2021
- Posted By:
- Jesse Langstaff
- May 15, 2019
- Versions:
- v.33
0 Comments