Canvas CSS for Page Headers Guide
CSS
··2 min read

Canvas CSS: Page Headers

Adding a header to a Canvas page gives your course more of a “website” look. With this specific page header, I also resolved a few design issues:

  1. Several of the faculty I work with aren’t fans of how Canvas styles page titles; they think the font is too light, and I tend to agree with them.
  2. Faculty often have really long titles for pages that are difficult to read in the Modules area, and they take up too much real estate on the page itself. Figuring out a way to add a subtitle under the Canvas page title provided a good workaround: Titles can be split across two lines on the page, and only the first line of the title shows up in the Modules area.
  3. I typically recommend to faculty that they add a short text introduction to their pages to improve the learner experience. However, these intros tend to get lost in the rest of a page’s text, so I created a section with a dark background and light text to resolve this issue.
A screenshot of my custom page header for Canvas that shows the styled page title, subtitle, and introduction block with a dark background.
Screenshot of my Canvas page header with the 3 sections annotated

You’ll note in this screenshot that I also adding styling for hyperlinks so they have the appropriate contrast ratio for accessibility on a dark background. Borders will automagically be added whenever you use the subtitle and introduction block together: The CSS adds the orange line under the subtitle and a white line above the introduction block to create the illusion of one highlighted stripe that distinctly separates the two-part title from the rest of the page’s content.

Considerations

You’ll need to have both a title and subtitle and some introductory text to get the right effect with this layout. If you have level-2 and level-3 headings in your introduction block, they’ll be white. (I didn’t include headings in my sample introduction block because per APA’s guidelines, the “introduction” heading is implied. Old habits die hard.)

Note you could repurpose the introduction block as another section on a page, like a footer; just be aware that it’s going to have an 8-pixel-wide white border above it unless you tweak the CSS in your own version.

Code

I’m in favor of big, distinct headings, so I haven’t reduced the size of them for smaller screens in my CSS. If your taste differs from mine, you’ll want to address this in your own version. (Check out my Canvas CSS Overview for advice on writing your own code.)

css.php