cancel
Showing results for 
Search instead for 
Did you mean: 
garrett_william
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 : )

1 Solution

Accepted Solutions
kenneth_larsen
Surveyor

 @garrett_william , Here is some CSS which will change the background color for the next/previous buttons at the bottom of a module item:

.module-sequence-footer-content a.module-sequence-footer-button--previous,
.module-sequence-footer-content a.module-sequence-footer-button--next
{
background: #747474;
color: white;
}
.module-sequence-footer-content a.module-sequence-footer-button--previous:hover,
.module-sequence-footer-content a.module-sequence-footer-button--next:hover
{
background: #424242;
}‍‍‍‍‍‍‍‍‍

One of the dangers of making this type of override is having it impact other areas in Canvas so I have scoped the code so that it should only change those two buttons. 

I selected a slightly darker shade of grey that will pass WCAG 2.0 accessibility guidelines with the white text and I added in a darker grey for a hover effect.

Let me know if you have any questions.

View solution in original post

15 Replies
kona
Community Coach
Community Coach

Due to the technical nature of this question I'm going to share it with the Canvas Developers group in the Community. They are the ones that work with this side of Canvas and should hopefully be able to help! In addition, you might consider joining the Developers group and checking out some of their other resources/information!

chofer
Community Coach
Community Coach

Hi  @garrett_william ‌...

While I do not have an answer for you, I wanted to check in with you because it's been about two months since any new activity in this particular discussion topic.  It appears that you may have stumped members of the Canvas Community.  Have you been able to find a solution on your own since you first posted this question?  Or, are you still looking for help with this?  If you could please come back here to provide an update, that would be great!  Thanks Garrett!

Unfortunately, I have not received any information regarding my question. I think these buttons need to stand out more like SAVE and PUBLISH. The  PREVIOUS and NEXT navigation options are not always apparent to students because of the light theming of those buttons.

awilliams
Surveyor

I don't know exactly what code it would require, but I know this would either utilizing user scripts‌ or modifying a global CSS file. Maybe  @kenneth_larsen ‌ would happen to know where these buttons are styled. He's done a good bit of work with Canvas CSS through his work with #kennethware‌ and https://community.canvaslms.com/community/answers/partnerships/cidi-labs?sr=search&searchId=44b9fa86...‌.

kenneth_larsen
Surveyor

 @garrett_william , Here is some CSS which will change the background color for the next/previous buttons at the bottom of a module item:

.module-sequence-footer-content a.module-sequence-footer-button--previous,
.module-sequence-footer-content a.module-sequence-footer-button--next
{
background: #747474;
color: white;
}
.module-sequence-footer-content a.module-sequence-footer-button--previous:hover,
.module-sequence-footer-content a.module-sequence-footer-button--next:hover
{
background: #424242;
}‍‍‍‍‍‍‍‍‍

One of the dangers of making this type of override is having it impact other areas in Canvas so I have scoped the code so that it should only change those two buttons. 

I selected a slightly darker shade of grey that will pass WCAG 2.0 accessibility guidelines with the white text and I added in a darker grey for a hover effect.

Let me know if you have any questions.

View solution in original post

Thanks! Testing now, super excited to try this out!

Let us know how it works!

Button Color Change

I could not be happier with the outcome. It was also a nice surprise to see that the choice of dark grey for the buttons match the nav menu title bar I place on our content pages. Thanks again!

Hi  @kenneth_larsen  thank you for this suggestion. I have been searching for a way to remove our Previous/Next buttons on our Canvas training site and this slight modification of your code does the trick:

.module-sequence-footer-content a.module-sequence-footer-button--previous,
.module-sequence-footer-content a.module-sequence-footer-button--next {
display:none
}

However, it also causes major changes to my global navigation buttons in the far left-hand navigation (weird, I know). I have attached a screenshot taken before applying this code and a screenshot taken after applying the code. After the code is uploaded it looks as though all the global navigation icons are gone but after closer observation there is a horizontal scrollbar added to the bottom and if I scroll to the right (quite a ways to the right) I can see the altered icons.

If you have any thoughts on what might be causing this I would so appreciate hearing them. I am so close to getting this where we need it.

248649_Global-Nav-Before-Uploading-Code.png               248650_Global-Nav-After-Uploading-Code.png