Subpage Styles

Overview

Overview

The page editor allows you to assign custom classes/styles to elements in the content area.

Custom Buttons

There are 3 custom button options for your site.  You can highlight text in your content area, select the link icon to assign a link and then choose the button class from the formats menu.  The three options are "button-small", "button-medium" and "button-large"

 

Content Column Layouts

Content Column Layouts

You can create a multi-column layout in the content area by using custom classes and div tags.  Each section that needs a multi-column layout will have a row div tag "div-row" and as many column div tags "div-col" as needed.  Inside each of the "div-col" tags you can place content as needed.   The addition class in the row div will define spacing for columns.

Column Options Available:

Two Columns:

<div class="div-row one-half">

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

</div>

Three Columns:

<div class="div-row one-third">

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

</div>

Four Columns:

<div class="div-row one-fourth">

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

</div>

Two Third Default:

<div class="div-row two-third">

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

</div>

Two Third Right:

<div class="div-row two-third right">

<div class="div-col">

 [content goes here]

</div>

<div class="div-col">

 [content goes here]

</div>

</div>

*NOTE - Video embed code that requires iframes such as Vimeo video will automatically be resized for different screen resolutions.

**NOTE - The style guide page provides examples of each layout.

Example HTML of Two Column Layout:

<div class="div-row one-half">

<div class="div-col">

<div><iframe width="500" height="281" src="//player.vimeo.com/video/30756127?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></div>

</div>

<div class="div-col">

<h4>Two Column Style</h4>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

</div>

</div>