Subpage Styles

Overview

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

Custom Buttons

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).

Text Styles

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.

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>