Styles

The Styles page lists site page elements whose CSS style can be customized by an administrator who has permission to Manage Site Pages.

Clicking Edit lets the administrator customize the CSS for all of the specified elements. For example, if you edited "Site Page Widgets" and added CSS to apply a "thick red border," then you'd see a thick red border around each and every Widget that you've put onto your site pages. It's unlikely that you'd want to do something that dramatic! A more practical example would be if you wanted to globally adjust the layout of your site pages by increasing or decreasing the spacing above and/or below every Widget.

Currently there is only one site page element listed:

• Site Page Widgets - each Widget (e.g. HTML, Catalog, Enrollment Code, Video, and so on)

The "Site Page Widgets" element also has a Variations option where you can define a variety of style variations that (optionally) can be applied to individual Site Page Widgets. For example, you could define a Variation that has a solid red border with a light red background, and later apply it to one HTML Widget that contains some very important news.

General Notes about Editing CSS

Editing a base Style and/or Variation provides a text field for entering/pasting CSS Declarations. There is no validation of the CSS--the content of the Declarations field will be emitted verbatim inside the appropriate style declaration. Which means if you put "bad" CSS into a Declaration, the regular site pages in your web site could appear "scrozzled." If that happens, just return to the admin area (if necessary, manually edit the URL to https://your.domain.com/admin) and then go to Site>Styles to edit the style you changed. Finally, correct the Declarations (or clear the style's Declaration/delete the Variation and try again). NOTE: A common oversight with CSS is missing a semi-colon at the end of each declaration.

A helpful suggestion: Become familiar with your browser's built-in development tools. In Chrome, Edge, and Firefox you can browse to your site, then right-click on some element you want to change (e.g. a Widget) and choose Inspect. A Developer Tools window will open, and then navigate to the HTML element that you inspected. Assuming you inspected the first content you see in a Widget, you may need to scroll up a little to find the "DIV" element that surrounds the widget, then click on it.

After selecting an HTML element, another part of the Developer Tool shows you the CSS that's being applied to that element. Find the area where you can add custom CSS to the selected element, and then enter the desired CSS in the browser (which does a good job at providing lists of valid attributes and values, and applying/validating the CSS you enter).

After adding all the CSS (and instantly seeing the impacts on the page itself, and confirming that your CSS Declarations are what you want) you can right-click the CSS element wrapper and copy all of its Declarations. Finally, update the style by pasting the Declarations (properly-formatted and reviewed) into the Declarations field, and then save the changes.