Hello, everyone. I’m customizing my Canvas course pages and need some help with a few CSS/HTML features. Specifically, I’m looking for code or methods to achieve: * Scroll-Based Progress Bar (Module Progression): * A progress bar or animation that fills up as the user scrolls down the page. * Ideally, it would be positioned at the top or side of the page to visually show how far down the student has scrolled. * Scroll Lock / Fixed Elements: * How to “lock” an element (like a progress bar, navigation buttons, or a header) so that it stays visible while scrolling through the rest of the content. * Custom Flip Cards: * HTML/CSS examples for interactive flip cards (e.g., question on front, answer on back) that work well within Canvas. * Accordion Sections: * Code for collapsible accordion content areas to make pages more organized and visually clean. If anyone has working examples or tips for making these features Canvas-compatible (especially within the Rich Content Editor or on course pages), I'm just a new user of Canvas and would appreciate any help/ideas that you could share. 🙂 Thanks so much!

HTML/CSS Code

Hello, everyone.

I’m customizing my Canvas course pages and need some help with a few CSS/HTML features. Specifically, I’m looking for code or methods to achieve:

Scroll-Based Progress Bar (Module Progression):
- A progress bar or animation that fills up as the user scrolls down the page.
- Ideally, it would be positioned at the top or side of the page to visually show how far down the student has scrolled.
Scroll Lock / Fixed Elements:
- How to “lock” an element (like a progress bar, navigation buttons, or a header) so that it stays visible while scrolling through the rest of the content.
Custom Flip Cards:
- HTML/CSS examples for interactive flip cards (e.g., question on front, answer on back) that work well within Canvas.
Accordion Sections:
- Code for collapsible accordion content areas to make pages more organized and visually clean.

If anyone has working examples or tips for making these features Canvas-compatible (especially within the Rich Content Editor or on course pages), I'm just a new user of Canvas and would appreciate any help/ideas that you could share. 🙂

Thanks so much!

Find more posts tagged with

Accepted answers

KyleighBecker

I am not sure about the other 1, 2, and 3, but I have some code for accordions! Jsut copy and paste into the html editor, of course (black text on light grey accordions). The screenshot is the mobile view.

Panel 1

Panel 1 Content.

Panel 2

Panel 2 Content.

Panel 3

Panel 3 Content.

Panel 4

Panel 4 Content.

All comments

KyleighBecker

Panel 1

Panel 1 Content.

Panel 2

Panel 2 Content.

Panel 3

Panel 3 Content.

Panel 4

Panel 4 Content.

Chris_Hofer

Hi @IrishCorpuz ...

I don't know if your school has looked into DesignPLUS from Cidi Labs, but I know for sure that the items you listed for #3 and #4 can be done via the DesignPLUS sidebar. We have DesignPLUS at our college, and I really like it. Lots of design options. Their "Flip Cards" feature is relatively new, and it's pretty cool. You can see an example at this site: February 2025 Newsletter | Cidi Labs. And, their accordions are pretty easy to set up as well. None of this requires knowing any HTML, as you don't need to do any code editing.

If your school does not have DesignPLUS, you might want to have your school's Canvas admin team investigate it some time. It is a paid product that integrates with Canvas.

Hope this helps.

walkersb2

If DesignPlus isn't feasible for you in the immediate future, you might want to give https://www.howtocanvas.com/ a look. Sean Nufer has lots of great tutorials and ideas on his blog that you can check out. Some of the tutorials on there are older if you get really enthusiastic and dig back, so you might need to do a double-check and make some updates to ensure that everything meets newer accessibility requirements.

A few things to note:

Unless you have access to your theme editor and the ability to upload a custom css file, you may not be able to do all the things you want (e.g. custom flip cards).
A lot of the customizations that you listed are ones that don't translate in the mobile app (unless you also have the know-how and ability to update your css file for the mobile app as well). I know that fixed elements and scroll-bars don't show up on the mobile app (not even with DesignPlus). A lot of students are heavy mobile app users, so that might be something you want to take into consideration when trying to decide how much time you want to spend on some of these features.
H5P integrations provide a solid way for you to integrate flipped cards and accordion options that work with mobile and don't need theme editor access.
If you haven't bookmarked, Canvas' HTML editor allowlist, do it now. It will save you a lot of trial and error headaches. There are things that you would think should work, but don't and vice versa. It follows its own Canvasy logic.

Unanswered Questions

Multiple Attempts
As a teacher, is there a way to see if a student has taken all attempts of an assignment in the gradebook. My department knows that we can find this information in speedgrader or under moderate of the assignment, but would like to have a way to see it in the gradebook easily (ie: like have a checkmark in the corner of the…
Upgraded pointmarked as incorrect on 2nd attempt
Hi all, we are seing as issue where if a student answers a questions within the quiz which has an acceptable alternative response, and the point is upgraded from 0/1 - 1/1 (and update is pressed with adjustment saved) When the student has a 2nd attempt the original 1st attempt incorrect answer which has been marked as…
How can I bulk download rubrics from multiple reviewers?
I assigned the first draft of an assignment. Each student got rubric comments from me and from one peer. The Speed Grader view gives me a "Select Rubric" menu, allowing me to toggle between my comments and the peer comments. But the Gradebook's "Bulk Download Rubrics" command generates a CSV file with only the peers'…
Classic Quiz Fill in the Blank: Not all possible correct answers are being graded against
Hi all, I'm looking to see if this has happened for anyone else. A student completed a Classic Quiz and one question was counted wrong that should not have been. In the quiz settings, the instructor entered 9 possible answers for this question. The student entered one of these answers. However, that particular question was…
Partial Credit in Alternative Format Questions
Looking for the addition of partial credit for alternative format questions in Canvas, like ordering and category/matrix. We can only do it in close drop down, matching, and multiple response.