Why are JIRA issue status colors changed in Confluence?

[Arne Schotanus]

Lately, we've updated JIRA and Confluence, but now, if I use a JIRA issue macro in Confluence:

* The status 'open' is black, (expected to be 'blue')

* The status 'in progress' is blue, (expected to be 'yellow')

The colors in JIRA are still the same, but why are the colors in Confluence changed?

[Daniel Eads · Accepted solution]

Hey Arne,

The new colors (that you see in Confluence) match the Atlassian Design Guidelines version 3 that we've been rolling out to all our products. If you take a look at Jira Cloud now, the same mappings that you see in Confluence with the status colors exist:

Mapped to the Status Categories in the workflow editor, more generically you get these (grey, blue, green):

The difference you're seeing now between Jira and Confluence is just that the Jira version you're on has mostly ADG2 design language while Confluence is mostly/all ADG3 at this point. Expect Jira to change as well in future upgrades. You can see lots more about ADG3 at https://atlassian.design .

Cheers,
Daniel

[Jonathan Smith · Accepted solution]

@Daniel Eads ,

  Our business just updated Confluence from 6.6.1 to 6.13.4. Our JIRA workflow statuses and Status macro now have different colors. 

We do not plan on updating JIRA for a few more months. Is there a way I can get IN PROGRESS to display as yellow done instead of blue?

[Daniel Eads]

Hey @Jonathan Smith , interesting idea - personally I might try and get people used to the new color scheme in Confluence now as the overall look and feel changed enough now (vs later when you upgrade Jira) that people hopefully pick up the new color scheme. But point noted, you can tweak these on the Confluence side until you upgrade Jira.

I've done this via CSS in the Look & Feel section of Confluence. Here's what it looks like with the yellows in the new look and feel vs the default blue:

And the CSS to apply this color:

 .aui-lozenge-current.aui-lozenge-subtle {
border-color: #FFF0B3;
color: #FF991F;
}

Just remember to remove this customization once your Jira upgrade is ready. Cheers!

[Jonathan Smith]

@Daniel Eads 

  I had a good laugh when you told me to get the business used to the new color scheme. We still wear ties in our IT environment, so any change here is difficult :P

Thank you for the CSS supplied; I'll give it a shot.

Thanks again!

[Jonathan Smith]

The CSS worked great for the JIRA items. On to the easy dropdowns / status macro :)

Cheers.

- Jonathan

[Susan Ostreicher]

@Daniel Eads , we just upgraded to Jira 8.5.1, and we're finding it's hard to visually distinguish now between the "To Do" and "In Progress" categories. Is there any CSS or plugin that will let us change the colors of the status categories in Jira? Thanks for your help!

[Daniel Eads]

@Susan Ostreicher hey! Given the amount of places the status colors are used in Jira, I'd be worried about missing classes if I was trying to change them with straight CSS there. But if you didn't mind having to go back and add any places that might have been missed, you could use the Announcement Banner to inject custom CSS (this would get it on every page).

Looking that the marketplace though, it looks like New Status Colors for Jira (free) or its sibling New Status Colors PRO for Jira (very inexpensive) are along the right lines. The plugin configuration looks pretty easy and you wouldn't have to worry about hunting down all the CSS classes to override.

[Susan Ostreicher]

Perfect - I think the second app is what we need. Thanks so much, Daniel!

[Matt Doar]

Too right. Using js in the ann ban doesn't change the colors in Jira Portfolio, Roadmaps

[Michael_salvio]

Hello @Daniel Eads ,

Thank you for the suggestion above they work great!

We have a very unique use case for senior leadership. Is it possible to base the color on the Jira status name? So if we had two statuses which fall under current (In progress, Planning) we could differentiate them.

The CSS below is contained in the CSS Stylesheet macro on a single confluence page.

.aui-lozenge-default.aui-lozenge-subtle {
border-color: #Ff0007;
color: #Ff0007;
}

.aui-lozenge-current.aui-lozenge-subtle {
border-color: #FFF0B3;
color: #FF991F;
}

 .aui-lozenge-success.aui-lozenge-subtle {
border-color: #004c1f;
color: #004c1f;
}

Thank you!

[Daniel Eads]

Hi @Michael_salvio - I don't believe it would be possible to change the colors based on the name of the status using CSS alone. The selectors only provide the 3 classes (aui-lozenge-default, aui-lozenge-current, and aui-lozenge-success) for the color categories. CSS doesn't have a spec for matching based on content.

It might be possible to use some javascript/jquery to target the individual lozenges and have jquery rewrite their colors based on the text inside the lozenge. The lozenges you need to modify (In Progress, Planning) could be selected by using jquery's :contains() selector . Once you've got those, you'd need to use another function to modify the CSS of the lozenge - however many parents that might be up in the DOM. You'd apply the javascript from the Custom HTML section or using an HTML macro as described here.

It also appears that the New Status Colors app mentioned earlier in this thread has a Confluence variant. However, its Marketplace listing says it only adds orange and red in Confluence, and only for statuses with specific names.