Styling with CSS Injector

CSS Injector allows you to override style features of your theme with custom CSS.

In CSS Injector, set a rule to change styles on only specific pages or add a rule that applies site wide. Keep in mind though, the more CSS Injector rules you have, the more difficult bugs are to troubleshoot. WDS may not be able to help investigate issues related to CSS injector rules.

Access CSS Injector

From the admin toolbar, click Manage » Configuration » Development » Asset Injector » CSS Injector

Considerations

Pros

  • Allows overriding any style rule as long as you have a targetable selector
  • Allows @import (CSS files), @font-face (web fonts), and @media (device-specific CSS)
  • Provides instant results

Cons

  • CSS in CSS Injector is not supported by WDS
  • You are responsible for making sure your CSS meets University accessibility guidelines
  • You are responsible for keeping up with the WDS releases, as bug fixes can have unexpected side effects on custom code
  • No code completion, syntax highlighting, or error correction
  • No revision history or audit trail
  • No Sass support
  • Editing collisions are possible
  • Thorough testing is needed for tablet and mobile breakpoints

Additional Advanced Options

Using CSS Injector alone to style portions of your site is helpful, but it's not very structured. There are two additional options available to provide a more structured approach to add custom styling to your site. Usage of these options requires that you first contact WDS to have the "CSS Manager" role applied to your user account.

Just like with CSS Injector, these are advanced options that are meant for those familiar with CSS and HTML.

Layout Builder Styles

When adding a block or section to page, site builders can choose a layout builder style to apply. A layout builder style is simply a representation of a CSS class that will be applied to that section or block HTML. This system allows you to create a structured approach for applying certain pre-defined styles to your layouts.

Users with the CSS Manager role can visit Configuration > Content Authoring > Layout Builder Styles to manage available styles. Each style has a label, one or more CSS classes to apply, and an optional restriction of specific block types or layout types where it will be available for selection.

Administrative interface for managing layout builder styles

After one or more styles has been created, a new "Style" form option should appear at the bottom of block and section configuration forms:

Layout builder style selection

Once a style has been applied, the CSS classes associated with that style will be added to the block or section wrapper.

The final step is adding the CSS for that class name (using CSS Injector) to apply styling.

This powerful solution allows site builders to quickly and easily create varied, reusable style options for your page layouts.

CKEditor Styles

Similar to Layout Builder Styles, users with the CSS Manager role can create and manage "CKEditor Styles" for their site. These styles can be used to add CSS classes to specific text placed into the text editor wherever one is used (e.g. the body field of a page or text block).

CKEditor styles can be managed at Configuration > Content Authoring > CKEditor Styles.

The configuration is quite simple once you understand the proper format. Enter one or more classes on each line in the format element.classA.classB|Label. Example: h2.title|Title. Advanced example: h2.fancy.title|Fancy title.

CKEditor styles admin interface

The "element" refers to the HTML element type, like span, p, and h2. The element is followed by a period, then one or more CSS class names to associate with the style. Finally, a human-readable label is assigned to the style.

After one or more styles have been defined, they can be applied to text in the editor. Simple select the text to apply the style to, and then select the style from the Styles drop-down. The CSS class is then applied to that element when the page is viewed by visitors. If your style doesn't appear as an option, it's likely because your cursor is not text that works with the style you've defined. For example, if you defined a style for a "span" element, it won't be available when highlighting an h2 element.

CKEditor styles being used

The final step is adding the CSS for that class name (using CSS Injector) to apply styling.

New PSBv2 features

WDS continually adds new features to Site Builder. New enhancements are designed to display well on Tiger, our core theme. If you have a custom theme or have added CSS, your site may not be optimized to use new features. 

Please contact WDS if you wish to use a new feature that does not display well. You will be provided with a cost estimate for the effort to style the new feature for your site.