[CSS Preview]
Admin Guide Info Links to an external site.
Use this page to preview custom CSS with the content below the dotted line. Learn more about CSS Preview and how to use this page by visiting the Admin Guide. Links to an external site.
Text ## Design Tools Themes
Customization Example
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_3and 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.
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.
Objectives
- List_objectives
Content Block Heading
Content
Readings
- Reading_list
Content Block Heading
Content
Activities
- List_activities
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
There are a variety of new button styles and size options that have been adapted from Bootstrap (Links to an external site.) available when using Design Tools.
The Canvas button styles are still available, but we recommend transitioning to the new styles as the Canvas styles may be phased out in the future.
Bootstrap Button Styles
Secondary Success Danger Warning Info Light Mid Dark Outline Primary Outline Secondary Outline Success Outline Danger Outline Warning Outline Info Outline Light Outline Mid Outline Dark Link
Button Size Options
Pill List
- Item 1
- Item 2
- Item 3
Description Lists
Vertical
- Term
- Description
- Term
- Description
Horizontal
- Term
- Description
User Details
Dona Powell
Teacher
DonaRPowell@trashymail.com
Other 1
Other 2
Accordions and Tabs
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.
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.
Tables
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
| 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
| 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 (Canvas Admins only). Here are examples of the included styles.
Module List