Subpage Styles
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
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&byline=0&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>