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