cancel
Showing results for 
Search instead for 
Did you mean: 
Surveyor

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
Community Coach
Community Coach

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

Thanks! Kona

Adventurer

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.

Community 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.

Community Advocate
Community Advocate

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 clee@frontiercharteracademy.org

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