How widgets appear on a page, and how sections of a page look, can be altered by applying custom CSS to the page row that contains them. These styles can help draw attention to important information, provide new ways of interacting with content or better align your digital workplace's appearance with your corporate brand. Workplace Administrators and users with at least Edit access to a page where the widget is located can apply this custom CSS by adding the related CSS class to the row section of a page. 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 directly to widgets. To do this, check out the article applying custom CSS to widgets.
How to apply custom CSS to page rows
The following steps describe how to add a custom CSS class to a row. Rows on a page can contain multiple widgets and are denoted by shaded blue areas separated by blank spaces. Applying CSS to a row will only affect the widgets contained in it.
- 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 style the row.
- Go to the page where you want to apply the CSS.
- Select
Actions followed by Edit.
- To expand the class text box, select the </> button that appears when you hover over a row.
- Enter the name of your CSS class into the text box.
- If applying multiple classes, leave a space between each one.
- Classes applied this way don't need to begin with a period.
- Select Done next to the class text box to add the class to the row.
- Select Publish Page button to save your changes and publish the page.
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.