Skip to main content

Style Content Using the Style Editor

Developers can style components (background colors, text colors, typefaces, elements, etc.) using the Style Editor. When viewing your page in Edit Mode, click the Edit Styles button in the lower left corner of the component you wish to edit.

Component Utility Classes

These are the classes that will be applied to your component’s outer container, for example background colors, text-alignment, background effects, background positioning and so on. Here is an example:

bg-wvu-blue wvu-bg-topo-light text-center

For more information on utilities, see the Utilties section.

Aria Label

To make our components accessible, an aria-labelledby attribute is automatically applied to each component by associating it with the component’s header, which serves as the label for the component. However, some components don’t have a header to hook into. If your component lacks a header, you must supply an aria-label manually. You can do this using the Style Editor.

  1. In Edit Mode, find the component on your page that you want to apply the aria-label attribute to.
  2. Click the Edit Styles button near the bottom of your component.
  3. In the Aria Label field, enter the label you want to apply. This label should describe the content in the component e.g. “Lead Text,” or “List of Featured Pages.”
  4. Publish your page.

Item Colors

For the Page Collection - Colored Boxes component and the Photo Grid component, you can customize the background colors used for the boxes that display your content.

Collection Item Classes

You can provide utility classes to style individual items in a collection component. Depending on which component you’re using, additional fields will display in the Edit Styles panel. Enter the utility classes in each of these fields to achieve the look you want.

Field Description Example
Row Classes This is for the row that contains your items. You normally use this to set the alignment of the items. justify-content-center
Item Classes The classes you want to apply to items. You normally use this to define the number of columns your items should span at different browser widths. mb-4 col-md-4 mb-md-0
Item Colors A comma-separated list of background colors. Use these for the Alternating Grid component or the Page Collection Colored Boxes component. wvu-accent--blue,wvu-accent--burnt-orange
Item Header Classes The classes you want to apply to item headers. wvu-shout wvu-bar
Icon Classes If your component displays icons, use this to set the background color and text color of the icons. bg-wvu-gold text-wvu-blue
Item Body Classes The classes you want to apply to the descriptive text for each item, normally just the typeface. iowan-old-style-black
Button Classes The color, size, and style of the button for each item. btn btn-sm btn-wvu-blue
Button Text The text of the button for each item. Note, you can remove the button entirely by typing in “none” for the button text. View Profile