Styles

Below are examples of elements that have been styled using the entries in the styles menu. The contents of the menu change depending on what you have selected when you open the menu.

Block Styles apply to whole blocks of text

This is a regular unstyled paragraph. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

This is paragraph text with the "lead" style applied to it.  (it is larger, and should be used to lead into a story)

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Text that has been indented.

This is text that has been centered.

This text is right-aligned.

"This is a blockquote. It is used to call attention to text that is a direct quote from someone."

Text formats applied by using the format buttons on the toolbar:

Bold text
Italic text
Underline text (do not use this, as it is easily confused with linked text)
Strikethrough text

Links and buttons

This is a link set to open in a new window. There are three types of links - internal (pages in the CMS), external (other websites) and anchor (different position on same page). For anchors, create the anchor (destination on the page) first - click where you want it and hit the flag icon. Then name the anchor so you can link to it.

Buttons are just regular links that have the button style applied to them. Buttons should be a new paragraph block:

This is a default button

This is a blue button

This is a large default button

Read more button

This text block has the Clear floats style applied to it so that it will clear the read more button which automatically floats to the right.

Images 

Images inserted into the content should either be in a new and seperate paragraph like so:

I've also centered it which works well for a large and wide photo like this one. Note that it has no width and height dimensions assigned to it, so it can shrink down to fill the column on wider screens without breaking the page layout.

Or they should be inserted at the beginning of a paragraph and set to align to the left or right using the Image on Left or Image on Right styles:

This image has the style Image on left applied to it. Notice how it floats to the left, and the text flows around it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla. 

This paragraph has the Clear floats style applied to it so it clears the floated image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla. 

This image has the style Image on right applied to it. Notice how it floats to the right, and the text flows around it. Also notice that it was actually inserted at the beginning of this paragraph so it breaks correctly on small screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla. 

Images with borders

(notice this header has the clear floats style applied to it to clear the right floated image)

This image has the Image border on left style applied to it. Note that it floats left and has a thin black border around it.

This image has the Image border on right style applied to it. Note that floats to the right and has a thin black border around it.

Headers can also be linked. This is a linked H2

*** THIS IS THE ANCHOR DESTINATION*** Paragraph text and some bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla. 

This is a linked H3

Paragraph text and some bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla. 

This is a linked H4

Paragraph text and some bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula lectus felis, in ullamcorper ex placerat eget. Suspendisse ultrices, sapien id blandit pulvinar, ipsum ligula iaculis nibh, vel aliquam tellus est a eros. Donec scelerisque, purus eget egestas pulvinar, augue lacus vehicula mauris, quis venenatis est sem vulputate nulla.