Additional Styles

For special situations, advanced style options may be useful in addition to the styles that are available in the editing interface. Because these styles are not available through the Styles drop-down menu, you can set them by copying-and-pasting code into the Source Code editor, or by using the Custom class option within the Insert/Edit Link Insert/Edit Link tool and Insert/Edit Image Insert/Edit Image tool.

  HEAD'S UP: Due to the higher level of impact that these items have on university content, additional styles can only be accessed by Global Admin users. Contact Us for assistance.

Block Selectors

This is used for pagination or alphabetic link listings. Ideally, all link items are one character long.

Button Groups

A button group is used when you need to stack several buttons that have related tasks. This is mostly to be used in the sidebar area. Since the buttons in a group will be set to block level, the group will size to fit the parent width.

<div class="btn-group">
<a href="#" class="btn">Button 1</a>
<a href="#" class="btn green">Button 2</a>
<a href="#" class="btn gold">Button 3</a>

Button Groups

Color Options

Default button color is purple, but these are addition color options.

<a href="#" class="btn green">Green</a>
<a href="#" class="btn blue">Blue</a>
<a href="#" class="btn red">Red</a>
<a href="#" class="btn brown">Brown</a>
<a href="#" class="btn gray">Gray</a>
<a href="#" class="btn gold">Gold</a>
<a href="#" class="btn offwhite">Offwhite</a>

Color Options

Content Widgets

Accordion Options

Linking directly to an accordion using a URL hash is currently unavailable

<div class="accordion accordion-plain">Accordion Content</div>

Accordion Options

Hide Breadcrumbs

To hide breadcrumbs at the top of a page, edit the Source Code and insert this line of code within the <headcode></headcode> tags: 

<link rel="stylesheet" type="text/css" href="{{f:39155}}"/>

Tab Options

Select Open Tab: To link to a tab on page load, you must use the correct URL hash to match the ID of the tab title. For instance, a URL hash with #tabtitle2 would link to the tab below. All characters must be lower case with spaces and special characters removed.

Maximum Number of Tabs: Tabs may not exceed more than six tabs. This is currently not supported with the way the CSS framework works and is not an ideal best practice anyway.

Hide Tabs: To load page without any tabs shown, add the class .tabs-hide to the parent wrapper.

Hide Tabs

Icons & Extra Styles

Adding icons from our icon web font to the button class will place the icon on the left of the button text.

<a href="#" class="btn icon-home">Home</a>


There are two options for arrows facing left and right. 

<a href="#" class="btn btn-arrow-left">Left Arrow</a>
<a href="#" class="btn btn-arrow-right">Right Arrow</a>

Left Arrow / Right Arrow

Special buttons will animate in size when the mouse enters.

<a href="#" class="btn btn-special">Special Button</a>

Special ButtonTo use Raleway font instead of Tungsten:

<a href="#" class="btn btn-sans-font">Raleway Button</a>

Raleway Button

Links and Buttons

Fancy Link (a.fancy)

<a href="#" class="fancy">Fancy Link</a>

Fancy Link

Fancy Large (a.fancy-large)

<a href="#" class="fancy-large">Fancy Link</a>

Fancy Large

Fancy Link-Back (a.fancy-back)

<a href="#" class="fancy-back">Fancy Link</a>

Fancy Link-Back-Large (a.fancy-back-large)

<a href="#" class="fancy-back-large">Fancy Link</a>

Block Link (a.btn block)

<a href="#" class="btn block">Block Button</a>

Block Link

Size options

Two size options larger and smaller from default

<a href="#" class="btn btn-small">Small Button</a>
<a href="#" class="btn btn-large">Small Large</a>

Small Button

Small Large


Column List (ul.col-list)

Another option based on this is .col-list-2, which will instead do a two column layout at the widest breakpoint instead of three.

Column List

Split List (ul.split-list)

Steps List (ol.steps)

Steps List

Tight List, No Bullets (ul.tight)

Tight List, No Bullets

Section Background Colors


<section class="bg-offwhite"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-blue"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-green"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-silver"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-gold"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-gold-alt"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title


<section class="bg-gray"><div class="col-sm-12"><div id="Section Title" class="section-title">Section Title</div></div></section>

Section Title

Short Items

These are used for a table-like listing of discrete pieces of data like upcoming events, news, faculty where an image is on the left and a set of information on the right.

Additional options on outer-most wrapper:

  • .bg-offwhite to make background set to off-white for that block.
  • .short-item-large makes photo and header title larger
  • .short-item-small is a more compact size
  • .short-item-large-image sets image aside to larger size
  • .short-item-no-border removes top and bottm borders; good for when element is standing alone.
  • .short-item-right-inline sets the aside to the right with content wrapping around.
  • .short-item-vertical-center makes content area vertically centered against image aside
  • .short-item-alt is an alternate style as seen on Events/News on main homepage.
<div class="short-item">        <div class="short-item-aside">            <a href="#"><span class="crop-circle" style="background-image: url('');"></span></a>        </div>        <div class="short-item-content">            <header><a href="#">William L. Bilodeau, Ph.D.</a></header>            <p>Professor of Geology and Chair, Geology Department</p>        </div>    </div>

Special Tables

Chart List (.chart-list)

This will force a tablet.chart to only view as mobile version with table rows listed full width.

Complex Chart (.chart-complex)

This is an additional class added to .chart that highlights first column. Useful for tables of information that run in both dimensions. Also switches font to an alternate sans-serif for better readability.

Complex Chart

Chart Schedule (.chart-schedule)

An additional class to .chart that makes the first column a consistent width ideally for a set of times.

Chart Schedule


Base font size is 16px. All font sizes are defined by REM (root Ems). Any REM value is a multiplier of the base font size.

Box Background (

Box background around content (margins and padding). Can be applied to DIV or P.

<p class="bg-box">Here is text</p>

Box Background

Centered Text (.centered)

Centers text

<p class="centered">This is centered text.</p>

Fine Print (.fine-print)

Add to any element to scale down font size, lighten color, and set to Helvetica

<p class="fine-print">This is some fine print</p>

Info Box (.info)

Combine with fine print for extra special.

<p class="info">This is for your information</p>

Info Box



Hide this element on anything smaller than mobile breakpoint (less than 768px)


Hide this element on a portrait tablet size (768px)


Hide this element on desktops (768px and greater)


Remove margin from <p> around assets.


Duplicate sidebar include into top of #page-content on landing page layouts.

< Previous Article