Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,299,395
Community Members
 
Community Events
165
Community Groups

Emoji used in Card / List Titles now in Grayscale

Hi, 

Has this happened to anyone else? We were using emoji in lists to help denote the status of tickets or highlight certain lists to make things stand out and easier to read at a glance.

The idea came from: https://blog.trello.com/delight-your-day-features as it also helps to keep things a little colourful and fun when working remote, to be honest.

But today I logged on and all List Titles have greyscale emoji as seen in the screenshot below. It is supposed to be a traffic light in the title like this: 🔴 🟡 🟢 ?

It is happening across all boards and on some card titles also, so it has suddenly wiped out a process that was working for task management in Trello without the need for extra plug ins and was something both Mac and Windows users could add easily via keyboard shortcuts.

image.png

5 answers

UPDATE: This was a Chromium issue that is fixed in the latest version. Update your browser!

I just realized that this may be a Google Chrome problem and not an Atlassian Trello problem as I am seeing the same behavior in Google Calendar. ☹️

Well, I still don't know the root cause of the change, but I now suspect that development teams for Trello and Google Calendar e.g. will actually have to change something in order to permit emoji color variants to once again manifest.

Hints:

  1. https://exceptionshub.com/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascript-3.html
  2. https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
  3. https://en.wikipedia.org/wiki/Variant_form_(Unicode)#Variation_Selectors_block
Like Liz Bedwell likes this

I think it is the font-weight that is causing them to be displayed in greyscale. I think removing any bold/light weight from the text should fix the issue. (Just a hunch)

Like Paul Elia likes this

I agree. I ran an experiment on Google Calendar and that's how it works there. See screen shot below.

20211206-125547.jpg

Note that in this example all of my emojis are in a bulleted list, and they all have hyperlinks, so that's why there is a bullet to the left of each section of the message body and an underline for each emoji in the draft Google Calendar invite that I posted.

I suspect that we have the power to override this problem on an individual basis by overriding CSS for trello.com style sheets. It's not perfect since everyone would have to do the same thing on their browser to get the same result, but we're already in that position at my company with a number of Power-Ups and Chrome extensions anyway. I am digging into Stylish now to see if I can get a result.

I'm sure that I could have written my own Stylish overrides and gotten good results, but I'll take this out of the box for now!

I am happy to report that I have restored color to my emoticons / emojis in Trello list names and labels! 😊

The key was to install the Stylish chromium browser plugin and then to subscribe to the Trello overrides from https://jwopitz.wordpress.com/2015/04/08/trello-label-override-style-via-stylish/.

I wound up customizing it just a tad with the following CSS which I put into a separate style set:


/* Remove the bold font-weight in labels to restore color to Emoticons */
.list-card-labels .card-label {
font-weight: normal !important;
}



I also added a few more customizations to suit my preferences:


/* Increase the height of the horizontal scrollbar to make it easier to hit with a mouse. */
#board::-webkit-scrollbar, .u-fancy-scrollbar::-webkit-scrollbar {
height: 20px;
width: 4px;
}

/* Hide the footer; it takes up space without adding value. */
#footer {
display: none;
}



I hope this helps someone else!

Like # people like this

One more post to show that all is well again with this Stylish override of Trello CSS. The downside of course is that this has to be done on every team member's browser as well -- it can't be centralized by going about it this way. Hopefully someone from the Atlassian Trello team will pick up on the importance of this fix and we can go back to having emoticons in list names and label names out of the box!

20211216-094820.jpg

I really appreciate your help and posts, Paul. I'm not thrilled at the idea of losing the bold from my list titles. I installed the Stylish Chrome extension and applied the override from your link, and nothing changed. I believe that's because I would have to use the CSS code you provided to change list titles and card labels to be non-bold. However, I have no expertise in CSS and trying to create a new style in Stylish I am clearly out of my league. I don't know how to limit the change to just my Trello boards, for example.

I think the Trello team needs to give us the option for non-bold titles. It doesn't look like the Google Chrome team is going to move on this any time soon. 

Like Paul Elia likes this

Agreed. I would rather not be using Stylish either.

I am happy to report that the latest version of Chrome has fixed this problem. I have disabled these hacks and all is well again! 🎉

Yeah, I hate this new greyscale title. My emojis are all black and white

This was definitely a Google Chrome problem, as it was just fixed in the latest version of Google Chrome, Chrome 97! If your Chrome browser hasn't automatically updated to the new version yet, you can do it manually:

1. Click on the three-dot Chrome menu button on the far right at top of the Chrome screen

2. Select Help > About Google Chrome

3. You'll see whether your Chrome is up to date or whether a new version is available. The new version is 97.0.4692.71.

4. Once I updated, I didn't have to reboot Chrome for the change to take effect. All the color in my Trello emojis was restored.

Yes! Very nice!

Same problem, please anyone fix this issue!

Same problem with all my Trello emojis suddenly turning grayscale, around the same time as the original post. It's really ugly. I use Windows emoji picker (Windows-period) and Google Chrome. I just tested adding an emoji in Google Calendar and it got added in color, so I'm not having the same problem as Paul Elia in this chain.

My problem in Google Calendar was due to the font in question being all boldface. As soon as I changed that it all worked with color emojis.

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Trello

Taco Tuesday: New years' resolutions with Trello

Congratulations to @Laura Holton , our latest winner of Taco Tuesday! And thanks to @Kristján Geir Mathiesen for sharing the picture of Taco having fun with his new friend  B...

2,392 views 28 41
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you