Layne Heiny

Change One Bullet Point to a Checkmark

Discussion created by Layne Heiny on Nov 25, 2018
Latest reply on Nov 26, 2018 by Bobby Pedersen

One of my favorite tools within Canvas is the HTML editor in the backend of a page, quiz, assignment, etc. Since one of my sites relies on bullet lists for navigation, I've been fussing with a way to get a checkmark next to the current unit. I figured it out a few minutes ago and wanted to share with others.

 

First, here is the look.

One Checkmark instead of the bullet.

The single checkmark next to the current unit requires using the HTML editor and modifying the <li>, adding a span around the checkmark HTML entity ( &#10003; ).

 

Here is the current code:

 

<li style="list-style-type: none !important;">

<span style="color: red; margin-left: -18px;">&#10003;</span>

<a title="U04 Dynamics Introduction" href="https://puhsd.instructure.com/courses/8/pages/u04-dynamics-introduction" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/8/pages/u04-dynamics-introduction" data-api-returntype="Page">

<span style="font-size: 1rem;">U04 Dynamics </span></a></li>

 

The li style removes the bullet point from the list. The !important is necessary to override the Canvas CSS.

The span moves the checkmark to the left and adds the color red.

 

The rest is nothing more than linking the text to the correct page.

 

While this isn't perfect on an iPhone, it's something that others might enjoy tinkering with as they design a page.

 

Maybe you could even come up with a cleaner way to change one bullet point to a checkmark. 

 

Outcomes