cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Learner

Replacing course menu points with images

Jump to solution

Hello everyone,

We've recently undertaken the challenge of designing a course for very young students who are unable to read. As such, we need the menu-points in the course navigation to appear as images instead of text.

I've seen this done before but I am not sure if it was some sort of custom JS/CSS or if there's a function in Canvas that I just have to enable.

To be clear, I am talking about the section marked in the attached image.

Thanks in advance!

14 Replies
Highlighted

That is very cool, Matt! Would you be able to share the CSS? I know CSS and JS but I'm only beginning to understand how the CSS framework operates in Canvas right now, so any examples would be highly appreciated.

I'm also confused as to where you apply the CSS. Is the Canvas LMS CSS document available - I assume you access that and then make alterations and then override the basic one in the theme editor with your changes?

Highlighted

I usually just right click and Inspect Element on whatever it is I'm trying to change. I'll play around with the different settings until it looks the way I want. After that I will add everything to our custom CSS file and upload the changes using the Theme Editor. 

Highlighted

When you upload CSS through the theme editor, does it just override whatever is in the Theme's CSS?

For example, if I upload a CSS document with just the following, will it just override this selector and leave the rest of the theme's CSS code intact?

p {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}

Or do I need to find the entire CSS document for the theme and then make changes in that and re-upload it?

Highlighted

It's an override so you only need the small pieces of your own changes to upload. 

Highlighted

Thanks a bunch Matt, you rock! 🙂