Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Apply Formats

Pre-defined formats are available in the WYSIWYG to apply structure and design to your content.

  • Apply formats to establish content structure (e.g., headings and paragraphs)
  • Apply formats to enhance visual appeal of content (e.g., displaying an image as a circle) or to adjust placement and layout

Click the button below to see examples on the CMS Demo site of every format available.

Examples of ALL the Formats

Applying Formats

Formats menu opened in the WYSIWYG

Headings

Designating page headings is very important for accessibility and search engine optimization. There are six headings available which should be used to reflect hierarchy of page content. For example, the primary topic of the page should be the first heading and assigned Heading 1; subheadings (Heading 2, Heading 3, etc.) should be properly nested to reflect the sections and sub-sections of the page.

  1. Select the text to make a heading
  2. From the Formats menu, select Heading > Heading (Number) 

Inline

The single option of < > code allows code such as HTML to be displayed on the page without the CMS trying to render it. It's not likely to be used often, so unless you're teaching your website visitors how to program in code, you may ignore it.

Note: If you are an advanced website manager and need to add custom code to your site, see Advanced Scripts.

Blocks

There are two block elements that may come in handy while formatting your content.

  1. Paragraph - While the WYSIWYG automatically creates a paragraph each time you press Enter, there may be times when you need to manually create a paragraph out of a selection of text. Select the text in the WYSIWYG and then from the Formats menu select Blocks > Paragraph.
  2. Blockquote - Insert a quote by selecting the text and then from the Formats menu select Blocks > Blockquote.
Here's a quote! It's hard to mistake it for anything else!

Blocks options Div and Pre are not likely to be used on your site, so they can be safely ignored.

Custom

Custom styles are available to enhance visual appeal of an element or to adjust its placement or layout.

Images
Turn an image into a circle, or float it to the left or right of content; more on applying styles to images.
Applicable styles: circle, floatleft, floatright

Links
Convert a link into a button or a call to action; more on applying styles to links.
Applicable styles: btn, btn wide, btn ghost, btn ghost wide, CTA

Tables
Style a table to have alternating rows of color, or remove the border; more on applying styles to tables.
Applicable styles: alt, noborder

Paragraphs & Headings
Add a rule above or below a paragraph or heading to display a visual separator, or use the "clear" style to prevent overlapping paragraphs (see tip). Select the paragraph or heading and then select the desired style.
Applicable styles: rule-top, rule-bottom, clear

See reference guide of where each style can be applied.

Tips

Applicable styles for each element are listed in the Custom overview above. Here's a quick reference guide for each style.

The custom styles menu.btn, btn wide, btn ghost, btn ghost wide, CTA
Apply styles to links.

circle
Apply style to images.

alt, noborder
Apply styles to tables.

rule-top, rule-bottom
Apply styles to paragraphs and headings.

floatleft, floatright
Apply style to an element such as an image or video to float it to the left or right side.

clear
Apply style to an element such as a paragraph to prevent overlapping content. More on using clear.

If you're finding that a custom style is being applied to the wrong element, you can specify the element you want by selecting it in the tag path displayed at the bottom left of the WYSIWYG window. As you click on various elements in the WYSIWYG, you'll see the tag path for each element, such as:

p >> img

The p represents a paragraph, and the img represents an image within in. To apply a custom style to either the paragraph or image, click on the appropriate tag before applying the style.

Sometimes when you place an image within a paragraph, the image may take up more vertical space than the text. If there is another paragraph that follows, it will begin below the text rather than the image. This will cause a "staggered" effect, especially if there is an image in the following paragraph. Applying the clear style to paragraphs will prevent this.

For each paragraph, use the tag path to select the p, then select the clear style from the Formats > Custom menu.

Before Clear
Example of paragraphs where images create a staggered effect.

After Clear
Example of paragraphs using the clear style and text and images are aligned properly.

The clear style can be used for other elements too to define set boundaries for content. Clearly, it's a good thing!

The formats and custom styles available in the WYSIWYG are pre-defined to conform to the university's branding, so we highly recommend adhering to what is provided. Many of the formats and custom styles are locked down to prevent modifications.

If a custom style is absolutely required, please contact it-help@cmu.edu for consideration.