Remove colour overlay from course cards that have an image

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:

200569_canvas_demo_1.pngcanvas_demo_1.png

200579_canvas_demo_2.pngcanvas_demo_2.png

 

And the ideal/requested behaviour:

200580_canvas_demo_3.pngcanvas_demo_3.png

 

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) 

208 Comments
mjennings
Community Contributor

HIL-FREAKIN-LARIOUS!

garrett_william
Community Participant

I voted UP for the same reason stefaniesanders mock-up. For me, I am developing for a virtual school/ program and we like to have consistent branding. We build our own courses and have consistent design elements throughout those courses. I think the course cards should be viewed similar to Canvas Catalog card design. Branding the cards is just another way to have consistent design, from login screen to course dashboard to front page to module page. I want all those things to speak the same design language. Especially when someone is learning about our courses or school from a user. I want what everyone sees to be consistent. Being able to toggle the color overlay off as an institution is important for this reason.

rwoodard
Community Explorer

I did not vote up on this because i do not want to remove color overlay from course cards that have an image, i do however hope to have the choice of having no fill color.

rgibson1
Community Champion

They need to give us the option. For those that like it...great. But give us the option to remove it. I still maintain that there's an issue with usability/accessibility with the color overlay. It doesn't provide the required level of contrast when text is embedded in the image. And frankly, it doesn't really help anyway. The color becomes so muddled with the background that it's effectively useless. The ONLY exception I've seen are the very, very high saturation colors (eg. bright red). When you overlay dark green on top of an image it turns to...I'm not sure what.

laurakgibbs
Community Champion

I agree; I'm in favor of choice in all things, and that's actually my single biggest gripe with Canvas: a recurring mania for sameness instead of freedom of choice. Ugh.

For example, I understand that there should be defaults for names of navigation items, and even an institutional option to lock down those navigation item names if needed. But if there's not a need to lock down navigation names, I wish instructors could choose the names themselves if they want. The fact that I have to install a separate instance of the Redirect App just to rename something in my own class navigation is really annoying. And yes, I have very good reasons for renaming some items in the navigation for my class; the idea that all classes would be so similarly designed as to not need that option is kind of scary IMO. Diversity benefits us in all things, including course design.

I feel the same way here: I personally think the overlay looks terrible, but if some people like it, sure, they should be able to have it. And institutions should be able to lock it in if everything is supposed to have the same overlay color for reasons of institutional branding... but those of us who DO NOT LIKE IT deserve the same freedom of choice, being allowed to turn it off if we want.

kwarkent
Community Explorer

I would also prefer to be able to get rid of the color overlay.  Our school district would be interested in the ability to set a course image (textbook cover) as a default image for each course without forcing teachers to go in and upload the image for each course.  I realize that this isn't something that would necessarily appeal to everyone (especially at the post-secondary level) but our elementary and middle school teachers would greatly appreciate this as they start getting students familiar with Canvas.

tom_gibson
Community Explorer

I like the idea of being able to remove the color overlay, but it also adds a cool effect, so making this configurable would be great.

LOVE the image cards.

tmp06a
Community Novice

I did not read all the way through, but this is a problem and I voted for it. If it hasn't already been said, it would be at least a plus to be able to back out of a color overlay after you've assigned it. There does not seem to be anyway to return to neutral --not good.

Tina

Stef_retired
Instructure Alumni
Instructure Alumni

Hi  @tina_powers , I'm sorry to say I don't know what you mean by "return to neutral," but you can change the color of the course card to white by entering FFFFFF in the color box. If you do that, you will no longer be able to see the edit pencil, so if you want to change it again, you'll have to guess where to click.

kwarkent
Community Explorer

This is a particular issue if you or students are viewing courses on an

iPad. Because the iPad doesn't support the image, everything on the top of

the course is in white and it is really hard for a student to see where to

click on anything.

Kendal Warkentine

AP European History

Derby High School

920 N. Rock Road

Derby, KS 67037

- Find Us on Social Media! -

Facebook <https://www.facebook.com/DerbyPublicSchools/> • Twitter

<https://twitter.com/DerbySchoolsKS> • Instagram

<https://www.instagram.com/derbyschoolsks/> • Pinterest

<https://www.pinterest.com/derbyschools/>

On Wed, Oct 5, 2016 at 3:03 PM, stefanievsanders@gmail.com <