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,293,345
Community Members
 
Community Events
165
Community Groups

Jira change Tab colors in the Issue Create Screen

Hi,

In my project, in the Issue create screen i have 3 Tabs. I would like to customise the UI experience for the customers. So i want to change the Tab colors.

I have tried inserting the below .CSS in the banner.  

<style type="text/css">
.tabs-menu{
font-weight: bold;
background-color: #FFDE8E;
color: black;
border-color: #CCCCCC;
background-image: none;
text-shadow: 0 0 0 #DDDDDD;
}
.tabs-menu:hover {
font-weight: bold;
background-color: #F5BA36;
color: black;
border-color: #AAAAAA;
background-image: none;
}

This is changing the TAB background color but not the Tab color. I have tried with the .tabs-menu .menu-item. But it didn't work. Please let me know if it is possible to change the tab color.

 

Thanks in Advance

 

1 answer

I found I could do this with a script in the announcement banner, but in this case I was only looking to change the background-color element in each tab/cell/li element. I pulled from a couple of previous posts on our site to figure this out, and had to play with this for a while in order to get it to look just right.

With this script I was able to change the background of each tab.  But I was also playing with the possibility of changing just the link text.   You will note that there are two such selectors for each element.  This is because the elements on the page are named differently if the create screen is a popup on the page versus if you right click to open the create button in a new browser tab which dedicates the entire page to the create screen: 

<style type="text/css">
.form-body>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(1),
.content>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(1){
background-color: #e67e0c;
}
.form-body>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(2),
.content>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(2){
background-color: #d641f4;
}
.form-body>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(3),
.content>.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item:nth-child(3){
background-color: #41f465;
}
</style>

previous related post:

https://community.atlassian.com/t5/Jira-questions/how-to-hide-default-watchers-field-from-issue-view-screen/qaq-p/691337

Apologies for the atrocious color selection in my example ;)

I hope this helps,

Andy

Hi Andy,

 

I had tried the above code in banner but it did not work.

It worked for me with the below code.

 

<style type="text/css">
.aui-tabs > .tabs-menu .menu-item.active-tab a, .aui-tabs > .tabs-menu .menu-item.active-tab a:link, .aui-tabs > .tabs-menu .menu-item.active-tab a:visited, .aui-tabs > .tabs-menu .menu-item.active-tab a:focus, .aui-tabs > .tabs-menu .menu-item.active-tab a:hover, .aui-tabs > .tabs-menu .menu-item.active-tab a {
background-color: #e67e0c;
}

.aui-tabs > .tabs-menu .menu-item a, .aui-tabs > .tabs-menu .menu-item a:link, .aui-tabs > .tabs-menu .menu-item a:visited {
background: #46e735;
}
</style>

Andy Heinzer Atlassian Team Aug 02, 2018

hum, I wonder why it didn't work for you.  What version of Jira are you using?  I tested mine against my 7.11.0 installation of Jira.   I am wondering if perhaps the elements might be named differently in other versions of Jira.

Anyways, glad to hear that you found a solution.  Thanks for posting back with what worked for you.

@Andy Heinzer Hi Andy, is this possible in Jira Cloud as well? We would like to change the color or even the size and look of the field tab, but i have not find any help in settings or anywhere else...

 

Thanks

Suggest an answer

Log in or Sign up to answer
TAGS

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