Style Samples

Example Headings

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Image Alignment

leftImage:Miami Formal Garden Using the leftImage class aligns the image to the left side of the body content. Using the leftCaption aligns text to the left in italics (generally used as an image caption). The caption needs to be the same width as the image. This requires you to edit the html and add width="xxx" to the paragraph with the style applied. E.g., <p class="leftCaption" width="150">Left Caption Text</p>


Miami Formal GardenrightImage: Using the rightImage class aligns the image to the right side of the body content.

rightCaption: aligns text to the right in italics (generally used as an image caption). The caption needs to be the same width as the image. This requires you to edit the html and add width="xxx" to the paragraph with the style applied. E.g., <p class="rightCaption" width="150">Right Caption Text</p>


Arrow Bullets

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Buttons

redButton: encapsulates text in a red "button" that can then be used as a hyperlink. Red Button


Hidden Text

noShow:  hides text so that it is not displayed on the page.  This is sometimes needed on the rich text widget and SPIF bank items. if pages and widgets only have an image or video embedded with no text, a blank page will display. To get the image/video to show up you must add some text and then apply the noShow style to that text.


Example Accordion Style

This is the first accordionHeader.

This is the content under the first accordionHeader.

This is the second accordionHeader.

This is the content under the second accordionHeader.
You can have more than one line/sentence within the content.

You can also have a list within the accordion content.

  • List Item 1
  • List Item 2

You can also nest accordions

Having accordions within accordions. Unfortunately, nested accordions are not automatically indented (as in this example), so you will have to manually indent each, using the Increase Indent button on the menu bar.