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.
address
preformatted
blockquote
Line (hr)
Unordered List (ul)
- list
- list
- list
- list
Ordered List (ol)
- list
- list
- list
- list
- list
- 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
|
color-secondary Secondary Color
|
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 |
image-secondary |
image-left-primary
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. 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
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. 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
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. 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
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. 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
This 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
This 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 |
link-button-secondary-large |
link-button-primary-small |
link-button-secondary-small |
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.
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. 
It will expand and collapse too! - Heading 3
This content is collapsed and expanded when the heading link is clicked.- bulleted list inside a content area
- bulleted list inside a content area
Accordian Lists can also be created for numerically ordered lists ("ol" tag):
- 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. It will expand and collapse too! - Heading 3
This content is collapsed and expanded when the heading link is clicked.- bulleted list inside a content area
- 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.