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) 

[deangelisa]

If I tell the workaround CANVAS might make another change making the workaround unworkable.

[Stef_retired]

laurakgibbs, I've seen a custom CSS solution offered at

This video is currently being processed. Please try again in a few minutes.

, with some caveats (discussed in the comments section under the video). Note that applying this solution does not affect the colors of the courses on the Calendar.

[laurakgibbs]

I'm trying to promote this with faculty, though, and a complicated CSS solution is not a solution if we want for everybody to use it and use it happily. I really hope we will see a solution to this, a solution for everybody. Unlike the situation with javascript-in-Page versus javascript-in-File (where I really appreciated the explanation of why something that looked weird on the surface actually had an underlying reason), I still have not seen anything like an explanation of what is going on here and why. It looks like a real mistake in terms of how the feature was implemented, which is why I hope it will be fixed before too long! Every time I share a screenshot of my dashboard to show how the course cards look my first thought is, "Eeek, that is actually kind of ugly..." which is not a good thought to have.

[Shar]

Oh Wow! I didn't know these Fast Track videos were even available!! Golly! Thanks stefaniesanders‌ for pointing out this particular video.

laurakgibbs‌, the CSS solution is not so complicated and only requires the change to be made at the account/subaccount level and then it affects all the courses in that account/subaccount. Your friendly neighborhood Canvas admin can do that for you following precisely the steps outlined in the video. Your teachers never even have to know there was a change made.

I plan on asking members of my team if they have heard any comments/pushback/complaints about the color overlay on the course cards in a web browser. I actually don't mind the color wash so much (or have gotten used to it), I have a series of courses that I've colored in a rainbow so whenever I show my dashboards I get hungry for Skittles candy.

Cheers - Shar

[Stef_retired]

You're welcome, ishar-uw I ❤️ the Fast Track series.

[laurakgibbs]

Hi ishar-uw‌, I'm not sure what it is like at other schools, but we are in the midst of a Canvas rollout and it's very top down, very scripted, very much about the marketing plan. So, I am grateful for the things we can do on our own as faculty in Canvas (I'm just an instructor, not a designer or admin or anything): I can create Canvas development courses to play with, I can participate here in the Community, I can experiment and blog about what I learn, etc etc.. I don't have to ask anybody for permission for any of that! Thank goodness! Maybe when we go to all-Canvas next year (right now it is both Canvas and D2L legacy), then people will relax and have more time to just play with Canvas and experiment. I hope so. 🙂

[johnmartin]

Lol,  @deangelisa , I understand. This has happened to me several times... 

[stuart_ryan]

Another temporary workaround for those that were happy to use #FFFFFF is just to use #FFFFFE, close enough to the same effect if you are happy to accept the caveats.

Really looking forward to some sort of feedback from Instructure on this one.

[joseph_ledosque]

The solution to this issue is fairly simple: Just move the color bar to the right hand side underneath the "edit" icon. This way the color doesn't interfere with an image (or absence of an image), it still is there to indicate a class, and the icon is visible always.

If teachers are telling their classes to click on the *insert color here* icon on the dashboard, then students shouldn't be allowed to change the colors of the icons on their dashboard, they should just correlate to whatever color the instructor sets it to. Otherwise, teachers need to find another way to indicate which is their class.

[laurakgibbs]

That is a very nice solution!