Page separations in Canvas
Creating sections for your content on your Canvas pages can go a long way to help organize the layout and flow. It can help the page be more readable if the content is well-divided, and it can also improve the structure.
In this post, we will explore two different ways to create separations among your page content: formal stylized section separators via <div>, as well as customize <hr> separators. Follow along with me, and please feel free to grab my code and use it in your own Canvas course. Visit my HowToCanvas course for examples of the code in action in a Canvas environment.
The above bar is the first example of a page separator that we will explore. This is created using an HTML element called a <div>. To begin creating your <div>, start by editing your page/announcement/assignment, and then click on the HTML editor (access the HTML editor by click the < / > icon in the lower right corner). Let’s begin by creating a simple <div>. Copy the following code and paste it into your HTML editor:
<div></div>A <div> by itself will not be seen until it is styled. It is merely an empty vessel, waiting to be filled with something. So we will start filling it. The first thing I will do it create a border for the <div>. I will use this code and paste it within the <div> container: class="border border-trbl border-round". Those are three different CSS classes and it calls back to code that Instructure has on their databases. One class is “border”, another is “border-trbl” (which is us saying that we want a border on the top, right, bottom, and left), and the final class is “border-round” (saying that I want the corners to be round instead of angled). At this point the code looks like this:
<div class="border border-trbl border-round"></div>And the fancy separator is not looking very impressive quite yet:
Not to fear, we still have some elements to add. I’m going to put a background color and add some padding now. This is done using inline CSS. The classes that we previously references are external CSS, and now I am going to add some custom CSS directly to our <div>. So lets add this code to that <div>: style="background-color: #c2c2d6; padding: 10px;". You can change the color to whichever you want. #c2c2d6 is the code for the periwinkle separator above. You can find color hex codes at any number of HTML color sites, for example https://htmlcolors.com/ or https://coolors.co/. Here is what our code is looking like now that we’ve added some color and padding:
<div class="border border-trbl border-round" style="background-color: #c2c2d6; padding: 10px;"></div>It’s starting to take a shape (literally).
If you like the separator as is, then you’re done. You can make it taller by increasing the padding, perhaps from 10px to 15px or 20px. Again, change the color to whatever you like.
If you would like to include text in your separator then let’s keep exploring. By default, your text will appear inside the <div> borders aligned to the left and in black text at the normal font size. But you can manually change these settings. Within the style=" ", you can center your text by writing "text-align: center". Change the color of the text by writing "color: [your color hex]". Finally, determine the size of the text "font-size:[size]". You can choose font size: x-small, small, medium, large, x-large, xx-large. All of these elements are within the first <div>. Your text will be between the <div> and </div>. So this is what the final heading code looks like:
<div class="border border-trbl border-round" style="background-color: #c2c2d6; padding: 10px;text-align: center; color: #33334d; font-size: xx-large;">
<strong>Headings</strong>
</div>And now we have reached the final state:
<hr>
Horizontal rules are much simpler than the <div> option that we explored, but they still have the ability to be customized. In basic form, a horizontal rule is a thin line spanning the page from left to right. To put a simple horizontal rule, go into your HTML editor and type <hr> where you want your line. That’s it for starters.
It is worth mentioning that although the <div> always requires a closing tag </div>. The horizontal rule tag is somewhat unique in that it is one of the few HTML tags that is self contained. So there is no need to close it with an </hr>. All the styling will be within the <hr> as either class=" " or style=" ".
So, now if you want to take your <hr> to the next level, then consider adding inline CSS similar to our above section. Some styling options are:
width - by default <hr> spans 100%, but you can specify another width in pixels or %
margin: auto - if you do choose a width other than 100%, then style="margin: auto;" will center your <hr>
color
height
border: solid, dashed, or dotted [choose one - typically solid]
If you haven’t already, view the YouTube tutorial that corresponds to this blog post for a breakdown of various. Simply for fun, trying copying this code onto a Canvas page and then explore options by changing the properties:
<hr class=" border-round" style="background-color: #8e6c88; height: 10px; width: 80%; margin: auto; border: 2px dashed #263D42;"/>Which elements do you like and would like to keep, and what are the things you would change about that <hr>? View more <hr> options in our Canvas course, and continue exploring and styling.
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
You can also visit our companion Canvas course for examples of our tips and tricks.
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas