Optional Styling

Main Content

Colors

#660000 Main Maroon

#560000 Hover Maroon

#720030
Link Maroon

#333333 Dark Gray

#666666 Middle Gray

#C8C7C1 Light Gray

#FFA800 Yellow

#246181 Blue

#644D2E Gold
(text only)

#DAD6CB Background Tan

#F2F1ED Background Light Tan


2. Fonts

Primary font: "Arial", sans-serif;

Primary font italic: "Arial", sans-serif;

Primary font bold: "Arial", sans-serif;

Secondary font: Roboto Condensed, sans-serif;

Secondary font italic: Roboto Condensed, sans-serif;

Secondary font bold: Roboto Condensed, sans-serif;


<p class="zurich">A sentence with Roboto Condensed.</p>

Serif font: "Times New Roman", Times, serif;

Serif font italic: "Times New Roman", Times, serif;

Serif font bold: "Times New Roman", Times, serif;


<p class="serif">A sentence with a serif font.</p>

Styles

We’ve included a number of styling options for you to add to text on your pages. These can be found under the Styles dropdown box in the WYSIWYG. These styles only work on select text objects. For a full list of the styles, their effects, and the text objects they can be used on, see the table starting on the next page.

Next to the Styles dropdown, there is a dropdown that says Paragraph or Format. This can be used to add headings to your page. For accessibility purposes, heading 1 should never be used on a page, as it is already automatically generated for the main title of the page. There are 5 other heading styles offered, however. A final note on headings: be sure that headings come in sequential order on your page (i.e. heading 2- heading 3- heading 4).  Do not skip heading 3 and go straight from 2 to 4, as this breaks the accessibility of the site.

Style Options

STYLE

AVAILABLE TEXT OBJECTS

DESCRIPTION

EXAMPLE (if necessary)

serif

paragraph

Changes text to serif font

Serif text

zurich

paragraph

bullet list

Changes text to Roboto Condensed font

Roboto Condensed font

imgfloatright, picfloatright, or floatright

any

Floats object right with text wrapping around it

imgfloatleft, picfloatleft, or floatleft

any

Floats object left with text wrapping around it

bigger

heading 2

paragraph

Changes font size of heading 2s to 40px and paragraphs to 16px. Used for first heading on each page.

bigger

smaller

paragraph

Changes font size of paragraphs to 12px

smaller

allcaps

paragraph

span

heading 3, 4, 5, or 6

bullet list

numbered list

Changes anything to all uppercase and font size is 140% of original size. Mostly used on paragraph objects.

all caps

twocol

paragraph

bullet list

numbered list

Separates content into two columns

threecol

paragraph

bullet list

numbered list

Separates content into three columns

fourcol

paragraph

bullet list

numbered list

Separates content into four columns

fivecol

paragraph

bullet list

numbered list

Separates content into five columns

navlist

bullet list

  • Basic list with “›” as bullet

navlist-more-padding

bullet list

Basic list with “›” as bullet with 5px padding on top and bottom of li

navlist-gray-dot

bullet list

Basic list with large gray dot as bullet

navlist-white-dot

bullet list

Basic list with large white dot as bullet

navlist-no-bullet

bullet list

List with no bullet points

do-not-resize

images

Keeps an image the size specified in Cascade (does not resize for responsive)

in-button

links

buttons

Maroon button with white text. Must be on button or a link.

button

circle

images

Turns an image into a circle (or oval if it’s not square).

SIU Sign

center

paragraph

heading 2, 3, 4, 5, or 6

Aligns text to center.

center

blockquote

paragraph

Allows a piece of text to be set off from the main text.

This is an example of a blockquote.

req-button

links

buttons

Subtle gray border button

in-button.darkbg

links

buttons

Changes the background to transparent on button instead of maroon, with yellow outline. Must be used with “in-button” class.

Example:

class=”in-button darkbg”