Style guide

Building Relationships Through Quality

testing the h1 tag.

testing the h2 tag.

testing the h3 tag.

testing the h4 tag.

testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag. testing a multiple-line <p> tag.

I am a link!!

testing a BLOCKQUOTE <blockquote> with a paragraph or "P" element inside of it. Put things like quotes, callouts, and call to actions in here.

testing the h5 tag.
testing the h6 tag.
  1. testing the <ol><li> tags (ordered list).

How to Create Pages in the Footer Navigation:

The Footer navigation should be composed of Link-To Pages of already existing PlainHTML pages. When your pages in the main menu have been created, simple Click "Add New Page", and select the LinkToPage page type. Then choose the page you wish to use, Give it a name and a URL (the URL must be unique). Organize it under "Bottom Nav"  under navigation then save and launch. The next time you visit the site/refresh the page that link will appear, it will not appear in the save and launch preview.

Image Sizes To Be Aware of:

How to Properly Place the Photo Gallery Drop-In:

Use the setting as follows to follow the design, and then pick the category you want. The first image in the category (which can be controlled by its rank) should be taller than it is wide for the proper crop.

PhotoGallery Options.PNG

Testing 3 column Snippet:

This is a column, put anything in me you would like but make it no wider than 160px or it will mess me up.

 

 

This is a column, put anything in me you would like but make it no wider than 344px or it will mess me up.

You can also add a row above below and remove all the columns to make it fill width and then 3 columns below or above.

 

I am a <p> tag (paragraph) with the custom class "small-text" because i need more characters per line to make it easy to read. This is a column, put anything in me you would like but make it no wider than 160px or it will mess me up.

 
Testing 2 Column Snippet:

This side spans 6 columns wide. The little cell next to me is a gutter to make some breathing room between columns. Don't put text or objects in there. Put things like big chunks of text. Putting a photogallery here? Make it  3 columns of thumbnails!
  This cell is 2 columns wide. Put things like callouts, images and captions in me for the greatest affect.

Testing an Image With the "border-image" custom class applied:

construction-header-image.jpg

Testing Green Callout Box:

includes the custom class "green-box" on the TABLE (<table>) element. Text inside has the custom class "cream-color-text" to both elements.

I am a heading 4 custom class "cream text color"

I am a paragraph custom class "cream-text-color" to use on dark backgrounds like this one.

Testing the Call To Action Button Snippet:

Includes custom class "ui_button" on the <a> element, and custom class "right_arrow" on the FONT (<span>) inside.

Request A Quote

All other custom styles that appear in the custom styles drop-down are used for the Home Page Content Rotator blocks and should not need to be applied as they are already built-in for you in the snippet.