Text Style Reference Page

NOTE: This page is not public and is here as a permanent reference for you. We recommend that you do not delete this page.


Use this page as a reference for styling the text contained in the Page Content block. It is intended to demonstrate the styles as they might appear in a fully realized web page and to provide instruction on how to implement them. The styles and formats are all achievable in the Edit mode's Rich Text view by highlighting the text you wish to format and clicking the appropriate button in the WYSIWYG editor. This page demonstrates:

NOTE: See the [Image Style Reference Page] for information on inline image styling.

HEADINGS

There are five heading styles built into the BrownSites numbered 2 through 6 (Heading One is reserved for page titles and is not an option to users). Each style is shown below, followed by a paragraph to demonstrate the spacing relationship between heading and paragraph. To style a heading, highlight the text and choose the proper heading option from the Format dropdown list in the WYSIWYG editor.

Heading Two

Suspendisse luctus viverra mauris eu viverra. Morbi consequat tincidunt nunc, a viverra nulla dignissim eu. Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est. Nullam in tempor libero. Ut ornare massa ac nulla ornare pretium.

Heading Three

Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est. Nullam in tempor libero. Ut ornare massa ac nulla ornare pretium. Suspendisse luctus viverra mauris eu viverra. Morbi consequat tincidunt nunc, a viverra nulla dignissim eu. Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est.

Heading Four

Morbi consequat tincidunt nunc, a viverra nulla dignissim eu. Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est. Nullam in tempor libero. Ut ornare massa ac nulla ornare pretium.

Heading Five

Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est. Nullam in tempor libero. Ut ornare massa ac nulla ornare pretium. Suspendisse luctus viverra mauris eu viverra. Morbi consequat tincidunt nunc, a viverra nulla dignissim eu. Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere.

Heading Six

Ut ornare massa ac nulla ornare pretium. Suspendisse luctus viverra mauris eu viverra. Morbi consequat tincidunt nunc, a viverra nulla dignissim eu. Vestibulum at lectus nunc. Duis rutrum nunc id justo rhoncus posuere. Duis consequat nibh est.

See below for special heading formats designed for your People page profiles.

TEXT STYLES

Paragraph text. This is the default text style and you do not have to do anything to achieve it when entering or pasting new text. If you wish to revert styled text back to this default style, you should select the text and, in the WYSIWYG editor, either click the Remove Formatting button or select Paragraph from the Format dropdown.

More paragraph text to demonstrate spacing. The spacing between paragraphs is a part of the paragraph style and is achieved with a single carriage return.

Link text. A link to web page, a document or an email address will be displayed in the default link style. Move your cursor over the link to see how the link changes when hovering. Link style does not changed when a link has been visited. You do not have to style links; BrownSites applies the formatting automatically. Visit the [BrownSites Wiki] for information on how to insert a link.

Bold text is achieved by highlighting the desired text and clicking the Bold button. Bold text is achieved by highlighting the desired text and clicking the Bold button. Bold text is achieved by highlighting the desired text and clicking the Bold button.

Italicized text is achieved by highlighting the desired text and clicking the Italics button. Italicized text is achieved by highlighting the desired text and clicking the Italics button. Italicized text is achieved by highlighting the desired text and clicking the Italics button. Italics on the web are generally difficult to read and we recommend abstaining from the use of italics.

Underlined text is not permitted as it resembles a popular link style and may be misinterpreted by users.

Small text is achieved by highlighting the desired text and selecting Small Text from the Style dropdown. Small text is achieved by highlighting the desired text and selecting Small Text from the Style dropdown. Small text is achieved by highlighting the desired text and selecting Small Text from the Style dropdown.

Large text is achieved by highlighting the desired text and selecting Large Text from the Style dropdown. Large text is achieved by highlighting the desired text and selecting Large Text from the Style dropdown. Large text is achieved by highlighting the desired text and selecting Large Text from the Style dropdown.

Highlighted text is achieved by highlighting the desired text and selecting Highlight from the Style dropdown. Highlighted text is achieved by highlighting the desired text and selecting Highlight from the Style dropdown. Highlighted text is achieved by highlighting the desired text and selecting Highlight from the Style dropdown. You cannot control the highlight color.

Quoted Text. To use quoted text or to make a block of text standout, you can utilize this blockquote style. Highlight the text and select Blockquote from the Format dropdown. You cannot control the background color nor the width of the block.

LIST STYLES

The following demonstrates the default styling of a bullet list consisting of three levels. You can promote/demote list items via the Indent/Outdent WYSIWYG buttons. You cannot control the shape of the bullets but you can suppress a bullet by selecting the line(s) and choosing No Bullet from the Style dropdown. Note the spacing before and after the list.

  • Bullet list item
  • Bullet list item: A longer bullet list item that wraps to a second line and possibly longer.
  • Bullet list item
    • Bullet list item
    • Bullet list item
    • Bullet list item
      • Bullet list item
      • Bullet list item
  • Bullet list item
  • Bullet list item: Style=No Bullet
  • Bullet list item

The following demonstrates the default styling of a numbered list consisting of three levels. You can promote/demote list items via the Indent/Outdent WYSIWYG buttons.

  1. Numbered list item - first level
  2. Numbered list item - first level
  3. Numbered list item - first level
    1. Numbered list item - second level
    2. Numbered list item - second level
    3. Numbered list item - second level
      1. Numbered list item - third level
      2. Numbered list item - third level
      3. Numbered list item - third level
  4. Numbered list item- first level
  5. Numbered list item- first level
  6. Numbered list item- first level

You can control the style of the numbers on any level of the list by selecting the line(s) and choosing the proper option from the Style dropdown.

  1. Style=Roman-Upper
  2. Style=Roman-Upper
  3. Style=Roman-Upper
  4. Style=Roman-Lower
  5. Style=Roman-Lower
  6. Style=Roman-Lower
  7. Style=Alpha-Upper
  8. Style=Alpha-Upper
  9. Style=Alpha-Upper
  10. Style=Alpha-Lower
  11. Style=Alpha-Lower
  12. Style=Alpha-Lower

TABLES

You can insert tables into your web pages via the WYSIWYG editor. Below is a sample of the default styling. You control the number of columns and rows. Note that Table Headings and Table Footers (the colored row/column) are optional. Visit the [BrownSites Wiki] for information on how to build and edit tables.

  Col 1 Heading Col 2 Heading Col 3 Heading
Row 1 Label
Text aligned left.
Text aligned in the center.

Text aligned right. You can align Headings and Labels, too.
Row 2 Label 3.167 $ 0.33 14,000.06
Row 3 Label
Text can be styled in most of the same ways that other content can be styled. Text can be styled in most of the same ways that other content can be styled. Text can be styled in most of the same ways that other content can be styled.
Table Footer here uses merged cells.

PEOPLE PROFILES

Whether or not you choose to include pictures on your People page you may find these styles helpful in formatting names, titles and descriptions. Apply them by selecting the text and choosing the proper option from the Style dropdown.

First Lastname [Style=Bio Name]

Title or Position [Style=Bio Title]

Biographical description text [Style=Bio Intro]. You may want to apply this style to the first paragraph of each bio if you choose to incorporate photos, dependent upon the image size used. It places the text below the photo rather than wrapping around it.

Visit the [BrownSites Wiki] for information on how to incorporate images into your web pages. The [Image Style Reference Page] also provides additional options for styling images.