Content Styles

Overview

The content editor box allows you to assign custom classes/styles to elements in the content area of pages, articles, etc.

You can access the styling options by using the drop-down menus across the top of the editor box.

Custom Buttons

There are three 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."

Note: You will need to apply the button style first, and then you can setup the link for the button.

Adding Button Icons

You can add a custom icon to the name of a button by adding a "span" element to an "a" anchor tag. The following code example will display the large button (seen above) with a "sun" icon:

<a href="http://www.google.com" class="button-large"><span class="icon icon-sun"></span>Large Button</a>

The bolded portion in the example above shows the code added with the icon name.

List of available icons and their names: http://mk033.monkpreview.com/_assets/fonts/icons/

Call Out Section

To highlight important information within your content, a "div tag" can be assigned with a class of "div-callout," which will center the content and place it within a white box. To add this in, you will need to highlight your text and select the "div" option under the "Paragraph" dropdown. Then with your text still selected, choose the "Formats" dropdown and select "div-callout".

Below is an example of the code structure for this option, which you can copy and replace the content portions with your own.

<div class="div-callout">

<h2>Call to Action Style</h2>

<p>Praesent metus leo, mollis malesuada egestas sed, euismod sollicitudin lacus. Phasellus et mi sed neque tincidunt interdum sed sit amet neque. Nullam nunc velit, efficitur at bibendum nec, fermentum sit amet felis. Quisque sit amet bibendum quam. Cras diam arcu, ullamcorper eget venenatis et,.</p>

<p><a href="http://www.google.com" class="button-large"><span class="icon icon-star"></span>Please Do This</a></p>

</div>