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  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  tool and Insert/Edit Image  tool.

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>
</div>

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>

Content Widgets

Accordion Options

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

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

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.

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>

Special buttons will animate in size when the mouse enters.

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

To use Raleway font instead of Tungsten:

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

Links and Buttons

Fancy Link (a.fancy)

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

Fancy Large (a.fancy-large)

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

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>

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>

Lists

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.

Split List (ul.split-list)

Steps List (ol.steps)

Tight List, No Bullets (ul.tight)

Section Background Colors

Off-White

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

Blue

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

Green

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

Silver

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

Gold

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

Gold-Alt

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

Gray

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

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('http://earth.callutheran.edu/images/profile_photos/150/10.jpg');"></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.

Chart Schedule (.chart-schedule)

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

Typography

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 (p.box-bg)

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

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

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>

Utilities

.hide-on-mobile

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

.hide-on-tb-tall

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

.hide-on-desktop

Hide this element on desktops (768px and greater)

.asset

Remove margin from <p> around assets.

.sidebar-callout

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