Style Guide for Vignette Content Management

Captions should be short and concise

Most of the styles used with content management sites are built into the display templates, and do not need to be applied within individual content instances. Styles shown within the OU editor are not necessarily the styles that will be applied to the web page. To see how styles are applied to your site, make sure to [Save] your changes and then review your work after saving.

When copying and pasting tables and text into articles, be sure to remove any formatting that may be included. Formatting can be removed by selecting 'Remove Formatting' from the Format menu or by toggling the 'Paste as Plain Text' button before pasting copied/cut text into the editor.

Images

All images should be sized and optimized for use on the web. Images that convey a portion of the content of an article but that do not have captions must include alternative text or "ALT" tags (which will be 'Title' fields in OU). Decorative images that do not have captions should include a set of “double quotes” to indicate empty alternative text.

Decorative images should be applied to articles using the 'Insert/Edit Image' function. Images will display in the upper right section and may include a caption. Additional images can be added, and will "stack" one on top of another. Images will display in their actual size and cannot be enlarged or constrained using the attached image function. Attached images cannot be hyperlinked.

Images can also be imbedded into the article body using the VCM Image Link function. Imbedding an image should only be used when an article requires the placement of a specific image within a specific section of text. Imbedding images also allows some additional formatting, such as sizing, borders, and spacing/padding.Text can be formatted to "wrap" around an image by changing the Alignment property from "default" to "left." Imbedded images can be hyperlinked using the VCM Hyper Link function.


Heading Styles

Heading styles are not just visual style elements. Headings help separate content into sections, and most accessibility tools and search engines use headings to navigate and index web page content.

Heading 1

123

 

Heading 1 is reserved for article titles and should not be used in the body of an article. Article titles are automatically displayed, and do not need to be written out in the article body.

Heading 2

Heading 2 is used to indicate main sections of your article content. Heading 2 can also be used to highlight a single section of an article, even if additional sections do not exist.

Heading 3

Heading 3 is used to indicate sub-sections of large articles.

Heading 4

Heading 4 can also used to indicate sub-sections of large articles.

Heading 5

Heading 5 can also used to indicate sub-sections of large articles.

Heading SIX

Heading 6 can be used for paragraphs and lists within sub-sections of large articles.

Font and Text Styles

Font and text styles are managed by style sheets within the Vignette Content Management system. Acceptable font styles include bold, italic, and underlined.

To maintain consistency of style, do not use different fonts, font colors,font sizes and font styles within articles

Text in articles is left-justified by default.

Avoid centering text
unless necessary

Avoid justifying text to the
right unless necessary

Blocks of text can be indented to help
separate content between sections.

List styles

Use un-ordered (bulleted) lists to group similar items when no particular order is important:

  • item one
  • item two
  • item three

Use ordered (numbered) lists to group items when a particular order is important:

  1. first item
  2. second item
  3. third item

Link Function

Imbedded links to external URLs should open in a new window

Imbedded links to channels should NOT open in a new window

Imbedded links to content instances should NOT open in a new window

Imbedded links to static files should open in a new window

Tables

Tables can be pasted into articles from other sources or created from the Insert menu. Be sure to remove formatting from tables pasted into articles from other sources. Formatting options for tables includes borders, cell spacing and padding, and position. Table height and width can be set by percentage or by exact pixel dimension.

Example of a table with a 1 pixel border, set to 50% width:

  Column 1 Column 2
Row 1 item item
Row 2 item item

Example of a table with no border, set to 250 pixels wide:

  Column 1 Column 2
Row 1 item item
Row 2 item item

Example of a table with a 1 pixel border, 10 points of padding, 5 points of spacing, set to 705 pixels wide, with a bold style applied to column and row headings:

  Column 1 Column 2 Column 3 Column 4 Column 5 Column 6
Row 1 item item item item item item
Row 2 item item item item item item
Row 3 item item item item item item

Contact Info

IT Help Line

  • 801-581-8182
  • fax: 801-581-6081

Related Information