CSS Injector
CSS Injector allows you to override styles 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.
From the admin toolbar, click Manage » Configuration » Development » Asset Injector » CSS Injector
If adding a different font from services like Google Fonts, you must manually replace any semicolons in the CSS import URL with %3B to prevent issues with the styles not loading correctly.
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
Using CSS Injector alone to style portions of your site is helpful, but it's not very structured. There are two additional options (described below) to provide a more structured approach to add custom styling to your site.
Layout Builder Styles
Just like with CSS Injector, these are advanced options that are meant for those familiar with CSS and HTML. Creating custom Layout Builder Styles requires that you first contact WDS to have the "CSS Manager" role applied to your user account.
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 predefined styles to your layouts. Your site may already have several Layout Builder Styles available that WDS created.
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.
After one or more styles has been created, a new "Style" form option should appear at the bottom of block and section configuration forms:
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). Sites using the Tiger theme have some default styles available.
Creating custom CKEditor Styles requires that you first contact WDS to have the "CSS Manager" role applied to your user account.
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.
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.
The final step is adding the CSS for that class name (using CSS Injector) to apply styling.
New Site Builder 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.