Style Options

All fonts, colors and spacing of elements follow a style guide to maintain consistency throughout the site. Use the Rich Text editor to insert semantic standards compliant code so the correct styles are applied on the elements in the pages you create. Never use HTML code to change fonts, colors or spacing. If you need a new kind of stylistic element contact the COFA Web team.

Style Tool Box

We’ve tried to supply the necessary styles for you to demonstrates priority, hierarchy and relationships in your content.   Using the Rich Text editor you can insert things like bold, headers and horizontal rules (See the Rich Text Editor Tips for a full list of all the elements you can insert).

Special Styles

In addition, we have included some advanced special use classes for those cases where content relationships are more complicated. To keep them special these styles should be used sparingly.

Note – Usually thought of contextually as an aside or addition to the main body of content. The Note style allows you to offset an area of content in a box with a background color.

Alert – Used to give focus to high priority content. The box around this area will be much bolder that would normally be expected. Use this style sparingly.

Priority – Use this option on headings, horizontal rules, or in addition to the Note style above to generate an alternate, more prominent, versions of each of these elements.

Class Description The Code You Get
Example of Style Classes
alert <div class=”alert”><h2>Alert Header</h2><p>Alert paragraph text</p></div> ck-alert
note <div class=”note”><h2>Alert Header</h2><p>Alert paragraph text</p></div> note class sample

How to Apply Special Styles

There are three ways to apply these special styles.

1. Use the Styles Drop-down

The easiest is through the Styles dropdown in the editor; simply position your cursor in the paragraph you wish to style, click the dropdown from the menu, and select your style.

Screen Shot 2015-04-26 at 3.19.31 PM

2 Apply Style to a Larger Area

If you select more than one paragraph and use the Style drop-down to apply one of the special styles, each paragraph will be placed with it’s own box and may not render as desired. In order to wrap more than one paragraph within the same box using one of these styles,
use the Create Div Container button, Div - style inserting button.

Using the Create Div Container button lets you apply a CSS class to any area of content.

To use this button:

  • select the area of content you wish to apply the special style to,
  • click the button,
  • Either select the desired style from the Style dropdown in the pop-up form, or fill in the pop-up form’s Stylesheet Classes field with the appropriate style name(s). Using the Stylesheet Classes field allows you to apply more than one style as in the example below.
Screen Shot of the Div Container button pop up showing the Stylesheet Classes field.

In this example two styles are being applied.
You can apply one or multiple styles to an element.

3 Edit the Code

Click the View HTML Source Code button button and add the CSS class to the code. Learn more about HTML.

Other Classes

With classes you can implement hide/reveal accordions  or  hide content on desktop or mobile.

Leave a Reply