Purpose

This page is to provide samples that you can cut and paste into a WYSIWIG. This is not the greatest way to do this - because the WYSIWIG creates styles for the formatting rather than just copying the pure HTML. On the other hand, it works and it is visible in the WYSIWIG editor.

You could view source and copy the code -- one downside is that the styles are currently not actually active in the WYSIWYG, which is one plus side for the creation of the styles.

You can also recreate these by using the styles dropdown, but it can be a bit fidgety. Editing the HTML directly is another way to do it, but of course that requires a little HTML knowledge.

Examples

Size Styles for Text

Using specific styles in paragraphs of font can determine the size of your font. Turning on the style will affect your text like below:

Largest text

Larger text

Large text

Normal text

Small text

Smaller text

Smallest text

Lists

• Item 1
• Item 2
• Item 4

1. List two item 1
2. List two item 2
3. List two item 3

Creating a Button

Creating a clickable button is also an option with the styles menu. Drupal has made it simple enough to where you can highlight the text you'd like as a button, turn on "button" in the styles menu, then highlight and click the Link button () to make the button be a link to another page.

This is a Button

This is a Button

This is a Button

This is a Button

A Callout Box is a great way to organize or bring attention to specific content on your website. Highlighting the text that you'd like to appear like this and clicking "callout box" under styles will bring it to look like this.

Text Colors

Always use color choices that provide a lot of contrast for accessibility. Only utilize light font colors over a dark background.

A A A A A A A A A