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) 

[biray]

Thank you for submitting this feature idea! Learn more about the feature idea process and how to champion your idea.

Your feature idea will be open for vote from Wed. September 7, 2016 - Wed. December 7, 2016.

[stuart_ryan]

And just a couple of other concepts I mocked up of what it could look like:

Or:

[stuart_ryan]

Hi Biray,

Thanks so much for putting it in to the next voting cycle, greatly appreciated.

Cheers,

Stuart

[kmeeusen]

I support this!

I played with the image feature the day I got it. Rats, the image is placed under the color frame, instead of above or instead of. Simply being able to have the frame placed on top would solve the problem.

KLM

[jbrady2]

For my part, I prefer the bottom mockup. It looks cleaner than having the border extend all the way around while still providing users with the reference color they may have set for each of their courses.

[stuart_ryan]

 @jbrady2 ​, I agree, it was the last one that I did, and the more I look at the bottom mockup the more it is growing on me, I actually prefer it to the original as it stands (but that is just me).

[James]

I'm a teacher who isn't a graphic artist but I want my students to know they're in statistics. So I change my course image to the word "Stats" (in black) on a white background.

Here's what it currently looks like:

Now let's say that I set the opacity to 0 (the technical way of saying remove the color overlay). Notice the edit icon is not visible in the top right corner. Oops!

That doesn't necessarily have to be a pure white background to have that happen. The image might have a white cloud in the top right corner that just happens to be under the edit icon.

This next one is an issue with the current system. Let's say I want to force my students to use blue because I use blue and I want to tell them to just click on the "blue" course card.

Here's what it will look like currently.

Now, what is the student going to see? The dark blue or the real color of green? Everywhere except the dashboard course card is going to be green.

Setting the opacity to 0 doesn't fix that issue.

Schools who really want to remove the color overlay can choose to do so by adding some custom CSS code to their theme.

     div.ic-DashboardCard__header_hero { opacity: 0!important; }

The opacity is a number between 0 and 1. 0 means transparent and 1 means opaque. Canvas currently has it set to 0.6. They've set it in the HTML itself as an inline-style, which is why the !important is necessary to override it.

[jbrady2]

 @James  Thanks for making these points. It is this type of input that can allow people to better understand the possible ramifications of an idea prior to voting on it. While I understand and see the issue with the edit icon disappearing on a white background, if I read the Release Notes correctly, I don't think your second scenario could actually occur as I believe it was stated that changes made by instructors will not override the ability of the student to change the color of the card, so the instructor could never guarantee the current color of the card. Besides, I am not certain how highly I would think of an instructor that provides his or her students with the very generic direction of "just click on the 'blue' course card" without the apparent understanding that if one course card can be changed to blue then so could others.

[stuart_ryan]

OOH very interesting point about the edit button appearing to go missing  @James ​ I hadn't considered that or run into it as of yet.

I had also considered doing a CSS override, however generally our architecture principals do not allow this (to reduce technical debt), as well as recognising the schools of thought surrounding the use of the !important code.

I remember reading some time ago on the Mozilla site --> Specificity - CSS | MDN

The !important exception

When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with greater specificity will be applied.

Using !important will certainly work, but should be used with care as it does make debugging difficult in future.

[James]

 @jbrady2 ​,

My second set of images result from a pure blue RGB(0,0,255) image, I then saved it as a PNG and uploaded it as my course image. It is not the instructor just changing the color on his/her course card. So, while the instructor can't guarantee the color of the card because of the opacity on the overlay, they can heavily influence it.

Here is what my blue background looks like if the student chooses red.

To me, that looks like a purple card, but it's really the red at the bottom. Maybe adding a thicker red on the left side would make it more obvious, but I still suspect a student is going to see that as purple and not red.

This is a problem that exists in the current system. My images are not mock-ups, I actually went in to the beta instance, turned on the course image feature, and played around with things. What you're seeing is a screen capture from the browser. The only thing I did from the first of each pair to the second is to change the opacity to 0.

I don't disagree with your assessment of faculty who would do that, but the Community is filled with requests for people who want something to look the way they want it to look without regard for how other people might view it. Someone will figure out that they can upload a solid color as their image and then will try to do it. We're techy and understand this stuff, but not everyone does.