nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to change color of columns?

roy_king

Hello, I have a question.

I use next-zen Kanban project.

Accepted answers

Andy Dassing_7pa4v7

It's easy! There are a few sites to which I apply custom CSS coloring using a Chrome extension named "User JavaScript and CSS" (v1.2.8) by tenRabbits,

Install the "User JavaScript and CSS" extension (LINK)
Open the extension's Options
+ Add new site (for your Jira Cloud, e.g., mycompany.atlassian.net)
Name your customization (e.g., "MyCompany Kanban Column Colors")

In the CSS panel (right side) enter this:

#ghx-column-headers li:nth-child(1) { /* IN SPRINT */
    background-color: #E0E0E0;
}
#ghx-column-headers li:nth-child(2) { /* IN PROGRESS */
    background-color: #E0F0FF;
}
#ghx-column-headers li:nth-child(3) { /* FOR REVIEW */
    background-color: #FFE0FF;
}
#ghx-column-headers li:nth-child(4) { /* DONE */
    background-color: #E0FFE0;
}

Adjust the colors and add/remove columns as needed.
Save your changes, the refresh your Kanban page to see the changes.

All comments

Ollie Guan

Hello @roy_king ,

Welcome to the community!

1. How to change color of columns?

What does color mean here? Can you upload a screenshot?

2. Can I change order of columns?

Drag directly in the column.

TIM截图20200513145904.png

roy_king

Like thisI want to change background color.

Manoj Jain

@roy_king - As per my understanding we can't colour code column.

Having said that you may try use card color option to highlight specific tickets matching required criteria using JQL.

https://support.atlassian.com/jira-software-cloud/docs/customize-cards/

John Funk

Hi Roy - No, you cannot change the color of the entire column. Only the left hand-side of the individual card.

Spasoje Jesic

Hi John, how I can do that?

John Funk

Go to Board Settings > Card Colors

Andy Dassing_7pa4v7

It's easy! There are a few sites to which I apply custom CSS coloring using a Chrome extension named "User JavaScript and CSS" (v1.2.8) by tenRabbits,

Install the "User JavaScript and CSS" extension (LINK)
Open the extension's Options
+ Add new site (for your Jira Cloud, e.g., mycompany.atlassian.net)
Name your customization (e.g., "MyCompany Kanban Column Colors")

In the CSS panel (right side) enter this:

#ghx-column-headers li:nth-child(1) { /* IN SPRINT */
    background-color: #E0E0E0;
}
#ghx-column-headers li:nth-child(2) { /* IN PROGRESS */
    background-color: #E0F0FF;
}
#ghx-column-headers li:nth-child(3) { /* FOR REVIEW */
    background-color: #FFE0FF;
}
#ghx-column-headers li:nth-child(4) { /* DONE */
    background-color: #E0FFE0;
}

Adjust the colors and add/remove columns as needed.
Save your changes, the refresh your Kanban page to see the changes.

Vahan Alaverdyan

This solution is a headache for non-technical people. It would be so much better if Jira could provide this simplest solution only with one click.

Raj Grewal_4v03hk

Thanks was real simple to implement.

Kailash Venkatasubramanian

That was a simple solution even for non technical folks. Hardly took 2 minutes to implement. Thanks!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

jira

cloud

jira-software

atl-gruland