Theme Test Page

This page displays all the Theme styling created by the Theme Designer that you can use to add rich formatting effects to your website content. 

We recommend that you use Formats and Custom Formats to style your content so that your content can be governed by the Theme.  In this way, if your Theme changes, your content will change along with it.

TIP: To maintain consistency across the entire website, Site Managers should consider disabling the Rich-text Editor's font and size selections in the Site Settings to enforce the exclusive use of these formats by all content editors.

Please don't Edit or Delete this Page.  You'll need it later when testing your Theme changes.


Formats
: The following content styles are available from the "Format" Pick List in the Rich-text Editor menu.

 

Heading 1 (h1)

 

Heading 2 (h2)

 

Heading 3 (h3)

 

Heading 4 (h4)

 

Heading 5 (h5)

 

Heading 6 (h6)

 
this is body text that is outside of any HTML tags such as paragraph tags.
this is bold text that is outside of any HTML tags such as paragraph tags.
this is italics text that is outside of any HTML tags such as paragraph tags.

This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. This text is in a paragraph HTML tag. 


text link (a)

address

 

preformatted

 

blockquote

Line (hr)


 

Unordered List (ul)

 

  • list
    • list
    • list
  • list

 

Ordered List (ol)

  1. list
    1. list
    2. list
    3. list
  2. list
  3. list

 


Custom Formats
: The following content styles are available from the "Custom Format" Pick List in the Rich-text Editor menu (and are included in all Themes created by the Theme Designer).

 

.image-left-primary

headshot-picture.jpgThis custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image.  This custom format will float the image (img tag) to the left, apply the primary color of the Theme, and wrap any text next to it around the image. 

 

.image-left-secondary

headshot-picture.jpgThis This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image. This This custom format will float the image (img tag) to the left, apply the secondary color of the Theme, and wrap any text next to it around the image.
 


.image-right-primary

headshot-picture.jpgThis custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.This custom format will float the image (img tag) to the right, apply the primary color of the Theme, and wrap any text next to it around the image.

 

.image-right-secondary

headshot-picture.jpgThis custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image. This custom format will float the image (img tag) to the right, apply the secondary color of the Theme, and wrap any text next to it around the image.

 

You can apply these Custom Formats to any link ("a" tag) to style them as buttons. Ideally, only one primary button should be on any one page, and should represent the 'call to action' for your site visitors.  Secondary buttons should be used for any other buttons you might want to add to you page without distracting your visitors from the primary button. Two sizes are available and created by the Theme Designer.

.link-button-primary-large

Large Primary Button

.link-button-secondary-large

Large Secondary Button

 

.link-button-primary-small

Small Primary Button

.link-button-secondary-small

Small Secondary Button

 

.link-menu-item

 The following links ("a" tag) can be styled to create quick and easy vertical menus within common regions where a full-blown Menu Region is not necessary.

link1 link2 link3

 

 

.link-content-more

 

 

.paragraph-indent

This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented. This paragraph (p tag) is indented.

 

.paragraph-box-primary

This paragraph (p tag) colored with the primary color of the Theme. This paragraph (p tag) colored with the primary color of the Theme. This paragraph (p tag) colored with the primary color of the Theme. This paragraph (p tag) colored with the primary color of the Theme. This paragraph (p tag) colored with the primary color of the Theme. This paragraph (p tag) colored with the primary color of the Theme.

 

.paragraph-box-secondary

This paragraph (p tag) colored with the secondary color of the Theme. This paragraph (p tag) colored with the secondary color of the Theme. This paragraph (p tag) colored with the secondary color of the Theme. This paragraph (p tag) colored with the secondary color of the Theme. This paragraph (p tag) colored with the secondary color of the Theme.

 

.paragraph-box-example

This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples. This paragraph (p tag) is for examples.

 

.paragraph-box-notice

This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices. This paragraph (p tag) is for notices.

 

.paragraph-box-warning

This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings. This paragraph (p tag) is for warnings.

 

.text-annotate

This is text and this text is annotated.

 

.text-box-primary

This is a primary text box. 

 

.text-box-secondary

 This is a secondary text box.

 

.text-box-example

This is a text example.

 

.text-box-notice

This is a text notice.

 

.text-box-warning

This is text warning.

 

.text-highlighter

This text is highlighted.

 

.text-fineprint

This text is fineprint.

 

.text-quote

"Opportunity is missed by most people because it is dressed in overalls and looks like work." - Thomas Edison

 

 


Buttons
: These buttons are used by the system's interactive features and created by the Theme Designer. You can use then in Designer Regions and in Custom Page Styles.

Software Input Submit Primary/Secondary: Link
Primary Button Secondary Button
Software Input Submit Primary/Secondary: Input
Software Button
Primary/Secondary: Link
Test Test
Software Input Submit Primary
Software Button Secondary
Test
  Software Input Submit Primary/Secondary: Link
Test Test
Software Input Submit Secondary Small: Input

Software Input Submit Secondary Small: Link
Test
Software Input Submit Small Secondary and Software Button Small Secondary
Test
Powered by liveSite