View All Pages

Styling Content

Citilabs page header

Design Tools Resources for Faculty and Staff

Landing Image, a computer

Styling Content

The Design PLUS Content Editor Toolbox allows you to painlessly add colors and layouts, edit spacing, add buttons, and even add tabs and accordions to your courses. The Content Editor Toolbox augments the native Canvas RCE enabling you to easily create, customize and style content on any Front, Content, Discussion, Assignment, and Syllabus page in Canvas.

Get advanced CSS/HTML results without having to be a (total) nerd. Watch the video to get a quick understanding of the beautiful possibilities.

 

 

 

 

 

Colors for Banner Theme

With the Colors for Banner Theme tool, you can change the color of a Banner theme element.

 

Interface

Colors for Banner Theme interface color picker interface

 

Turning on the Colors for Banner Theme Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the Colors for Banner Theme tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

Change Banner Colors

To change the color of a Banner theme element, follow these steps:

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. In the Design Tools menu, click Customize the Style.
  4. Click Colors for Banner Theme.
  5. In the Colors for Banner Theme box, select the background or text colors for each element.
  6. Click Save.

 Tip: If your cursor is in the Banner Heading, you can click the Colors for Banner Theme jump menu icon button in the jump menu to jump right to the Colors for Banner Theme section.

 

 

Colors for the Current Element (Advanced)

The Design Tools color picker has been upgraded for advanced users. Read on to learn about the new color picker that was released in a beta version as part of the Sept 4, 2018 release and became the default for the advanced level of the tools on Nov 1, 2018.

 

The Interface

advanced colors interface

The various features of the interface are explained in the following panels.

 

Turning on the Colors - Advanced Tool

 This is an Advanced level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Advanced from the Select a Comfort Level area
    2. Manually turn on a specific tool by clicking the switch below the Colors - Advanced tool name
  3. Close the Design Tools Settings

 Note: If you previously had the Colors - Basic tool turned on, you will need to reload the page for the Colors - Advanced to load for all areas where you can change colors.

 

 

Change Colors

To change the colors of an element, follow these steps:

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. In the Design Tools menu, click Customize the Style.
  4. Click Current Element Style.
  5. Click the Colors (Beta) tool to expand tool if needed.
  6. Place your cursor within the element to which you want to adjust a color.
  7. Use the Apply To controls if you want to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
  8. Choose the attribute you want to change (see the interface details above for more details).
  9. Adjust the color as desired.
  10. On the content page, click Save.

To reset colors to default, follow the instructions above to identify the element you want to reset and then click the Remove Custom Colors button.

 Tip: You can click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel and Current Element Style section.

 

Attribute Selector

 Use these buttons to choose what attribute of the current element you would like to change.

attribute selector buttons

The background of the button represents the current color for that attribute.

Icon Attribute to change
background color button Background color
text color icon Text color
all borders button Border color
border top button Top border color
border right button Right border color
border bottom button Bottom border color
border left button Left border color

 

Adjustment Controls

 Adjustment controls

This section allows you to work with the current color.

Control Description
color input Input where you can see and change the hexadecimal color value for the current element. Place your cursor in the input to see a popup color picker.
popup color picker
Add color to favorites
Lighten color
Darken color
Reset selected color attribute to default
Reset all colors to default

 

Sample Text Preview

color preview section

This section gives a preview of the colors currently set on the item.

 

Color Palettes

color palettes

This section will display color palettes from a variety of sources. The row of icons along the top can be used to control which palettes are visible.

Icon Palette Description

Colors from content

This section contains swatches for colors that are already being used in the rich content editor.

My Palette

Custom colors created and organized by the user. With the ability to a labels to user created palettes.

Shared Palette (not common)

This palette is only visible if a user has selected a shared customizations course.

Extended Palette (not common)

This palette will be visible if the course is in a Canvas sub-account that has been configured to use a Design Tools extended customizations course.

Institutional Colors

This palette contains the default institutional colors listed in the Design Tools primary customizations course.

Basic Colors

This is the same set of basic colors that were available by default in the original color picker.

basic color palette

Expanded Colors

This is a larger palette of basic colors.

Expanded color palette

 

WCAG 2.0 Rating

WCAG 2.0 Accessibility section

The final section of the color picker will identify if the current text and background color have enough contrast to meet the AA or AAA rating in WCAG 2.0 as well as giving the numerical contrast ratio.

The toggle text colorbutton will initially set the text color to white or black (depending on which will offer the best contrast), after that it will allow you to toggle the text color from black to white to compare contrast ratings.

 Note: The WCAG 2.0 Rating table at the bottom of the panel changes to let you know if the current colors match WCAG 2.0 guidelines. Achieving an AA rating is sufficient. If your selected color results in a Fail rating, you can use the Lighten or Darken buttons to make slight adjustments to the color until it moves into the AA range. When you change the background color, the text color will change to white or black for best contrast.

 

Save or remove favorite colors

When using the color picker, you can save selected colors to your favorites list. To favorite a color, follow these steps:

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. In the Design Tools menu, click Customize the Style.
  4. Click Current Element Style.
  5. Click the Colors (Beta) tool to expand tool if needed.
  6. Place your cursor within the element with a color you want to save or pick a color using any of the palettes and pickers available. 
  7. Click the  button in the Adjustment controls section to save the current color to or remove the current color from the Favorites section.
    1.   button state indicates the color is not favorited and will be added
    2.   button state indicates the color is favorited and will be removed

 

Create a custom color palette

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. In the Design Tools menu, click Customize the Style.
  4. Click Current Element Style.
  5. Click the Colors (Beta) tool to expand tool if needed.
  6. Create a custom color palette using one of the following methods (described in more detail after this list):
    1. Save Colors from Content as a group
    2. Save favorites colors to a group
    3. Pull a color palette from an image
    4. Manually build a custom palette

 

Edit a custom color palette

You can edit a custom palette by clicking the  button.

Edit Custom Colors interface

  • Drag and drop to rearrange colors
  • To change a color:
    • Select the color input
    • Use the color picker or type a new hexadecimal color value
  • Click the Add Color  button to add a new color input to the list
  • Click the Add Label button to add a new label to the list. Edit text as desired.
  • Click Save to save your changes to the custom color palette

 

 

Turn a Link into a Button

With the Link Button tool, you can add a button style and an icon to an existing link on the page.

The Link Button panel contains several button styles to choose from. By default, the Button Style option uses the text of the existing link. However, you can edit the text as needed with the Text option.

 Note: The Link Button tool does not create new links.

Interface

Link/Button controls

 

Tool Options

The following list describes the tool options:

Text
Changes the link text. You can also change the link text in the content editor; however, using the Button Link tool reduces the risk of breaking the styles.
URL
Changes the destination of the current link.
Open in new tab
Sets the link to open in a new tab.
Indicate Visited
Links that a user has visited will have a green square next to the link. Links a user has not visited will have a yellow/orange box next to the link.
Icon
Adds an icon to the selected link.
Button Style
Choose a button style to turn the link into a button.
Button Size
Changes the size of the button. This option appears if a button style is selected. 
Remove Style
Removes the button style from the link.

 

Modify a Link

To modify the style of a link, follow these steps:

  1. Open the page for editing.
  2. Launch Design Tools.
  3. Expand the Customize the Style section.
    1. If you have Intermediate or Advanced tools turned on, open Current Element Style
  4. On the page, select the link.
  5. In the Link/Button panel, make your desired changes.
  6. Click Save.

 Tip: If a link is selected in the content editor, you can click the current_element_jump.png button in the jump menu to jump right to the Current Element Style panel and/or the Current Element Style section.

 

 

Current Button Styles

Solid

Primary Secondary Success Danger Warning InfoLight Mid Dark

Outline

Primary Secondary Success Danger Warning InfoLight Mid Dark

Canvas

Primary Secondary Success Danger Warning Info

Sizes

Large Button Default Button Small Button Mini Button

Block Buttons

Large Block Button

