How to create visually dynamic headers
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 headers.
Copy/paste this line of code:
<table style="width: width-percentage-value%; border-collapse: collapse; background-color: #aa1010; float: left;" border="3px" cellpadding="6px">
<tbody>
<tr>
<td style="width: 100%;"><span style="font-size: 14pt; color: #ffffff;"><strong>YOUR HEADER / TITLE TEXT GOES HERE</strong></span></td>
</tr>
</tbody>
</table>
If will look like this in the editor...
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 header to 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.
YOUR HEADER/TITLE TEXT GOES HERE - Replace this text with whatever you want your header title to be.
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 In line 1, I changed the width-percentage-value to be 100 while leaving the % sign. Also, in line 2, I changed the header of the divider.
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 header table will appear on your Canvas page.
Customize your Header/Divider
Instructions
Copy/paste this code:
<table style="width: width-percentage-value%; border-collapse: collapse; background-color: #aa1010; float: left;" border="3px" cellpadding="6px">
<tbody>
<tr>
<td style="width: 100%;"><span style="font-size: 14pt; color: #ffffff;"><strong>YOUR HEADER / TITLE TEXT GOES HERE</strong></span></td>
</tr>
</tbody>
</table>
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 In line 1, I changed the width-percentage-value to be 100 while leaving the % sign. Also, in line 2, I didn't want the default Cardinal red so I changed the value to be a Royal Blue with the 0c0cc6 value. In line 2, I changed the title of the header to 'Module Resources and Readings'
Output