Showing results for 
Show  only  | Search instead for 
Did you mean: 

Customizing the New Gradebook

Hello faithful Canvas Community followers! Like many of you, my university will be flipping the switch to make the New Gradebook into THE Gradebook for everyone. Just to go on record, I love the New Gradebook! However there are a few things I would like to do differently, so I am seeking a help from the community. Here are the two things I am trying to do and wondered if using custom java script would solve these.

Modification #1: Make muted columns easier to identify

Rationale - Having the word muted located on to the right of the score information, limits the ability for faculty to resize the column and still have a quick view of the status of the column. Pop Quiz - Which of these columns is muted?


I think this could be solved in a few ways. One would be to move the "Muted" label from the right side of the score to the left side and maybe have the text in red. The other would me to just bring back the "Bell" icon.


I am pretty sure that custom JavaScript could take whatever is "writing" the word "MUTED" could be modified to place it in the front of the "Out of Score" and maybe even have the color changed with a bit of inline CSS. I am just not sure how to locate and write it. 

Modification #2: Make the Notes column sort-able

Rationale - see the feature idea, 

I am very happy to promote and get people to vote on this idea, however I am aware that these things can take time. While we wait on this, I would love to see if it is possible to add a "kabob" menu to the notes column that would give the Sort A-Z & Sort Z-A options similar to all of the other columns have. 


Again, I think that this would be possible with custom JavaScript, but I am just not familiar enough to figure out how to make this a reality.

If anyone could think on these items and is willing to offer suggestions, I would greatly appreciate it.


4 Replies
Community Coach
Community Coach

 @mjennings , this isn't my area of expertise, but I've shared it with the Canvas Developers‌ group in the Community to see if they can help.


Community Member

So, I did a bit of poking around and it looks like the class "_2TKlgJL" is tied to the "MUTED" text in the column title on all of the courses I have looked at, I can't test on another institution's Canvas instance so I am not sure if that is something that is specific to UIowa or if this is Canvas wide. You could use some CSS for a quick and dirty solution for the first one, if you are already using Custom CSS at your institution that change could be made there. Changing the color is easy, changing the position is a bit more work and I don't really think that is worth the effort.

If you are looking to add this as an individual Tampermonkey is always an option, but I am usually not too excited about using an external tool for this type of thing especially when student data is involved. Whatever you do, test it before you roll anything out and be careful when editing the Account CSS/JS as there isn't really an "undo" button.

Here is a quick walkthrough on CSS and the Canvas guide on adding CSS/JS if you need. 

CSS Tutorial 

For the second, I am honestly not thinking it would be worth making an extension for it, but others may be interested in whipping something up if there is interest. I believe you are able to download the Notes column in a CSV if it is important to sort by it.

Let me know if you have any questions.


Thanks  @michael-espey ! I am pretty familiar with modifying the custom CSS & JS for my sub-account. We have made some pretty substantial additions with the open sources version of Kennethware. Will look into the "_2TKlgJL" and see if that is true on our end as well.

So I finally got to look into this a bit more. It looks like "_2TKlgJL" is on all of the muted columns for me as well. I was able to adjust it's color pretty easily, but agree that adjusting the position is more than I would rather do via CSS. 

I will keep looking into a JS solution to place an icon to left of the column header as in proposal 2 pictured above. I did fin that there is an empty DIV with the class "Gradebook__ColumnHeaderIndicators" which looks like I might be able to inject an icon into but it is above the "_2TKlgJL" in the code.  I'll keep digging.

As for the sortable notes column, downloading it really defeats the purpose that we use it for and adds a step of complication for our clinical faculty. I am really at a loss as to why this functionality hasn't been included yet as it seems like a basic option that is already available in the old Grade Book.

 Thanks again!