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.
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.
Bootstrap Framework
This site uses the Bootstrap responsive framework which provides a number of default style and layout options. For more complex page layouts you can enter code in “source” view and customize as needed using any of the layout/style features of Bootstrap. Learn more at getbootstrap.com.
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:
To include this style, use the following code:
To include this style, use the following code:
To include these styles, use the following code:
List Styles
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:
Toggle Example
To set up a toggle like those below, follow the code format below. Wrap the entire question/answer in a <div class=”toggles”></div> tag, then each question should be wrapped in an <h3></h3> followed by the answer in a <div></div>. See the full code example below.
Question 1
Here is the answer.
Question 2
Here is another answer.
Question 3
Here is another answer.
To create toggles, use the following code format:
Images
Here’s an example of what your code should look like:
