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

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. Use this page to test your styling after you make changes to your Theme.

We highly recommend that you use Formats and Custom Formats within the Rich-text Editor 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.

NOTE: The "mobile-hide" and "desktop-hide" Custom Formats below are only visible in their perspective modes. ;)


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

 

color-primary

Primary Color


background-primary

         

color-secondary

Secondary Color


background-secondary

         

 

heading-primary

This custom fornat can be added to any heading ("h1-h6" tags) to add any additional special styling to your headings.

Heading Primary

 

heading-secondary

This custom fornat can be added to any heading ("h1-h6" tags) to add any additional special styling to your headings.

Heading Secondary

 

image-primary

headshot-picture.jpgThis custom format will wrap the image ("img" tag) in the primary image styling.

image-secondary

headshot-picture.jpgThis custom format will wrap the image ("img" tag) in the seconday image styling.

 

image-left-primary

headshot-picture.jpgThis custom format will float the image ("img" tag) to the left, apply the primary image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, and wrap any text next to it around the image.

image-left-secondary

headshot-picture.jpgThis custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, and wrap any text next to it around the image. This custom format will float the image (img tag) to the left, apply the secondary image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, 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 image styling, and wrap any text next to it around the image.

 

image-desktop-hide

headshot-picture.jpgThis custom format can be used in conjunction with the previous custom formats to hide an image ("img" tag) when the image is displayed in "desktop mode".  This custom format is useful if an image may not be necessary for desktop visitors.

 

 

image-mobile-hide

headshot-picture.jpgThis custom format can be used in conjunction with the previous custom formats to hide an image ("img" tag) when the image is displayed in "mobile mode".  This custom format is useful if an image may not be necessary for the meaning of the content and takes up too much space on the page when viewed from a mobile device.

 

 

You can apply the Custom Formats below 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. These 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.

link1link2link3

  

link-content-more

This is some example text that would go in front of a link to more content. This is some example text that would go in front of a link to more content. This is some example text that would go in front of a link to more content.  Read on

 

link-desktop-hide

[This link hidden from Desktop visitors.] This custom format can be used with any link ("a" tag) and in conjunction with the previous custom formats to hide a link when displayed in "desktop mode".  This custom format is useful if the link goes to a page that is best viewed accurately from "mobile mode" so you want to hide navigation to the page from all desktop visitors.

 

 

link-mobile-hide

[This link hidden from Mobile] This custom format can be used with any link ("a" tag) and in conjunction with the previous custom formats to hide a link when displayed in "mobile mode".  This custom format is useful if the link goes to a page that can only be viewed accurately from "desktop mode" so you want to hide navigation to the page from all mobile visitors.

 

list-tabs

Tabbed Lists allow you to create tabbed content panels on your pages within the Rich-Text Editor without coding. Click on the heading tabs to show/hide the content panels:

  • Tab 1
    This is the first content panel and will be visible by default when the page is loaded.  This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded. This is the first content panel and will be visible by default when the page is loaded.
  • Tab 2
    This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked. This is the second content panel and will be visible when it's heading link is clicked.
  • Tab 3
    This is the third content panel and will be visible when it's heading link is clicked.
     
    A table or any content with links can be included in the tabbed panel content. A table or any content with links can be included in the tabbed panel content.
    A table or any content with links can be included in the tabbed panel content. A table or any content with links can be included in the tabbed panel content.

    You can also include styled paragraphs lke this one and other items here too.  (Paragraphs can be added using the HTML view.)

 

list-accordian

Accordian Lists allow you to create collapsable/expandable areas of content on your pages within the Rich-Text Editor without coding. Click on the heading links below to expand or collapse the content areas.

  • Heading 1
    This content is collapsed and expanded when the heading link is clicked.
  • Heading 2
    This content is collapsed and expanded when the heading link is clicked.
    This is a table within a content area with links. photo125x125.pngIt will expand and collapse too!
  • Heading 3
    This content is collapsed and expanded when the heading link is clicked.
    1. bulleted list inside a content area
    2. bulleted list inside a content area

Accordian Lists can also be created for numerically ordered lists ("ol" tag):

  1. Heading 1
    This content is collapsed and expanded when the heading link is clicked.
  2. Heading 2
    This content is collapsed and expanded when the heading link is clicked.
    This is a table within a content area with links. photo125x125.pngIt will expand and collapse too!
  3. Heading 3
    This content is collapsed and expanded when the heading link is clicked.
    1. bulleted list inside a content area
    2. bulleted list inside a content area

 

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. Any content including links could go here.

 

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. Any content including links could go here.

 

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. Any content including links could go here.

 

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. Any content including links could go here.

 

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. Any content including links could go here.

 

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. Any content including links could go here.

 

paragraph-no-margin

This surrounding paragraph has no bottom margin...

This paragraph (p tag) has no top or bottom margin. This paragraph (p tag) has no top or bottom margin. This paragraph (p tag) has no top or bottom margin. This paragraph (p tag) has no top or bottom margin. This paragraph (p tag) has no top or bottom margin. This paragraph (p tag) has no top or bottom margin. Any content including links could go here.

This surrounding paragraph has no top margin...

 

paragraph-no-margin-top

This surrounding paragraph has no bottom margin...

This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. This paragraph (p tag) has no top margin. Any content including links could go here.

 

paragraph-no-margin-bottom

This paragraph (p tag) has no bottom margin. This paragraph (p tag) has no bottom margin. This paragraph (p tag) has no bottom margin. This paragraph (p tag) has no bottom margin. Any content including links could go here.

This paragraph has no top margin.

 

paragraph-desktop-hide

This custom format can be used in conjunction with the previous custom formats to hide a paragraph ("p" tag) when the paragraph is displayed in "desktop mode".  This custom format is useful if a paragraph may not be necessary for desktop visitors, perhaps it contains a message meant only for mobile visitors.

 

paragraph-mobile-hide

This custom format can be used in conjunction with the previous custom formats to hide a paragraph ("p" tag) when the paragraph is displayed in "mobile mode".  This custom format is useful if a paragraph may not be necessary for the meaning of the content and takes up too much space on the page when viewed from a mobile device.

 

table-left

Table content will expand the table to the right.

Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table. Text that will float around the right side of the table.

 

table-right

Table content will expand the table to the left.

Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table. Text that will float around the left side of the table.

 

table-center

Table content will expand the table.

 

table-primary

Table Cell Header (th.table-primary) tag
Table Cell Data (td.table-primary) tag

 

table-secondary

Table Cell Header (th.table-secondary) tag
Table Cell Data (td.table-secondary) tag

 

table-desktop-hide

This custom format can be used to hide a table ("table" tag) or in conjunction with the previous custom formats when the table is displayed in "desktop mode". This custom format is useful if a table content is targeted at mobile visitors only.

 

table-mobile-hide

This custom format can be used to hide a table ("table" tag) or in conjunction with the previous custom formats when the table is displayed in "mobile mode". This custom format is useful if a table may not be necessary for the meaning of the content and takes up too much space on the page when viewed from a mobile device.

 

table-row-header, table-row-body, table-row-footer

Table Row Footer (tfoot.table-row-footer) tag
Table Row Header (thead.table-row-header) tag
Table Row Body (tbody.table-row-body) tag

 

table-cell-header, table-cell-data

Table Cell Header (th.table-cell-header) tag Table Cell Data (td.table-cell-data) tag
Table Cell Header (th.table-cell-header) tag Table Cell Data (td.table-cell-data) tag

 

table-cell-mobile-fill, table-cell-mobile-wrap

table-cell-mobile-fill is used to force a table cell ("td" tag) to the full width of the screen in "mobile mode".  This allows tables with alot of content to "wrap" when viewed on mobile devices.

This custom format should be used on the first table cell in the table's first row.  All subsequent table cells in the same table row should have the table-cell-mobile-wrap custom format in order for all table cells to wrap correctly when viewed on mobile devices.

table-cell-mobile-wrap is used to force a table cell ("td" tag) to wrap in "mobile mode".  This allows tables with alot of content to "wrap" when viewed on mobile devices.

This custom format should be used on all BUT the first table cell in the table's first row.  All subsequent table cells in the table should have the table-cell-mobile-wrap custom format too in order for all table cells to wrap correctly when viewed on mobile devices.

 

table-cell-desktop-hide

This custom format can be used to hide a table cell ("td" tag) or in conjunction with the previous custom formats when the table cell is displayed in "desktop mode". This custom format is useful if a table cell may only be targeted at mobile visitors.

 

table-cell-mobile-hide

This custom format can be used to hide a table cell ("td" tag) or in conjunction with the previous custom formats when the table cell is displayed in "mobile mode". This custom format is useful if a table cell may not be necessary for the meaning of the content and takes up too much space on the page when viewed from a mobile device.

 

text-annotate

This is text and this text is annotated. Any content including links could go here.

 

text-box-primary

This is a primary text box.  Any content including links could go here.

 

text-box-secondary

 This is a secondary text box. Any content including links could go here.

 

text-box-example

This is a text example. Any content including links could go here.

 

text-box-notice

This is a text notice. Any content including links could go here.

 

text-box-warning

This is text warning. Any content including links could go here.

 

text-desktop-hide

This custom format can be used in conjunction with the previous custom formats to hide text ("span" tag) when text is displayed in "desktop mode".  This custom format is useful if some text may not be necessary for desktop visitors, perhaps it contains a message mean't only for mobile visitors.

 

text-mobile-hide

This custom format can be used in conjunction with the previous custom formats to hide some text ("span" tag) when the text is displayed in "mobile mode".  This custom format is useful if some text may not be necessary for the meaning of the content and takes up too much space on the page when viewed from a mobile device.

 

text-highlighter

This text is highlighted. Any content including links could go here.

 

text-fineprint

This text is fineprint.

 

text-quote

"Any content including links could go here." - Author

 

video-primary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling.  For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-secondary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling.  For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-left-primary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-left-secondary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary styling and float the video to the left of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-right-primary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's primary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-right-secondary

This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video. This custom format will wrap the video ("object", "iframe", or HTML5 "video" tag) in the theme's secondary color styling and float the video to the right of any text next to it. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-mobile-hide

This custom format can be used in conjunction with the previous custom formats to hide the video ("object", "iframe", or HTML5 "video" tag) when the video is displayed in "mobile mode".  This custom format is useful if some videos may not be necessary for mobile visitors, perhaps it will not play on all mobile devices or is not intended for mobile visitors. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

video-desktop-hide

This custom format can be used in conjunction with the previous custom formats to hide the video ("object", "iframe", or HTML5 "video" tag) when the video is displayed in "desktop mode".  This custom format is useful if some videos may not be necessary for desktop visitors, perhaps it is not intended for desktop visitors. For compatibility, this Custom Format is applied to the video's parent container, typically the paragraph ("p" tag) surrounding the video.

 

 


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

input.software_input_submit_primary,
input.software_input_submit_secondary
a.software_button_primary,
a.software_button_secondary
Primary Link Secondary Link
input.software_input_submit_small_primary,
input.software_input_submit_small_secondary
a.software_button_small_primary
a.software_button_small_secondary
Primary Link Secondary Link
input.software_input_text
a.software_button_tiny_secondary
Tiny Link

 

Button Size Comparisons:

Primary LinkSecondary Linklink-button-primary-largelink-button-secondary-large

Secondary Linklink-button-primary-smalllink-button-secondary-small

 

File Links:

Links to common Office productivity files may have an image in front of the link to identify that the link opens a file as opposed to opening another web page.

example.pdf   example.doc   example.docx   example.xls   example.xlsx   example.ppt   example.pptx

 

Responsive: These formats are triggered based on the width of the browser viewing them. They are good for adding content to responsive designs.

To activate them, they must be defined in your Custom Theme and then view this page using that theme.

Responsive versions of the .desktop-hide and .mobile-hide custom formats (above) are also included in the example Custom Theme called "custom.css".

To See these in action, go into Theme Preview Mode and then view this page and resize the width of your web browser.

These responsive custom formats will have a green dashed border in "Edit Mode" so that they can easily be identified when editing content.

.image-mobile-fill, .video-mobile-fill

rte.png

.link-mobile-fill

Add this to expand a button to the full width of it's container when viewed on a mobile (pocket size) device.

Button Link

 

Ordinary Table Behavior

1

Lorem ipsum dolor sit amet

2

Lorem ipsum dolor sit amet

3

Lorem ipsum dolor sit amet

4

Lorem ipsum dolor sit amet

5

Lorem ipsum dolor sit amet

6

Lorem ipsum dolor sit amet

7

Lorem ipsum dolor sit amet

8

Lorem ipsum dolor sit amet

9

Lorem ipsum dolor sit amet

10

Lorem ipsum dolor sit amet

Responsive Table Behavior

1

Lorem ipsum dolor sit amet

2

Lorem ipsum dolor sit amet

3

Lorem ipsum dolor sit amet

4

Lorem ipsum dolor sit amet

5

Lorem ipsum dolor sit amet

6

Lorem ipsum dolor sit amet

7

Lorem ipsum dolor sit amet

8

Lorem ipsum dolor sit amet

9

Lorem ipsum dolor sit amet

10

Lorem ipsum dolor sit amet

 

Here are all the responsive table custom formats included in the example "custom.css" Custom Theme.

 

.table-cell-width10

1

Lorem ipsum dolor sit amet

2

Lorem ipsum dolor sit amet

3

Lorem ipsum dolor sit amet

4

Lorem ipsum dolor sit amet

5

Lorem ipsum dolor sit amet

6

Lorem ipsum dolor sit amet

7

Lorem ipsum dolor sit amet

8

Lorem ipsum dolor sit amet

9

Lorem ipsum dolor sit amet

10

Lorem ipsum dolor sit amet

 

.table-cell-width20

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width25

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width33

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width50

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width75

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width80

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width90

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

You can mix and match the responsive table cells to create unique layouts for your content.

 

.table-cell-width10 + .table-cell-width10 + .table-cell-width33 + .table-cell-width50

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

 

.table-cell-width25 + .table-cell-width50 + .table-cell-width25

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas arcu nisl, sit amet consequat tellus molestie eget. Integer porttitor quis leo vel luctus. Proin accumsan sollicitudin nibh in varius.

Powered by liveSite Get your free site!