This style guide was developed to provide a quick and easy way for you to view and apply styles when adding content to your site.
The majority of styles can be applied using the WYSIWYG editor within the CMS. Simply select the text you want to apply a style to and pick the style you wish to apply. For more advanced edits, you can select the “Source” button in the WYSIWYG editor to add in additional styles.
This site also uses the Bootstrap responsive framework which provides a number of default style options. You can learn more at getbootstrap.com
Below are a series of styles and the corresponding code to create those styles. The majority of these styles can be applied using the WYSIWYG editor, however there are a few that will require editing the source code to add.
Header Styles
H1 Header Style
To include this header style, use the following code:
H2 Header Style
To include this header style, use the following code:
H3 Header Style
To include this header style, use the following code:
H4 Header Style
To include this header style, use the following code:
H5 Header Style
To include this header style, use the following code:
H6 Header Style
To include this header style, use the following code:
Button Styles
These style classes can be added to any text link to style it as a button. These classes can be added via the WYSIWYG editor by selecting the text you want to link, then clicking the “Link” button, under the “Advanced” tab add the class name under “Stylesheet classes”. For example “btn btn-primary”.
If you wish to add these buttons using the source code editor, follow the code examples below.
To include this style, use the following code:
Unordered List
- List item 1
- List item 2
- List item 3
- List item 4
To include this list style, use the following code:
Ordered List
- List item 1
- List item 2
- List item 3
- List item 4
To include this list style, use the following code:
Two Columns (within text area)
Note: Internet Explorer 9 and earlier versions do not support this styling and will display the content in a single column.
To add this style, you will need to edit the source code in the WYSIWYG editor to add the appropriate tags surrounding the content you want in two columns.
The columns will automatically split the content and balance the column lengths, so this style needs to be used with some caution since you may end up with hanging words at the top of the right column.
To include the two column style, wrap the code you want in columns in a <div> tag with the “two-column” class:
Toggle Example
View the source of the example below to copy the code. Note that to use multiple toggles on a single page each toggle will need it’s own unique identifier. See the bootstrap documentation for more information.
This is an example of a toggle. Add whatever text you like here.
Images
To make sure images respond to the user’s screen size, add the “img-responsive” class to the <img> tag.
To make images open larger in a lightbox add a link to the image and add the “fancybox” class to the <a> tag.
Both tags have been applied in the code example below. Optionally, you can add the classes “pull-right” or “pull-left” to align the image right or left.
