Core Training Customize the Style

The Design Tools sidebar offers a variety of tools to help you customize the style of your content. These tools are found in the Customize the Style portion of the tools.

The basic tool level allows you to work with:

Images
Links
Tables
Ordered/Unordered Lists

Let's take a look at each of these.

Working with Images

In this next section, we will take a look at styling images. We will float and resize images, add border styles, adjust alt text, etc.

Alt Text, Image Size, Alignment and Style

Try it!

Adjust the alternative text, size, alignment, and border style of the following image.

This is just some random text to wrap around the image. Some posit the dauntless voyage to be less than larine. The zeitgeist contends that a children is the turkish of a glove. We can assume that any instance of a blanket can be construed as a buirdly christopher. What we don't know for sure is whether or not their rhythm was, in this moment, an unclad oval.

A kenya is an unthawed hovercraft. The mated broker comes from a ghastful snake. What we don't know for sure is whether or not authors often misinterpret the radiator as a checky break, when in actuality it feels more like a shopworn blinker. In modern times those values are nothing more than chimes.

Fill Width

Try it!

Toggle the Fill Width switch for the image below which allows the image to fill its container.

Max Width Fill

Use Max Width Fill if you have an image that you do not want to enlarge, but you also do not want students to scroll horizontally to see if the screen size is reduced.

Try it!

Apply Max Width Fill to the image below

Sometimes I just need a break (using html break tag instead of actual word)

Links and Buttons

Typically you will use the default tools in Canvas to create links. Once links are created, you can use Design Tools to style those links.

Try it!

Using Canvas

Turn this text into a link

Change where this link points

Place your cursor anywhere in the link then choose a new destination

Using Design Tools

Change my text

Have me open in a new tab

I have not been visited

I have been visited

Give me an icon

Make me a Button

Change my Style and Size

Tables

While you should not use tables for layout purposes, you often have data that you want to display to your students. Design Tools for Canvas can help.

Create a table

Design Tools was not designed to create tables but to help with existing tables.

Try it!

Use the tools within Canvas to create a 4x4 table below

Table Headings

While Canvas makes it easy to create a table, it doesn't make adding a heading row easy.

Try it!

Try using Canvas tools to set the first row as a heading row with heading cells and a scope to let screen readers know the heading is for the column.

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Foot	Foot	Foot

Add some style

Try it!

Use Design Tools on the table below to:

Create a heading row
Add some style
Make the table sortable

Text	Date	Percent	Number	Currency
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
Total			1,010	$1,390.39

Ordered/Unordered Lists

Canvas allows you to create ordered and unordered lists, but working with those lists can be a little tricky.

The Ordered/Unordered List tool lets you change the number or bullet style of an existing list.

Try it!

Use each of the following lists to practice making the changes described

Changing indent level

The following items can be indented in several ways
Use the tab key
Use the Increase Indent tool in the RCE toolbar
Use the Indent button in the Design Tools sidebar

Changing list Style

You can change the display style of a list using the options in Design Tools (Try it out)

Decimal
Decimal with Leading Zero
Lower Alpha
Upper Alpha
Lower Roman
Upper Roman
None
Default

You can also change bullet styles

Disc
Circle
Square
None
Default

Mix and match styles

Main list level
1. Second level
  1. Third level
  2. Third level
  3. Third level
2. Second level
3. Second level
Main level
Main level

Pill list and Basic Nav Links

Turning a list into a pill list came from the Canvas style guide. Try it on the list below!

Grocery List

Milk
Eggs
Bread
Cheese
Ice Cream

Basic Nav Links is a nice way to style a list of links

Multiple Types

The tools will show any of the options that apply to where you are working in the rich content editor.

Try it!

Select the different elements below to see how the options within the Customize the Style area change.

Here is a list with additional elements inside:

This item has an example link
This item has an image

Or the following image is also a link:

Now let's take a look at making sure our content is accessible