Showing results for 
Search instead for 
Did you mean: 
Learner II

Change background color of module sequence buttons

Jump to solution

I have a question about the background color of the PREVIOUS and NEXT button colors in the Modules side scroller. Does anyone know how to change the color of these buttons? I would like to make them standout more. I want to make the module sequence footer buttons a dark grey (#808284) with white text. Or I would like them to adopt colors that match the theming of my course. Something similar to the theming of the SAVE button that does pull my color preferences from the Theme editor in Canvas.

Any suggestions or coding help would be greatly appreciated : )

15 Replies

Hi  @Gina_Smith ,

I added the CSS you listed to my stylesheet and I do not see the same issue happening. What browser and operating system are you using?

The only thing I can think of is that you are missing a semicolon after "display:none" which might cause problems for any CSS right after this declaration.

Do you have any other custom CSS? If so, I am happy to take a look at your CSS file to see if anything else jumps out at me.

Good luck!

Hi Ken,

Thank you for the quick reply. I am using Windows 7 and Chrome Version 60.0.3112.101.

I am not using any other custom css code. I added this code to the very bottom of my file (which I have attached). I went back and added the semi-colon to the end but I am still getting the same behavior.

Thanks again for your offer to help ☺

Gina Smith

Learning and Resource Technology Administrator

317.847.7410 (mobile)

Hi Ken, I got it to work. I was using a default css template. When I commented out the code to remove the next/previous buttons the remaining css code was still messing with my global navigation icons. I removed all code but the code to remove the next/previous buttons and it works like a charm!! Thank you!!

That makes sense. I was looking at the CSS and much of what was listed can be changed using the Canvas Theme editor. Now that you mention it, that CSS does look a lot like what we had prior to the theme editor.

I am pretty new to editing css code and I was initially afraid that if I removed all that “old theme” code that I would wipe out the entire theme to our sandbox site ☺ but then I discovered that if I just applied it to a sub-account (instead of the root account) that I could still get back to it and remove the uploaded file even if it blew up whole theme ☺ haha #SteppingOutsideOfMyComfortZone ☺

Gina Smith

Learning and Resource Technology Administrator

317.847.7410 (mobile)

I added your stylesheet to a Canvas test instance and I am seeing a similar issue on Chrome on a Mac. The problem is coming from line 33:

/*if your logo is bigger, you can make room like this*/
#menu { margin-left: 315px; }

The ID for the main menu along the left of Canvas is "menu". This code is pushing all of the contents to the right requiring you to scroll to see the contents. I am not sure why you are only seeing this when you add the code discussed above but this is the line that will be causing that particular problem.