IRT Logo
Training: The SoM Web Format & Contribute
IRT Information

Edit Text and Apply Text Styles

You will encounter two kinds of text formatting in Contribute:

  1. Block-level or "native" HTML, which includes "Normal" (for normal paragraph) and "Heading 1" through "Heading 6" from the Styles list, where the entire block changes with the setting, regardless of what is selected
  2. Special CSS (Cascading Style Sheets) styles, including everything else on the Styles list, where what is selected influences how the style is applied

Watch Demo

Step 1: Create new headlines and paragraphs

  1. Edit a page and place your cursor within the first paragraph and look for the "Styles" pull-down on the bottom row of buttons, marked either "Normal" or the name of an applied style. After "Normal," the pulldown lists the special CSS styles, followed by the six standard headline block formats (Heading 1 - Heading 6).
  2. Create two new, short paragraphs below the main headline. With your cursor anywhere in the first new paragraph, use the selector to choose "Heading 2." The entire block of text changes. Repeat for the second paragraph.
  3. Place your cursor in the second headline and change the setting back to "Normal"
    Normal: Applies standard paragraph settings
    Heading 1 - Heading 6: Applies standard headline settings from H1 through H6.
Best practices:

  • Always have one Headline 1 headline per page, at or near the top

  • Most of your page text should be "Normal," broken up by "Heading 2" through "Heading 6" headlines

  • Apply special CSS styles sparingly, for function or flavor
Watch Demo

Step 2: Apply special CSS text styles

This is an example paragraph where a number of different CSS styles have been applied. Note that this paragraph is quite ugly as a result.

  1. Select a range of text of your page in Edit mode

  2. Apply one or more of the styles that begin with "text_" using the Styles pull-down (we'll look at the other styles in a moment); try several

  3. Repeat in a headline block

  4. Place your cursor anywhere within a clean paragraph, without selecting any text; apply a style; it affects the entire block
Watch Demo

Step 3: Convert a paragraph to a highlights box

  1. Place your cursor in or at the end of one of your paragraphs, without selecting any text
  2. Apply one of the styles that begin "boxleft_" or "boxright_" using the Styles pull-down
  3. The whole paragraph is converted to a highlights box
  4. Use two single-line breaks (shift-enter) if you need to separate text into "paragraphs" within your highlights box (typing Enter will create two highlights boxes)

Use styles with caution

SoM Web 2.0 contains many more styles than we have discussed here. Some can be used effectively in Contribute, some can't, and some shouldn't be used in Contribute or Dreamweaver. Please review the list of SoM Web 2.0 Styles by Category, and print it out for later reference.

Step 3: Publish and view in browser

You will need to click Publish, then view your page in your Web browser to see the effects of your experiments.

Problems you may encounter

You may have some difficulty editing certain kinds of objects on your Web pages:

  • script
    JavaScript objects (see icon, right), such as encrypted email addresses, can't be edited directly in Contribute, and so must be edited with Dreamweaver. Contact Web Help to request changes to JavaScript objects.
  • The 2.0 format relies heavily on CSS; Contribute allows you to edit the content of CSS <div> containers, but not to insert new ones or change their CSS styles. It is possible to copy a block of text, including CSS divs, paste the text and divs into a new location, and edit the div content. See Designer Pages to learn how to edit designer home and other pages.
  • Avoid using the Font and Font Size pulldowns. Font faces and sizes are standardized and controlled by the School stylesheet. It's risky to depart from what is already available. Start with provided formats and styles and only create new ones if you don't find what you need.

« Previous | Home | Next »