Javascript/CSS to target the background of the Course badge?

[matt5834]

Hi-

I'd like to add a background-image to the course badge in the dashboard. Does anyone know how I might do that? Would it be a javascript/css combo? I tried finding just the css target but could only get: div.ic-DashboardCard_header_hero   but this did not seem to work.

Thank you!

Matt

[aclement]

Update: Way better answer.

This is now a feature in the beta instance of Canvas (and should be live soon). Here are the notes: https://community.canvaslms.com/docs/DOC-8024#jive_content_id_Course_Settings 

---Original Post-----

Matt,

You can change the course card background to an image with the css attribute content. Here is an example:

#DashboardCard_Container > div > div:nth-child(3) > div.ic-DashboardCard__header > div.ic-DashboardCard__header_hero {
     content:url('path/to/image');
}

If you want to apply a different image to each course, you will need to use javascript to apply the content style with the appropriate url.

Hope this helps,

Alex