How to add custom dividing lines in Canvas
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 custom dividing line.
Copy/paste this line of code:
<hr style="width: width-percentage-value%; height: height-valuepx; text-align: center; margin: 0 auto; background-color: #aa1010;" />
It will look like this in the editor...
If you do not know how to navigate an HTML editor, try reaching out to your site's instructional designer for help.
Step 4
Now that the code is in the editor, you'll need to replace two/three parts of the copy/pasted code with information relevant to what you want that dividerto be. The parts of the code are in red, but can be identified as:
width-percentage-value - Replace this value with a number between 1-100 for the preferred width percentage of the dividing line. This is how much of the page, from left to right, it will take up.
height-value - Replace this value with any number (preferably from 1-10) based on how thick you'd like make the dividing line.
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 in the image below, for line 1, I changed the width-percentage-value to 100 making sure to leave the % sign. In line 2, I changed the height-value to 5 and left the px.
Output
Step 5
Don't forget to hit the 'Save' button once you've replaced the values to your button in step 4!
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.
Finished! Your page divider will appear on your Canvas page. Please view the bottom 'Troubleshooting and Tips' section if you run into any issues.
Customize your Dividing Line
Instructions
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 in the image below, how I changed the width-percentage-value to 80 making sure to leave the % sign. I changed the height-value to 5 and left the px. Finally, I wanted a lighter color so I changed the default cardinal red background color to a A3ECCB, which is hex for Sea Foam Green didn't have to be changed.
Output
Video Guide
Video Guide
Troubleshooting and Tips
Visual error
Explanation
My custom page divider showed up as a grey horizontal line, like normal!
This will happen if you don't enter your values in correctly and accidentally delete a bit of code, like a semi-colon or quotation mark. Remove that line of code from the HTML editor and re-paste the code above to try again.