Hidden Gems

There are a variety of CSS classes that can be applied to your content to help you accomplish a variety of effects.

Lead

Add a lead class to a paragraph to make a great introductory paragraph. (This is the same styling used for the first paragraph of the introduction block in the flat sections themes).

Capitalize capitalize

The capitalize class (class not capitalized) will turn on title case where the first letter of each word is capitalized. 

Hanging Indent

If you apply the kl_hangingindent class to a paragraph, the second line of the paragraph will be indented slightly more than the first. This is some random text to make sure this wraps to the next line to show the indent.

• This class can also be added to an unordered list so that each item within that list is indented. Works great for citing references. This is some random text to make sure this wraps to the next line to show the indent.

1. Or add it to an ordered list so that each item within that list is indented. Also works great for citing references. This is some random text to make sure this wraps to the next line to show the indent. Added Nov 17, 2020

More Space List Added: Dec 1, 2020 

Adding a kl_more_space class to an ordered or unordered list will give the list items some breathing room.

Here is a default list:

• Item 1
• Item 2
• Item 3

And here is one with the kl_more_space class:

• Item 1
• Item 2
• Item 3

If the class kl_hide_next is added to any item on the page, the Next button will be removed.

If the class kl_hide_previous or kl_hide_prev is added to any item on the page, the Previous button will be removed. Added Nov 5, 2019

Browser Only Feature

Add a course or module navigation button to the top right of your page.

Course Navigation

  As of November 1, 2019, the Course Navigation button is hidden in the mobile app (since it doesn't work there anyway).

You will see this feature in action throughout this user guide in the top right of the page. The navigation button will build out based on the module structure of your course. When you open the navigation, the current module will be open and there is the current item is highlighted.

To use this feature, you will edit the HTML of the page and paste the following at the top of the page:

<div id="kl_course_navigation" class="kl_wrapper">
  <p style="text-align: right;" class="kl_browser_only"><a class="bs-btn-xs bs-btn bs-btn-mid" href="https://cidilabs.instructure.com/courses/102"><i class="far fa-compass" aria-hidden="true">&nbsp; </i>User Guide Navigation</a></p>
</div>

Update the following:

• Update the link destination to the current course or the modules page for the current course (just in case you have an instance where the link is visible but the JS doesn't run).
• Adjust the text and icon as desired.

Individual Module 

If you would like a navigation that is based on a single module rather than a whole module, you can do that in a similar fashion by putting in a link to a module rather than a link to the course and then adding a  class to the wrapping div:

<div class="kl_book_nav">
  <p><a href="https://cidilabs.instructure.com/courses/3/modules/1668" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/3/modules/1668" data-api-returntype="Module">Dev Components</a></p>
</div>

This feature is based in the ability to indent items in a module. Items with no indent will appear in the main dropdown. Indented items will appear in a nested dropdown. 

If all items are indented, the dropdown will be empty.

If you want to nest items, it is best to use a subheader.

Browser Only Feature

We have added some backend code for those interested in embedding Pinterest content in your Canvas course. There are quite a few posts about doing this in the Canvas Community but they are a bit involved as it requires adding in some JavaScript.

To embed Pinterest content:

1. Follow the directions on the Pinterest Developers Widget Builder page Links to an external site. to create the link to your content
2. Copy the link tag and paste the HTML into your Canvas content using the Canvas HTML Editor or the Advanced HTML Editor
   
   It would be a good idea to add some text to the link so that you can see the link location when editing content in the rich content editor. Example:
   

   <a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/official-news/">Pinterest Official News Board</a>

This will make it so that when you are editing the content, you would see:

Pinterest Official News Board Links to an external site.

When you save the content, the Design Tools JavaScript will identify the Pinterest link and pull in the needed JavaScript file from the Pinterest website and the link will get transformed like this:

Pinterest Official News Board Links to an external site.

(I centered the link text in its paragraph which centers the board as well)

These classes will help you create a lightbox effect for images in your content.

This feature uses Magnific Popup Links to an external site. to build out the popups.

Add the kl_popup_image class to a single image to create an independent popup.

Add the kl_popup_gallery class to a div, paragraph or other block element and any image inside that element will be turned into a popup gallery the ability to navigate forward and backward through the images.

Alt text will be displayed as the caption when available.

You can also use the HTML Snippetts tool to add images with captions and the caption text will be used instead.

Put the full sized image in Canvas and then you can resize it to a smaller size in the content so that the larger version appears when selected.

This little bit of code can be added to an accordion so that panels will open based off of a date range.

Add the following HTML inside of an accordion heading:

<span class="kl_panels_dates"><em class="bs-badge bs-badge-primary">07/01/2022</em> - <em class="bs-badge bs-badge-primary">07/31/2022</em></span>

Your accordion panel should look like this:

<div class="kl_panels_wrapper kl_panels_accordion">
            <h3 id="kl_panel_0" class="kl_panel_heading kl_panel_0"><span class="kl_panels_dates"><em class="bs-badge bs-badge-primary">06/01/2022</em>&nbsp;- <em class="bs-badge bs-badge-primary">06/30/2022</em></span>Panel Heading</h3>
            <div id="kl_panel_0_content" class="kl_panel_content kl_panel_0">
                <p>Panel Content</p>
            </div>
            <h3 id="kl_panel_1" class="kl_panel_heading kl_panel_1"><span class="kl_panels_dates"><em class="bs-badge bs-badge-primary">07/01/2022</em>&nbsp;- <em class="bs-badge bs-badge-primary">07/31/2022</em></span>Panel Heading</h3>
            <div id="kl_panel_1_content" class="kl_panel_content kl_panel_1">
                <p>Panel Content</p>
            </div>
        </div>

It will look like this in the rich content editor 07/01/2022 - 07/31/2022 but it will be hidden when saved. Set the date range as desired. This currently requires a MM/DD/YYYY date format.

This is a fun little piece that I built for an online course I taught. It will pull in the content from a separate page and inject it into the current page. 

To use this feature, add a link to the desired page into your content:

Import example

<p><a title="Import example" href="https://cidilabs.instructure.com/courses/102/pages/import-example" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/102/pages/import-example" data-api-returntype="Page">Import example</a></p>

Then, give that link the kl_import_page class. When viewed in the browser version of Canvas, the contents of that page will be pulled in and replace the link in your content like so:

Importing page content

<p><a class="kl_import_page" title="Import example" href="https://cidilabs.instructure.com/courses/102/pages/import-example" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/102/pages/import-example" data-api-returntype="Page">Import example</a></p>

For a little more fun, you can add an additional kl_import_dated class and the code will look for a date range in that link. You will need to use a (MM/DD/YYYY-MM/DD/YYYY) formatted date range so you link will look something like:

Import example (07/01/2019-07/07/2019)

<p><a class="kl_import_page kl_import_dated" title="Import example" href="https://cidilabs.instructure.com/courses/102/pages/import-example" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/102/pages/import-example" data-api-returntype="Page">Import example (07/01/2019-07/07/2019)</a></p>

The code will look for any page links with  kl_import_dated and parse out the date. If todays date falls in that range, it will pull in that content, otherwise it will hide the paragraph containing that link from the user.

I used this on the front page of my course and created weekly overview pages in my course that would pull into the front page each week for some customized instruction.

The Module Item Details progress indicator will insert links and details for the current module into a page. You can do something similar to any module in Canvas by inserting a link to that module and giving it a kl_module_progress class.

So, taking the Quick Start module for an example, we can include a link in the content link so:

Quick Start

If we give that link a  class, that link will be replaced with the information about that module like so:

Quick Start

You can do this with as many modules as you would like. This is another one I built for the online class I taught. It allowed me to add in some information about each of the modules we were covering during a week before providing links to the information.

Browser Only Feature

The Module Item Details progress indicator will insert links for items in the current module into a page and display to students what items have completion requirements and what requirements have been met.

You can do something similar to any module in Canvas by inserting a link to that module and giving it a kl_module_progress_completion class.

So, taking the Quick Start module for an example, we can include a link in the content link so:

Quick Start

If we give that link a  class, that link will be replaced with the information about that module like so:

Quick Start

You can do this with as many modules as you would like.

Quick Start

Create/Edit Content

Becomes:

Quick Start

Create/Edit Content

Add an additional kl_module_progress_include_title class and the original link text will be included above the progress bar. If you use this additional class, the progress bars will be right-aligned instead of centered.

Quick Start

Create/Edit Content

The links above are in paragraphs but you could use headings or list items as well. Here is an example using level 5 headings:

Quick Start

Create/Edit Content

Browser Only Feature

We had one of our users request the ability to make content that was only visible in the mobile app. To do this, add a kl_app_only class to any block element (div, p, ol, li, etc.) and that element will only display to users in the Canvas mobile app.

This content is visible to edit in the Blocks view or the App view when using Design Tools.

Add a kl_browser_only class to any element that you would like to be visible only when viewed in a browser. In other words, this content will be hidden in the Canvas mobile apps.

   This content only shows up in the browser.

If you would like to lock an element so that it cannot be edited using the rich content editor, give it a kl_locked class. This is similar to what happens with institutional policies in the course syllabus.

The next time the page is edited, a contenteditable="false" attribute will be added to that element to prevent users from editing that element. You will need to go into the HTML and remove that attribute in the future if you need to edit the element.

This gem will allow you to dynamically show a user some content based on a decision they make.

Create links that will represent their choices:

Decision 1 Decision 2 Decision 3 (locked)

Decision 1 Content. You can change your mind with this one. 

Decision 2 Content. You can change your mind with this one.

Decision 3 Content. This decision is locked based on a cookie in the browser.

Give each link a kl_decision_trigger class and an id ( kl_decision_1, kl_decision_2, kl_decision_3 etc.)

Then build out the content that you would like to display for each decision. These can be paragraphs, divs, content blocks, etc. 

Each of the content pieces is given a kl_decision_content class and then an additional class that is the id of the trigger followed by "_content". So the content for Decision 1 would have two classes kl_decision_content kl_decision_1_content.

Locked Decisions

With Decision 1 and 2 above, you can change back and forth between the two decisions. However, if you choose Decision 3, your choice is locked. The trigger for Decision 3 has an additional kl_decision_locked class. When this one is clicked, it will write a cookie in the browser to remember the decision and hide the other content from users.

Coming June 1, 2023!

Clear decision button. Give a link the class kl_decision_clear to reset all decisions on this page (including locked decisions).

Clear Decision

Browser Only Feature

Adding the class kl_collapse_course_nav to any element on the page will trigger the button to collapse the course navigation when the page loads.

Browser Only Feature

This is a feature that has to be turned on at the institution level but it will allow you to toggle between the default page view in Canvas and a view that enlarges the student profile images.

Visit the Student Cards page in the Admin Guide to learn more about this feature.

This has actually been around for quite a long time but I just found it in the code so I decided to add it here. Basically, if you add a .kl_current_module_name class to an element like a span, paragraph, heading, etc. then Design Tools will fill that element with the name of the current module.

So this:

<p>The current module is: <mark class="bs-text bs-text-warning kl_current_module_name">Module Name</mark>

Becomes:

You are current module is: Module Name

This was actually a request from one of our users who wanted to add the name of the module to the Icon Progress Bar/Navigation.

Browser Only Feature

This is a fun new type of navigation that was requested by one of our institutions. They were creating this the long way so we came up with a way to do do it faster.

The HTML to recreate this is:

<div id="someUniqueIDorEmpty" class="dp_module_tabs_nav" style="display: none;">
  <p>Tabbed Module Navigation Placeholder</p>
</div>

I recommend adding it at the level of a content block so that it will run the full width of the content.

This one relies on some specific structure for the module. There are also a variety of ways you can further customize this navigation. To learn more about how this feature works, I have created a course where you can see it in action.

Here are some other links to that course to help you get started:

• First Item in the Module
• Basic Example Page
• Module Structure Guidelines
• Variations
  • Override Color
  • Module Name and Link Text Links to an external site.

Browser Only Feature

If you add a kl_indicate_completed class to the basic Module List container, a checkmark will appear next to the link of any module where all completion requirements have been met.

Example HTML:

<div id="kl_modules" class="kl_indicate_completed">

   Note: Modules that do not have any completion requirements are considered complete by Canvas and will also be checked off.

Browser Only Feature

Student View Only

When you are using All Quick Links for the Module List, if you add the kl_modules_current_uncomplete class, the active tab will be the first module with uncompleted requirements.

Example HTML:

<div id="kl_modules" class="kl_modules_current_uncomplete kl_modules_tabbed">

Browser Only Feature

Student View Only

This one has been around for quite a while but I didn't think about it when until recently.

By default, the navigation for the Circle Left them will appear as circles off to the side of the page that expand when a user hovers over them or tabs through them.

After requests to have that navigation stay below the image, I created a kl_fixed_nav CSS class that will do just that.

So, changing the default navigation start from:

<div id="kl_navigation">

 To:

<div id="kl_navigation" class="kl_fixed_nav">

 Will cause the navigation to look like this instead:

  The information typed into any of these inputs is not collected or stored in any way. They are really just interactive pieces that can help users gather their thoughts, summarize for themselves what they have learned, or whatever use case you might find.

<p class="kl_textarea" data-rows="3">Text Area Title/Placeholder</p>

<span class="kl_checkbox_input">Label Text</span>

<span class="kl_radio_input" data-name="group1">Label Text</span>

<tr>
    <td>Providing new information or updates</td>
    <td style="text-align: center;"><span class="kl_radio_input kl_hide_label" data-name="group1">Have done</span></td>
    <td style="text-align: center;"><span class="kl_radio_input kl_hide_label" data-name="group1">Need more practice</span></td>
  </tr>
  <tr>
    <td>Giving/receiving confirmations</td>
    <td style="text-align: center;"><span class="kl_radio_input kl_hide_label" data-name="group2">Have done</span></td>
    <td style="text-align: center;"><span class="kl_radio_input kl_hide_label" data-name="group2">Need more practice</span></td>
  </tr>

Adding a kl_no_print class to an element will hide that element when the page is printed.

The following placeholders can be added to your content and will be replaced by the current date and/or time when viewed in a browser or mobile app.

Examples:

• Date: Current Date
• Time: Current Time
• Both: Current Date & Time

Code:

<span class="kl_date_placeholder" style="display: none;">Current Date</span>

<span class="kl_time_placeholder" style="display: none;">Current Time</span>

<span class="kl_date_time_placeholder" style="display: none;">Current Date &amp; Time</span>

Browser and Mobile App Compatible

This snippet will be replaced by the name of the currently logged-in user or "Unknown User" if no user is logged in.

Example:

Current User Full Name: Current User

<span class="kl_user_name_placeholder" style="display: none;">Current User</span>

Current User's Short/Display Name: Current User

<span class="kl_user_short_name_placeholder" style="display: none;">Current User</span>

Browser and iOS Mobile App Compatible

Does not work on Android app

This is a feature that has to be turned on at the institution level but it will allow you to sort assignment rubrics.

Visit the Sortable Rubrics page in the Admin Guide to learn more about this feature.

One of our institutions had this idea for a list and I decided to make it my birthday present to all of you this year. 

Take an unordered list with links:

•   Part 1: A Scandal in Bohemia
•   Part 2: The Red-Headed League
•   Part 3: A Case of Identity
•   Part 4: The Boscombe Valley Mystery

Add the class kl_large_link_grid to the ul and you will get this:

•   Part 1: A Scandal in Bohemia
•   Part 2: The Red-Headed League
•   Part 3: A Case of Identity
•   Part 4: The Boscombe Valley Mystery

This will even work with the Module List, although not if you turn on all quick links.

Add a kl_current class to one or more of the items li class="kl_current" to highlight it (this is also what the current module in the module list would look like):

•   Part 1: A Scandal in Bohemia
•   Part 2: The Red-Headed League
•   Part 3: A Case of Identity
•   Part 4: The Boscombe Valley Mystery

For more fun, you can add images:

• Part 1: A Scandal in Bohemia
• Part 2: The Red-Headed League
• Part 3: A Case of Identity
• Part 4: The Boscombe Valley Mystery

Left align the text with an additional kl_align_left class:

•   Part 1: A Scandal in Bohemia
•   Part 2: The Red-Headed League
•   Part 3: A Case of Identity
•   Part 4: The Boscombe Valley Mystery

Right align the text with an additional kl_align_right class:

•   Part 1: A Scandal in Bohemia
•   Part 2: The Red-Headed League
•   Part 3: A Case of Identity
•   Part 4: The Boscombe Valley Mystery

You can align the text left or right and float the images and reduce the size for a different effect:

• Part 1: A Scandal in Bohemia
• Part 2: The Red-Headed League
• Part 3: A Case of Identity
• Part 4: The Boscombe Valley Mystery

Just have some fun along the way!

Blackboard Ally added an Alternative Formats dropdown to the Canvas page title which the Design Tools code would hide when a stylized heading was added.

We had a variety of support tickets about that dropdown not being visible because the heading was hidden and so we made the decision to not hide the heading if the Ally dropdown was present. Then we started getting support tickets because people didn't like that the heading was no longer hidden.

We have created an admin option that can be set to attempt to relocate the Ally dropdown so that we can still hide the heading. Here is an example of what that looks like:

We did this as something that has to be set at the institution level because we are not sure how fragile the Ally dropdown is or how often it might change. As of April 2022, this has been stable and we have not had to make any changes in response to Ally updates.

While we are happy to adjust this code as Ally changes, it is possible that the dropdown may not be accessible for a short period of time if Ally does make a change.

To implement this change, the following needs to be added to the Design Tools settings portion of the Canvas JavaScript file:

// OPTIONAL: Relocate Ally alternative formats dropdown and hide heading
overrideAllyHeadings: true,

That can be added anywhere in the Design Tools section, so it might end up looking something like this:

////////////////////////////////////////////////////
// DESIGN TOOLS CONFIG    08-01-2016              //
////////////////////////////////////////////////////
// Copyright (C) 2016  Utah State University
var DT_variables = {
        iframeID: '',
        // Path to the hosted USU Design Tools
        path: 'https://designtools.ciditools.com/',
        templateCourse: '331985',
        // OPTIONAL: Relocate Ally alternative formats dropdown and hide heading
        overrideAllyHeadings: true,
...

Strange things have been happening lately with the width of content in Canvas. This has been discussed as recently as the February release notes. We have endeavored to keep the content created with the Design Tools sidebar at a width that is easier to read rather than allowing it to fill the whole screen in Canvas.

An issue was reported to us where creating a Scorm assignment just doesn't cooperate well with the two portions of the assignment content having different widths. I deliberated on this one quite a bit. I want to avoid making changes to the Canvas UI outside of user created content as much as possible but I also have strong opinions about usability when it comes to the width of content.

I finally decided to add an optional kl_full_width_content class that can be added to any element in the user created content that will allow the Design Tools Wrapper to expand to the full width of the screen.

  Caution: Please use this feature sparingly. There are a variety of usability issues with content that gets too wide.

This progress bar uses headings and nested module items to give you a progress bar for just part of a module.

Partial Module Navigation Placeholder

Placeholder HTML you add to the editor:

<p class="dp_module_progress_partial" style="display: none;">Partial Module Navigation Placeholder</p>

The default option will use the item type for the icon. If you would like them to be numbered instead, add the dp_nav_numbered class.

Partial Module Navigation Placeholder

<p class="dp_module_progress_partial dp_nav_numbered" style="display:none;"> Partial Module Navigation Placeholder</p>

I have created a Partial Progress: Basic Navigation module to give more examples of how this works.

Add the kl_auto_update class to your module list for it to automatically update when the page is edited.

Code example:

<div id="kl_modules" class="kl_auto_update">

<div id="kl_modules" class="kl_locked kl_auto_update" contenteditable="false">

What will update

• Name of each module will be updated to match the current module name in Canvas
• Modules that have been removed from Canvas will be removed from list
• Any manually added links that do not point to modules will also be removed

What will not update

• Module order (if you change the order of your modules, use the Module List tool to toggle off any modules that are out of order and then turn them back on)
• New modules will not automatically be added (it's hard to know what is a new module and what you intentionally didn't add to the module list)
• This will not take a list of possible modules created on a template page and match them up to actual modules in the course

The following classes can be added to an element to create drop shadow when the element is hovered over or has keyboard focus. This should primarily be applied to links as most of the other elements that can take a keyboard focus are not allowed in the Canvas rich content editor.

The drop shadow styles are the same as those available in the Box Styles tool.

 The following links were first converted to buttons. Underneath each button, you will find the CSS class that was added to the link: 

These styles could also be used for a linked image with the addition of adding display:inline-block in the style attribute:

To achieve this look, I wasn't able to use the align options on the image or there were margins that looked funny. Here is the HTML I used for reference:

<p style="text-align: center;">
  <a class="kl_hover_shadow_r3" style="display: inline-block;" href="#"><img id="81903" class="kl_image_max_fill" style="width: 300px; height: auto;" src="/courses/102/files/81903/download?verifier=zVlZMBD4SrG76O8WXU6y1PdAnjwFtROVTl05fcUL" alt="Example linked image" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/102/files/81903" data-api-returntype="File"></a>
</p>

Remove Shadow on Hover/Focus

Another alternative would be to apply one of the Box Styles shadows to the link and add the kl_hover_no_shadow class which would remove the shadow with hover/focus:

And here is the reference HTML for that one:

<p style="text-align: center;">
  <a class="kl_shadow_r3 kl_hover_no_shadow" style="display: inline-block;" href="#" data-mce-href="#" data-mce-style="display: inline-block;"><img id="81903" class="kl_image_max_fill" style="width: 300px; height: auto;" src="/courses/102/files/81903/download?verifier=zVlZMBD4SrG76O8WXU6y1PdAnjwFtROVTl05fcUL" alt="Example linked image" data-api-endpoint="https://cidilabs.instructure.com/api/v1/courses/102/files/81903" data-api-returntype="File"></a>
</p>

Similar to Key Action Items, this new Editor Notice hidden gem allows you to add a notice in the editor that is hidden from students. However, unlike Key Action Items, this gem is not something that a user would delete when reviewed. 

Add the following snippet into the Canvas editor:

<div class="kl_editor_notice_block" style="display: none;">Content</div>

Once you have customized the notice, you can also add the Locked Content hidden gem to prevent users from editing the notice in the editor.

While this has been in the code for quite awhile, we are adding it here for easy reference. When you create Content Blocks (either in a Customizations course or on a given page), the title for that block in the Add Blocks dialog and the Add/Rearrange Content Blocks section will look for a heading or just grab the first few words of text from the block to display. 

If you want to customize that, you can edit the HTML and add a data-title attribute to the block.

For example, the following block would show "Introduction_text_here" as the title for the block.

<div id="kl_introduction">
  
    <p>Introduction_text_here</p>
  
</div>

But by adding  data-title="Introduction", it will instead show "Introduction" as the title. 

<div id="kl_introduction" data-title="Introduction">
  
    <p>Introduction_text_here</p>
  
</div>

  Caution: Setting this attribute will always result in that block having that title regardless of what text is added inside the block.

When a syllabus is created using the Design Tools sidebar, a navigation is built out on the right side of the page to help students easily navigate the syllabus based on the page heading structure. While most people love this feature, we have had a few requests for the ability to disable that navigation.

To disable the syllabus navigation, add the class kl_hide_syllabus_nav to any element in your syllabus.