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

There are several 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 options are

• button-simple: displays the button with a right arrow (no border)
• button-small: displays the button with a right arrow and light border
• button-icon: displays the button with light border and you can use an icon other than the right arrow (see below)
• button-large:  displays the large normal button format with right arrow
• button-blue: displays the small blue button with right arrow
• button-blue-large: displays the large blue button with right arrow
• button-white: displays the button in white background with right arrow

Button Icon

Using this button class allows you to place a custom icon inside the button.  After this class is assigned to the link you will have to view the html view and place a span tag with an icon class inside of the anchor.

Example - <p><a href="#" class="button-icon">Icon Button <span class="icon-play"></span></a></p>

A full list of available icons can be found at http://tpcc2.monkpreview2.com/_assets/fonts/icons/ (use http://tpcc.org/_assets/fonts/icons/ when your site goes live).

You can use the feature-text and preview classes to change the font/style of normal paragraph font by assigning either of these classes to a paragraph tag.

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>