Default Block Button

Small Block Button

Mini Block Button

 

 

Edit Table Style

With the Tables tool, you can modify the style of an existing table. You can make a table sortable, add a Header or Footer row, or apply Canvas table styles.

 Note: These instructions have been updated to include information for the June 1, 2018 Design Tools release.

 Note: The Tables tool does not create new tables.

 

The Interface

Original

Table controls

June 1, 2018 Updates

Table interface

 

Tool Options

The following list describes the Table tool options:

Head Row
Makes the first row of the table a heading row
Head Column
Turns the first cell in each row into a heading cell with appropriate scope attribute
Foot Row
Makes the last row of the table a footer row
Sortable
Allow users to sort the contents of the table by clicking on a column heading. This will also turn the first row into a table heading.
Table Caption
Add a caption to the current table
Canvas Table Styles
Applies styles from the Canvas style guide to the current table.
Legacy Canvas Table Styles
Applies an older set of Canvas table styles to the current table (Canvas may choose to remove these styles at some future date).
Clear All Widths
Clear the width from the table and all cells within the table
Column Widths
Each column of a table will have a row in this section where the width of that column can be set using either pixels or percents

how to Edit Table Style

To edit a table style, follow these steps:

  1. Open the page for editing.
  2. Launch the Design Tools.
  3. On the Design Tools menu, click Customize the Style.
    1. If you have Intermediate or Advanced tools turned on, open Current Element Style
  4. In the rich content editor, select the table.
  5. On the Table Header/Footer/Style panel, make your changes.
  6. On the content page, click Save.

 Tip: If your cursor is in a table in the rich content editor, you can click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel and/or the  Current Element Style section.

 

 

Add Borders

With the Borders tool, you can add a border to the selected element or change the parameters of an existing border.

 

The Interface

Border controls

Turning on the Borders Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the Borders tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

Adjust Borders

To add a border or change an existing border, follow these steps:

  1. Open the page for editing.
  2. Launch Design Tools.
  3. On the Design Tools menu, click Customize the Style.
  4. Expand the Current Element Style section.
  5. Click Borders to expand the controls if needed.
  6. On the content page, select the element. (You can use the Apply To controls to target a parent element. Hovering over the buttons in the Apply To controls highlights that element in the content.)
  7. In the Borders boxes, select the border type and color for each side of the border. To make all border sides the same, specify the settings in  All box.
  8. Click Save.

 Tip: You can click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel.

 

 

Add Margins and Padding

With the Spacing tool, you can adjust the margins and padding of a selected element.

 

Interface

Spacing controls

 

Turning on the Spacing Tool

 This is an Intermediate level Design Tool

To turn on this tool:

  1. Click the Design Tools Settings icon   in the Jump Menu
  2. Do one of the following:
    1. Choose  Intermediate or  Advanced from the Select a Comfort Level area
    2. Manually turn on this tool by finding the Spacing tool in the list and clicking the switch below the tool name
  3. Close the Design Tools Settings

 

Instructions

Adjust Margins or Padding

To adjust the margins or padding for an element, follow these steps.

  1. Open the page for editing.
  2. Launch Design Tools.
  3. Expand the Customize the Style section.
  4. Expand Current Element Style.
  5. Click the Spacing tool to expand tool if needed.
  6. In the content editor, place your cursor within the element that you want to adjust.
  7. Use the Apply To controls to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
  8. Adjust the margins and/or padding as desired.(Use  All to set all of the margins or paddings to the same value.)
  9. On the content page, click Save.

 

Reset Margins or Padding to Default

To reset the settings to the defaults, follow these steps:

  1. Open the page for editing.
  2. Launch Design Tools.
  3. Expand the Customize the Style section.
  4. Expand Current Element Style.
  5. Click the Spacing tool to expand tool if needed.
  6. In the content editor, place your cursor within the element that you want to adjust.
  7. Use the Apply To controls to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
  8. Click   Reset under the element you want to reset.
  9. On the content page, click Save.

 

 Tip: You can also click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel.

 

 

UF Footer