You can add a background color to a widget with the About enhancement. Use this distinct widget background to highlight instructions or other vital information contained in a widget.
Sections in this article:
- Considerations
- Set up the enhancement
- Configure the enhancement
- Turn the enhancement on
- Turn the enhancement off
- Use the enhancement
Considerations
- Accessible viewing: You can add the About enhancement to any widget in your digital workplace. However, depending on the widget's contents, this background color may not provide an accessible viewing experience.
- Default color: By default, the About enhancement will apply a grey background color to a widget. However, if your workplace has a custom visual design, it may be a different color.
Set up the enhancement
Most digital workplaces come with this enhancement already applied. To check whether your digital workplace has the enhancement, proceed to the Configure the enhancement section and follow the instructions to apply the enhancement class. If those steps do not visually change the widget, you must add the following CSS code to your digital workplace. To request this enhancement to be set up in your digital workplace, contact our Igloo team.
Add enhancement CSS code to your theme
Add the following CSS code to your digital workplace theme if the enhancement does not automatically work when applied to a page row. See Adding CSS to your digital workplace. If desired you can modify the code below to change the background color. Replace #ededed with the color of your choice..
/* About WidgetStyle */
.about.ig-cpt {
background: #ededed !important;
}
.about.ig-cpt .ig-cpt-title {
background: #ededed !important;
border: 0 !important;
padding: 10px !important;
}
.about.ig-cpt .ig-cpt-body {
background: #ededed !important;
padding: 10px !important;
}Configure the enhancement
- Navigate to the page you want to edit.
- Select
Actions and then Edit.
- Place a compatible widget or select Edit on the widget.
- Configure the widget as needed in the Options tab.
- In the Appearance tab, in Class, enter the following:
about. - Select Update.
- Select Publish Page.
Turn the enhancement on
Once the code has been placed, the enhancement is ready to be used.
Turn the enhancement off
It is not necessary to turn off the enhancement, as it is built-in to most digital workplaces. Simply remove the aboutclass from the widget to remove the effect. Alternatively, remove the CSS code to fully remove the enhancement.
Use the enhancement
Members will see the widget display with a custom background color.