Intermediate Training Customize the Style

Let's take a look at some additional tools to help you customize the style of your content.

Turn on Intermediate Tools

Before we can take a look at the intermediate level tools, we need to turn them on.

To do this:

Click the Design Tools Settings icon in the Jump Menu
Choose Intermediate from the Select a Comfort Level area
Close the Design Tools Settings

You have now turned on some fun new tools to play with.

Colors for Banner Theme

Try it!

Let's start by adjusting the banner theme colors. The Colors for Banner Theme controls are found in the Customize the Style section.

Note: The changes made with the sidebar only impact the current page. Sadly, there is not a way to make a style change with the sidebar that impacts your whole course.

Create Tip Box

There is a lot that you can do with these tools, but it can require you to use your imagination.

To give you an idea of how this works, we are going to create a basic alert like the Important Tip below:

Important Tip

Design Tools for Canvas can be a lot to take in, but can also be a lot of fun.

Try it!

Use the Colors - Basic, Spacing and Borders tools to transform the heading and paragraph below to look like the important tip box.

Important Tip

Tip Text

Floated Images and Lists

If you float an image to the left of a list, you may notice that the numbers or bullets do not have enough clearance.
You can use the spacing tool to adjust the right margin of the image
Or you can adjust the left margin of the list
That will give you more space

Colors and Tables

You can use the Apply To section to target parent elements.

Text	Date	Percent	Number	Currency
Total			1,010	$1,390.39
Aardvark	12/25/2013	12%	100	$12.00
Platypus	07/04/1776	14%	77	$1.23
Koala	01/01/2001	1%	0	$0.50
Rhinoceros	11/11/2011	11%	-11	$111.11
Alligator	01/26/2014	23%	652	$19.53
Manatee	01/02/2003	45%	14	$925.00
Narwhal	12/07/1941	3%	123	$321.01
Giant Salamander	12/13/2014	36%	55	$0.01

Color Contrast Accessibility Rating

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Beware of Complex Styling

Making sure that you meet accessibility guidelines can get difficult when working with complex items like the example below.

The rating you see when changing the background color of a parent element does not reflect the accessibility of all child elements.

Some basic text

Link to somewhere and some text

Alerts, Highlights, and Emphasis

Draw attention to content by adding block alert styles and highlights to content.

Options include styles pulled from the Canvas style guide as well as styles created specifically for Design Tools.

Block Alerts/Highlights

Canvas Style Guide

Alert

Alert-Error

Alert-Success

Alert-Info

Well

Design Tools Specific

Message Heading Tip

Message Heading Info

Message Heading Success

Message Heading Warning

Message Heading Danger

Message Block Tip

Message Block Info

Message Block Success

Message Block Warning

Message Block Danger

Bootstrap Alerts

Alert-Primary

Alert-Secondary

Alert-Success

Alert-Danger

Alert-Info

Alert-Light

Alert-Dark

Bootstrap Callouts

Callout Primary

Callout Secondary

Callout Success

Callout Danger

Callout Info

Callout Light

Callout Dark

Try It!

Use the text below to create some alerts and highlights

Turn an existing element into a block alert by placing your cursor in that element and choosing an alert/highlight style.

If you want to wrap a group of elements in an alert/highlight:

Highlight the content in the editor with your cursor
Click the Wrap Selection in a block alert button

You can change to a different style as needed by using the Apply To controls.

Text Emphasis/Highlights

The Text Emphasis/Highlights tool allows you to draw focus to selected words or phrases with a variety of styles. Highlight the relevant text in the rich content editor and then choose a style. Highlighted text uses the html emphasis (<em>) tag.

Canvas Style Guide

Basic
Muted
Text-Warning
Text-Error
Text-Info
Text-Success

Design Tools Specific

Highlight Yellow
Highlight Orange
Highlight Red
Highlight Blue
Highlight Green

Bootstrap Text

Bootstrap Text Primary
Bootstrap Text Secondary
Bootstrap Text Success
Bootstrap Text Danger
Bootstrap Text Warning
Bootstrap Text Info
Bootstrap Text Light
Bootstrop Text Dark

Bootstrap Badges

Bootstrap Badge Primary
Bootstrap Badge Secondary
Bootstrap Badge Success
Bootstrap Badge Danger
Bootstrap Badge Warning
Bootstrap Badge Info
Bootstrap Badge Light
Bootstrop Badge Dark

Bootstrap Pill Badges

Bootstrap Pill Badge Primary
Bootstrap Pill Badge Secondary
Bootstrap Pill Badge Success
Bootstrap Pill Badge Danger
Bootstrap Pill Badge Warning
Bootstrap Pill Badge Info
Bootstrap Pill Badge Light
Bootstropa Pill Badge Dark

Try It!

Use this text to practice adding emphasis and highlights to selected text.

Customize Color Palette

Okay, I saved the best for last
(or at least one of my favorites)

Try It!

Practice customizing the color palette.

Remove a row of colors
Adjust an existing color (remember to save changes)
Add some colors by entering hexadecimal values
1. #090E29, #2E325A, #304C78, #2594A2, #56BDA2, #DBB23C
Pull colors from an image
Reset to Default

Let's go into the Add Advanced Elements section