people being trained at computers

Applying Styles to Page Content

Cascade Server allows you to apply different preformatted Styles to images or text when editing the Page Content section.

screenshot showing some of the styles-menu drop-down choices: basicTable, leftImage, rightImage, rightCaption, arrowBullets

Getting Started

Page Content:

  1. Page Content: Use the WYSIWYG or HTML to add your body content.
  2. Select the image or the text to which you want to apply the style.
  3. Click on the Styles drop down menu and choose the appropriate style.

What the Styles Do

Advanced Styles

Headings

Apply a heading to text by highlighting text with your cursor. Then choose from the Format drop down menu. Always start with h2 on your page and work down in consecutive order. Do not skip headings and do not use headings for style formatting on your page.

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

Basic Table

basicTable: removes the standard colors and styles from a table leaving you with just text in a table format.

Normal Format Style
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Basic Table Style
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Align Images and Captions

Miami Formal GardenleftImage: aligns the image to the left side of the body content.

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: 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

arrowBullets: changes the bullets to small blue arrows.

  • 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

At this time, other colors may be available but you should only use red to comply with brand guidelines.

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.