Style Options – College of Fine Arts Drupal Instruction

Primarily applicable only to Drupal 7 sites. The following may be confusing, so please contact the web team for assistance.

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.

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

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.

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, .

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 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.