[ARCHIVED] How do you customize the Canvas dashboard?

[lchilds3]

Hi everyone, has anyone customized the Canvas dashboard beyond what is easily available on Canvas?

[kona]

 @lchilds3 , greetings! Could you provide a little more information on what type of customizations you are thinking of or wondering about?

Thanks! Kona

[nschutz]

We have disabled the links (they are just plain text) under To Do in both List View and Card View for students only so they don't click on a To Do link and ended up in an assignment that's still locked. All our modules items are set up to be unlocked sequentially.

[tbatiuk]

We made the 'View Grades' button more noticeable with a blinking red outline (annoying, but it's the most helpful part of the card layout Dashboard that students tend to miss) and overlaid the course grade marks on the course tiles.

[alunsfor]

Tim, would love to know how you did that.  I think this might be a great option for our students.

[tbatiuk]

Tagging in the coding wizard  @clee7 

[clee7]

Hi Aaron,

The grades overlay for the course cards has been built to meet some of our specific needs, so at the moment this code would likely take a bit of tinkering with to setup for others. Essentially, we just use API calls to gather the logged in user's grades, and then insert our own grade element into the appropriate Course Card via a JS function. I will simplify it a bit so that it is copy/paste friendly for other institutions and post it here when I get a few moments, but this is the result. The users can also click on that grade overlay to view the grades page for that course.

For the pulsing view grades button, we added the following to our custom JavaScript and Styles Sheet files uploaded via the Theme Editor. 

CSS

@keyframes shadow-pulse

{

0% {

box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);

}

100% {

box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);

}

}

JS - You may need to place this inside of a window.onload function as well. 

//BEGIN VIEW GRADES CUSTOM STYLING

var sidebar_buttons = document.getElementsByClassName("button-sidebar-wide");

for (var i = 0; i < sidebar_buttons.length; i++) {

if (sidebar_buttons[i].innerText == "View Grades")

sidebar_buttons[i].style = "animation: shadow-pulse 1s infinite; color: red";

}

//END VIEW GRADES CUSTOM STYLING

[kirandj]

Hi Clee, Will you be able to share the Javascript for the grades overlay? Will it be possible to include text like : completed instead of displaying the actual grade?