Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
lchilds3
New Member

How do you customize the Canvas dashboard?

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

0 Kudos
6 Replies
kona
Community Coach
Community Coach

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

Thanks! Kona

nschutz
Community Member

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
New Member

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.

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

Tagging in the coding wizard  @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.

Course Card Grade Overlay

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

340454_Dashboard - Edited.gif

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