Let’s face it: Canvas default styles are kind of terrible. We’re here to help you fix them!

Using these whole page styles will make ALL your content (normal content and Beautiful Canvas Pages Made Easy content) more user-friendly and readable. That’s why these styles are strongly recommended (but not required).

These styles do require the HTML Editor, but they are extremely easy to apply. You won’t have to navigate around the HTML code, as they go at the very top and very bottom of the code.

These styles are applied to your entire item in Canvas, such as a Page or Assignment.

Add these styles as the last thing you do, after you have all your page content in place.

OUR RECOMMENDED WHOLE PAGE STYLE

We strongly encourage you to use this whole page style, which changes three default Canvas styles:

Restricts page width so that Canvas content isn’t soooooooooo wide on larger screens. This has significant benefits for readability.
Increases body font size so that you don’t have to squint to read the text. Again, this makes a big difference for readability.
Bolds and centers the page title so that it feels more like a title and less like an afterthought. This is mostly for the aesthetic polish of the content. (Note: This only applies to Canvas Pages and does not apply to Discussions, Quizzes, Assignments, Announcements, or Syllabus).

Together, these three fixes lay the foundations for excellent designs in Canvas, and they help make Canvas feel more like a contemporary website. This recommended whole page style has been applied to all pages in this course.

If you want to do one of these but not the others, the sections below will cover that.

To use our recommended whole page style, do the following:

Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Copy the following and paste it at the very top, before any HTML code:
<div class="bsu-page-width bsu-page-typography bsu-title-large">
Scroll the bottom, copy the following, and paste it at the very bottom, after any HTML code: </div>
Click the “Save” button in the bottom-right corner.

RESTRICT PAGE WIDTH

By default, Canvas pages are full width, no matter what device you are viewing the content on. This can create a negative experience for people with larger screen sizes, such as large laptop screens or desktop monitors. Long lines of text harm reading speed and reading comprehension.

Following the directions below will center your content and restrict it to 960px, a good width for reading on larger screens. For mobile devices, this will have no effect.

Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Copy the following and paste it at the very top, before any HTML code:
<div class="bsu-page-width">
Scroll the bottom, copy the following, and paste it at the very bottom, after any HTML code: </div>
Click the “Save” button in the bottom-right corner.

INCREASE BODY FONT SIZE

By default, body text in Canvas is 12pt or 16px. Many users, especially users with low vision, find this font size difficult to read. Accessibility professionals generally recommend body text be at least 14pt or 19px.

Following the directions below will increase body text size to 14pt/19px for paragraphs, lists, buttons, and tables. This will not change some items, such as section headings and tags.

Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Copy the following and paste it at the very top, before any HTML code:
<div class="bsu-page-typography">
Scroll the bottom, copy the following, and paste it at the very bottom, after any HTML code: </div>
Click the “Save” button in the bottom-right corner.

PAGE TITLE CHANGES

The default page title style in Canvas is pretty uninspiring (even more so when you add all the fancy designs in this course). Thankfully, you can change that!

This will only change titles on Canvas Pages. It will not apply to Discussions, Quizzes, Assignments, Announcements, or Syllabus.

Make Page Title More Prominent

Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Copy the following and paste it at the very top, before any HTML code:
<div class="bsu-title-large">
Scroll the bottom, copy the following, and paste it at the very bottom, after any HTML code: </div>
Click the “Save” button in the bottom-right corner.

Hide Page Title

Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Copy the following and paste it at the very top, before any HTML code:
<div class="bsu-title-hide">
Scroll the bottom, copy the following, and paste it at the very bottom, after any HTML code: </div>
Click the “Save” button in the bottom-right corner.

These page title changes will not work 100% of the time in all browsers, so we recommend not relying on them but instead viewing them as a nice enhancement.

Advanced Tip

You can also apply these styles to part of your content, allowing other content to not use these styles. This can be useful when you have content that you want to be full page width, such as this box or a wide table. This is also a nice way to make divider lines stand out, such as you’ll see throughout this course.

Note that the restrict page width won’t have any effect on mobile devices, so don’t rely on it to convey meaning.