Card Cover Gradients

[Tara Malone]

Hey everyone - I've done some looking but haven't found this exact issue. And I'm not sure it's an issue, or if it's just what it is. There is an obnoxious gradient on my full cover images - it's a pale gradient when you use dark lettering, a dark gradient when you use while lettering. It's very obviously at play in the original release article: https://community.atlassian.com/t5/Trello-articles/Introducing-Card-Colors-and-Full-Covers-on-Trello/ba-p/1395625 

Is there a way to make this STAHP?

I hope I'm being dumb and overlooking something simple. Thank you so much. 

[Brittany Joiner · Accepted solution]

@Tara Malone not sure I understand what you mean - can you share a screenshot?

[Tara Malone]

I apologize, I am such a nerd. I took this and forgot to upload. So the top and bottom cards (Records and Access shot) are examples of the full cover images. At the top (dark lettering), the whole image appears faded (more so toward the bottom) because of the gradient applied I think by Trello. There also is a dark gradient on the bottom card (white lettering; the background gets much darker toward the bottom. 

You can see the same thing happening in the composite photo shot, which was from Trello's release article on this feature. The full cover images with dark lettering have a white gradient at the bottom (ex: Debbie Fisher); the images with light lettering have dark gradient (Alexis Moss). 

My question: is there a way to stop that/mitigate it?

Thanks again for helping; sorry for the lack of screen shot earlier. I appreciate the nudge.

[Tara Malone]

Additional note: in the first screen shot, notice the middle card (the one that's not a full cover image) has a picture without a gradient, which is what I want. 

[Brittany Joiner]

@Tara Malone ah i see what you're saying, so i think when you apply the full cover, it naturally does apply a gradient so you can read the text. I don't know a way to turn that off unfortunately. I think what you're wanting is the full cover but the text to be underneath it, not layered on top of the image, right? In that case, I think you can do this by selecting the cover, adding the image, and then choosing the option on the left (not the right) to apply the cover image, but to put it abov the card title instead of overlaying the card title on it. 

[Tara Malone]

Hey there - Thank you, I think you answered my question (that what I want isn't possible). I was hoping for the full cover image with text on top (not below), but with no gradient. It sounds like I may have to cope with either the gradient or your suggestion above. Either way, this tells me what I need to know so I appreciate your time in answering! 

[Kris K]

@Tara Malone I want exactly the same thing. I want the text on top without a gradient.
I think there should be 4 options, the two existing options and two more options (white/black text without the gradient).
I am putting a rectangular cover image that has a white background with a small picture on the right side, so the text would clearly be visible. I really dislike the washout look.

[Wayne]

I wish they would just fix this, it's lame to ruin cover art with a gradient.

[Cooper Wharton]

Solved Using 3rd Party Extension

I also wanted this feature and finally just made it myself. All you need to do is run a user script to override 2 CSS values: 

# Javascript:

(function(){
let style = `<style>
   div[style*="background-image:"] > a {
      overflow: auto !important;
      background: none !important
   }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

As of the time of posting, these are the only 2 CSS values that make the white gradient covering the image (as far as I can tell).

You can automatically run this script anytime you open the page in chrome using an extension like Tampermonkey. Alternatively you can just paste this code into the developer console every time you open Trello (Ctrl+Shift+i  -->  Ctrl+v  -->  enter).

Disadvantages:

• I can only guarantee this works in chrome with Tampermonkey
• Tampermonkey suggests enabling Developer Mode in chrome (one extra step)
• Will not work in the app if you use Trello there

Example:

I used this to add multicolor Covers, but should work with any background image (this persists on reload of the site).