Applying Headings and Styles to Page Content
Cascade Server allows you to apply different preformatted Styles to images or text when editing the Page Content section.
Getting Started
- Page Content: Use the WYSIWYG or HTML to add your body content.
- Select the image or the text to which you want to apply the style.
- Click on the Formats drop down menu and choose the appropriate style from Headings or Custom.
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
What the Styles Do
- How to set up a basic table
- How to align images and captions to the left or right and have the text flow around them
- How to create a bulleted list with arrow bullets
- How to create a button
- How to hide elements
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
leftImage: 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>
rightImage: 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 red 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
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.
According Style
Accordions allow you to reduce the amount of text that displays on a page at a given time by collapsing content under a header until it is expanded. Using the Accordion Style, you can hide some of your text until the accordion is opened.