How to create a "Pill Box" notification for your Canvas page
The "Pill Box" is an aesthetically-inclined way of presenting information before a body of text or at the top of a page. The example images here use it as a space to convey the amount of time it would take to read the page contents. Use the ReadTime website to help you roughly estimate how long it will take to read passages. You till need to copy/paste text into the provided box on the website.
Written Guide
Visual Guide
Written Guide
Step 1
Head to any area within Canvas that has the Rich Content Editor (RCE). This is the space where you'll edit content that goes on a page, at the start of an assignment, or even when defining a Canvas discussion board.
It looks like the area pictured [left] but can also be identified with menu options such as 'Edit', 'View', 'Insert', 'Format', 'Tools', 'Table' or tools like 'Insert Link', 'Insert Media', and many other word processor options like Bold, Italicized, and underline options.
Step 2
Click on the < / > button in the bottom right of the RCE space, next to the total word count.
This is the HTML editor and can be utilized to customize the Canvas experience through more granular efforts, not unlike this guide.
Step 3
Find the space/line where you'd like to insert your pill shaped notification.
Copy/paste this line of code:
<ul class="pill">
<li>FIRST ITEM</li>
<li>SECOND ITEM</li>
</ul>
If will look like this in the editor...
It will look like this on the page:
Step 4
Now that the code is in the editor, you'll need to replace only two parts of the copy/pasted code with information relevant to what you want that pill to be. The parts of the code are in red, but can be identified as:
FIRST ITEM - Replace this with the value with the first item you'd like to put in the pill-shaped notification.
SECOND ITEM - Replace this with the value with the SECOND item you'd like to put in the pill-shaped notification, which is ordered after the first on the right side.
Make sure to enter your replacements exactly where these three values are and do not leave any part of the old values and adversely, do not replace any of the other characters when inputting your new values.
Example: Notice how I changed the 'FIRST ITEM' with 'Time to Read' and the SECOND ITEM with '4 minutes and 30 seconds'. All you need to do is replace the values
Output:
Step 5
Don't forget to hit the 'Save' button once you've replaced the values to your pill notification in step 4! You'll see you Pill notification on your Canvas page.
Alternatively, you can click on thebutton in the bottom right to go back to the RCE and edit other elements of your page and verify the page divider is what you want.
Customize your pill
Customization Instructions
Do you have more than two items you'd like to put in your pill? Or perhaps only one and not two. You can add/remove pill items by adding or deleting lines that start with <li> and end with </li> in your code.
Copy/paste this code:
<ul class="pill">
<li>FIRST ITEM</li>
<li>SECOND ITEM</li>
</ul>
Want more items?
Add this code <li>REPLACE ME</li> in the lines between <ul class="pill"> and </ul>
Add more items, Example:
Output:
Want less items?
Delete lines between <ul class="pill"> and </ul> in the code.
Removing items, Example:
Output: