HTML/CSS Code

[IrishCorpuz]

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:

1. 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.

2. 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.

3. Custom Flip Cards:

   • HTML/CSS examples for interactive flip cards (e.g., question on front, answer on back) that work well within Canvas.

4. 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!

[KyleighBecker · Accepted solution]

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. 

<details style="margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f0f0f0; color: #000000;">

    <summary style="font-size: 1.1em; cursor: pointer; margin-bottom: 5px; background-color: #f0f0f0; color: #000000;">Panel 1</summary>

    <p style="margin: 10px 0 0; padding: 5px;">Panel 1 Content.</p>

</details>

<details style="margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f0f0f0; color: #000000;">

    <summary style="font-size: 1.1em; cursor: pointer; margin-bottom: 5px; background-color: #f0f0f0; color: #000000;">Panel 2</summary>

    <p style="margin: 10px 0 0; padding: 5px;">Panel 2 Content.</p>

</details>

<details style="margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f0f0f0; color: #000000;">

    <summary style="font-size: 1.1em; cursor: pointer; margin-bottom: 5px; background-color: #f0f0f0; color: #000000;">Panel 3</summary>

    <p style="margin: 10px 0 0; padding: 5px;">Panel 3 Content.</p>

</details>

<details style="margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f0f0f0; color: #000000;">

    <summary style="font-size: 1.1em; cursor: pointer; margin-bottom: 5px; background-color: #f0f0f0; color: #000000;">Panel 4</summary>

    <p style="margin: 10px 0 0; padding: 5px;">Panel 4 Content.</p>

</details>

 

[IrishCorpuz]

Aww. Thank you so much, @KyleighBecker this is helpful! 💖

[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.

[IrishCorpuz]

Thank you, @Chris_Hofer appreciate it. 😊

[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.