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 1) enter the text you want to turn into a button, 2) highlight it and turn into a link using the link button on the WYSIWYG toolbar:

then 3) highlight the linked text again and choose one of the button options from the styles menu, toward the bottom, to make the button be a link to another page or site. If the button options are greyed out, make sure you have turned the text into a link first. 

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