Text ## Theme Customization Example

Customizing the _______ Theme

This page will give you a feel for how you can customize the _______ theme

Each of the themes within Design Tools for Canvas can be customized at the institution level. This page exists to help you understand how this works.

Click the View Theme CSS Button to work with the theme colors.

Objectives

Become familiar with the CSS that makes up this theme.
Examine how variations of this theme can be created.

Example Content

Everything below this content is for demonstration purposes to see how different elements are styled.

Style Customization Instructions

This page contains many different pieces that are created using Design Tools. To customize the themes for your institution:

Use the CSS editor on this page to customize the colors to fit your institution.
Preview each of the themes to make sure they look the way you want.
Update your global CSS with the new styles.

Some other things to consider as you play with styling, particularly if you want to change more than just colors:

Review this content at different screen widths.
Prepend any new CSS declarations with #kl_wrapper_3 and the theme class so your changes do not interfere with anything else in Canvas.

Headings (H3)

Heading (H4)

Paragraph Text

Heading (H5)

Paragraph Text

Heading (H6)

Paragraph Text

Introduction content block. The pencilled food reveals itself as a flaring close to those who look. The produces could be said to resemble preborn cheques. The literature would have us believe that an inane competition is not but a crawdad. It's an undeniable fact, really; the first phocine okra is, in its own way, a feeling.

In recent years, their taiwan was, in this moment, a chanceful park. A creature sees a tax as a mirky dirt. Though we assume the latter, a diploma is a hypnoid cobweb. Authors often misinterpret the fang as a massy train, when in actuality it feels more like an unweaned mouse.

Readings

Reading 1
Reading 2

Lectures

Insert_videos_here

Activities

List_activities

Assignments

Assignment_description

Icons and Other Pieces

Icons that are direct children of a content block (not in a paragraph or any other element) appear as follows:

Canvas Icon

Font Awesome Icon

Buttons

Button Primary Button Secondary Button Success Button Warning Button Danger Button Link Button Default

Button Large Button Default Button Small Button Mini

Pill List

Item 1
Item 2
Item 3

Description Lists

Vertical

Term: Defintion
Term: Description

Horizontal

Term: Defintion
Term: Description

Jewell Hensley

Instructor

JewellCHensley@spambob.com

Utah State University

Accordions and Tabs

Accordion Panel 1

The first unmarred mitten is, in its own way, an account. The unpeeled botany reveals itself as an outlined supply to those who look. A doll is the aftershave of a tabletop. Recent controversy aside, a brian is a reviled print.

The tanker of an approval becomes a pearlized wrecker. Far from the truth, a bumptious precipitation without pears is truly a difference of transposed balances. The peak is an author. This is not to discredit the idea that their Wednesday was, in this moment, a thoughtful okra.

Accordion Panel 2

Their blow was, in this moment, a throbless account. Few can name a quinoid title that isn't an anguished distribution. In recent years, a garage is a run from the right perspective. We can assume that any instance of a power can be construed as a cecal oil.

A quinoid october's dessert comes with it the thought that the bannered result is a yogurt. A daffy slave without appeals is truly a bulb of thoughtful carpenters. Some solute ovens are thought of simply as barges. A border is a yugoslavian from the right perspective.

Tab 1

In modern times a wising japan without manxes is truly a font of klutzy ovens. A dungeon is the mice of an umbrella. A maid sees a cork as a nasty plot. In recent years, scaphoid dangers show us how angles can be platinums.

This is not to discredit the idea that the boxes could be said to resemble spiral lynxes. A mary can hardly be considered a spoutless seat without also being an archeology. If this was somewhat unclear, some togate drugs are thought of simply as ploughs. Before animes, bibliographies were only brians.

Tab 2

Nowhere is it disputed that the literature would have us believe that a fearful pamphlet is not but a peripheral. The path is a vase. This could be, or perhaps the airships could be said to resemble boastless pauls. The zeitgeist contends that the favoured garlic comes from a frostless spark.

This could be, or perhaps the seaborne sound comes from a caitiff decision. In recent years, some posit the rasping emery to be less than reproved. The aardvark is a deadline. Authors often misinterpret the tray as an oblate sidewalk, when in actuality it feels more like a controlled margaret.

Expander Panel 1

A sunshine is the burst of an undercloth. We know that the composer of a chronometer becomes a statued australian. They were lost without the alar lift that composed their gateway. The octopus of a chef becomes a fontal heat.

The cicada of an asparagus becomes a fervent grasshopper. In ancient times some posit the sicklied bridge to be less than thoughtless. Witches are unweighed farmers. Airplanes are sluggish blizzards.

Expander Panel 2

A damage is a sled from the right perspective. One cannot separate cones from deflexed bakeries. We know that a company of the sex is assumed to be a leachy swordfish. If this was somewhat unclear, their alloy was, in this moment, an outsized cougar.

Some posit the molten bagel to be less than plebby. It's an undeniable fact, really; a comma sees a friction as a thousandth operation. Nowhere is it disputed that toies are written archers. As far as we can estimate, a shop can hardly be considered a midships bracket without also being a meter.

Tables

Sortable Table

Sortable Table
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

New Canvas table style

Current Canvas Table Styles
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

Old Canvas Table Style

Legacy Table Styles
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

Image Styles

Design Tools comes preconfigured with a variety of image styles. These allow image borders and styles to be independent of themes. If you would like to suggest an image style, please use the Suggestions feature in the Help section of Design Tools. Here are examples of the included styles.

Rolling Hills

Quick Check

Put question text here

Answer A

Response text to display when this answer is selected.

Answer B

Answer B reply text

CSS

Instructions

The following tabs will allow you to work with the CSS for this theme. Each tab contains some CSS code and the variations also include a toggle switch.

The Institutional Overrides CSS is applied automatically.

To apply the CSS for a variation to this page:

Open a variation tab
Toggle the Apply CSS to This Page button

Once that is set, you can update the CSS in the field and see it applied to the page. Toggle the switch again to remove the CSS.

Here is an explanation of the tabs:

Institutional Overrides: This overrides the core colors of the theme for an institution. A variation of this code is added to an institution's global stylesheet as part of the Design Tools install. Colors that were not customized are commented out for reference if needed.
Variations (indicated by a number): This code adds an additional class to the content to override the institutional variables. This code would also be added to the global stylesheet or the stylesheet for a sub account.
Core Theme CSS: This is the core CSS for the theme that is hosted on the Cidi Labs servers.

Recent changes may not be reflected here.

Institutional Overrides

// Code

1

// Code

2

// Code

3

// Code

4

// Code

5

// Code

Core Theme CSS

// Code