How to add CSS styles to Issue Matrix panel in Jira

This article explains how to add CSS styles to the Issue Matrix panel in Jira using the app, Issue Matrix, on server. Here, we will be adding CSS Styles to have columns and text in it with different colours. 

Instructions

1. Login to Jira as an Administrator.
2. Navigate to  > Issues > custom fields > Add custom field.
3. Select All and search for "Issue Matrix" and click on Next as shown in the below screenshot:
   
   

4. Add a name to the custom field (for example, Issue Matrix_2)

5. Add the custom field to the project screen where it is required:
   

6. In the above screenshot, the custom field Issue Matrix_2 is added to the B1 project screens.
7. Now search for the custom field, which was created in the earlier step.
8. Go to Configure > Edit Matrix Configuration > Epic and click on Next.
   
   
9. Configure the below details and click on Save to save the configuration.
   
   

10. Navigate to System > Announcement Banner.

11. Add the below CSS Script in the Announcement Banner section and modify the custom field ID (Ex: Issue Matrix_2 has ID 10621).  The th and td elements are used for table cells. th is used for table header cells while TD is used for table data cells.
    

    <style type="text/css">
    #issue-list-panel-10621 table th[data-id="issuetype"], #issue-list-panel-10621 table td.issuetype {
    background:red;
    color:black;
    }
    #issue-list-panel-10621 table td.issuetype a {
    color:black;
    }
    #issue-list-panel-10621 table th[data-id="issuekey"], #issue-list-panel-10621 table td.issuekey{
    background:green;
    color:white;
    }
    #issue-list-panel-10621 table td.issuekey a {
    color:white;
    }
    #issue-list-panel-10621 table th[data-id="priority"], #issue-list-panel-10621 table td.priority {
    background:yellow;
    color:black;
    }
    #issue-list-panel-10621 table td.priority a {
    color:black;
    }
    #issue-list-panel-10621 table th[data-id="issuelinks"], #issue-list-panel-10621 table td.issuelinks {
    background:orange;
    color:black;
    }
    #issue-list-panel-10621 table td.issuelinks a {
    color:black;
    }
    #issue-list-panel-10621 table th[data-id="project"], #issue-list-panel-10621 table td.project {
    background:blue;
    color:yellow;
    }
    #issue-list-panel-10621 table td.project a {
    color:yellow;
    }
    #issue-list-panel-10621 table th[data-id="status"], #issue-list-panel-10621 table td.status {
    background:gold;
    color:red;
    }
    #issue-list-panel-10621 table td.status a {
    color:red;
    }
    #issue-list-panel-10621 table th[data-id="resolution"], #issue-list-panel-10621 table td.resolution {
    background:olive;
    color:white;
    }
    #issue-list-panel-10621 table td.resolution a {
    color:white;
    }
    </style>

    

12. Click on Set Banner.

13. With the above CSS configuration implemented, below is the required output on the Issue Matrix panel: