Jira change Tab colors in the Issue Create Screen

[swathi K]

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

[Andy Heinzer]

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

[swathi K]

Hi Andy,

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

[swathi K]

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]

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.

[Jan Šimek]

@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