Remove colour overlay from course cards that have an image

[stuart_ryan]

This idea has been developed and deployed to Canvas

Howdy all,

Firstly I have to say the new course cards image feature is awesome and a great leap forward. I have been using it a bit now and have a small request for a future revision.

When a course is given an image for the course card on a user's dashboard, I would really like to see the colour overlay removed (so that the image does not looked washed out with the user selected colour).

Ideally, I would love to see this configurable on an account level rather than an individual course level, but that is just from an administrator's perspective.

Just to visualise this more, the current behaviour with a couple of different colours:

And the ideal/requested behaviour:

Additional thoughts:

I do realise the colour is important for a few different areas in relation to the course, so perhaps the bottom bar could be extended as a border around the entire card (just as one example).

Many thanks  team,

Keep up the awesome work!

Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2017-05-13) 

[rgibson1]

A spoke to Fritz Fitzgerald and he said that "...getting rid of the color overlay is the Canvas Way" Instruction by Instructure with Fritz Fitzgerald - YouTube

:smileylaugh:

[rwoodard]

My preference would be to keep the color overlays but add a "No Color" option to the selection of overlays.  I would like to see this left in the control of the user, if the instructor decides on what color the overlay will be we have the possibility of all of my classes using a purple overlay making it pointless.

[James]

I watched the video you linked to and I didn't see that. I saw a veiled reference under integrity to "we say we're going to do something and then we do it" (slight paraphrase). Is that what you're talking about? Or was it the Excellence part? A synonym for integrity is honesty, and sometimes that means admitting you're wrong and there is a more excellent way than what you showed people originally.

[julie_bradley]

Great idea! We attempted to change the Hex code to clear and it helped.

[hockenburys]

Another solution could be to restore opacity setting to .99 to trigger a new stacking context create style the color overlay using CSS mix-blend mode. I used the multiply filter, which retains the color when there is no image. High contrast, BW images work best, but color images can be okay too. Creating Dashcard images that are 4x the resolution results in sharper text and better detail. Create a photoshop template that has a layer filled with a Dashcard color and filter setting of "multiply", add a layer with your image underneath—simulates the end result before you upload into Canvas. Add text, shapes, etc to enhance...

div.ic-DashboardCard__header_hero {

  opacity: .99 !important;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)" !important;

  filter: alpha(opacity=99) !important;

  -moz-opacity: .99 !important;

  -khtml-opacity: .99 !important;

  mix-blend-mode:multiply !important;

}

[michellemeazell]

Hey laurakgibbs​ did you see this?

[laurakgibbs]

Thanks,  @michellemeazell  ! I just voted up! I'm all for color coding the calendar, absolutely... but I really hope they will fix this overlay thing to make it optional! I was excited about doing the images, but the best I could do was choose white-overlay, and even then they don't look so great, although I was still excited to share with my students in the announcements (see below). If they fix this serious problem with the color overlay I will be motivated to do more with this feature, letting students vote on the image as part of a swap-out every few weeks or so, etc. etc. But that color overlay has seriously got to go to make this really work for me. Why not just MAKE IT OPTIONAL: if people like the color overlay, sure, let them keep it. People should be able to have what they want. And for those of us who want to use the image as we uploaded it, I think we should be allowed to have what we want/need too. Cuique suum! 🙂

[laurakgibbs]

Mwahahaha. That is exactly how I felt when I saw what happened to my lovely, vibrant images... they were turned into family snaps from the 1960s. 🙂

[rgibson1]

Instructure, that's 72 VOTES! Seventy-Two Votes so far! 7-2. And we have a month and a half left!

[DaleDrees]

So good!

Instruction by Instructure with Fritz Fitzgerald

Thanks for the link Rob Gibson