---
title: "How to add CSS styles to Issue Matrix panel in Jira"
canonical: "https://support.appfire.com/space/SUPPORT/80118048/How%20to%20add%20CSS%20styles%20to%20Issue%20Matrix%20panel%20in%20Jira"
format: markdown
---
<span style="color: #000000">This article explains how to add CSS styles to the Issue Matrix panel in Jira</span><span style="color: #000000"> using the app, </span>*Issue Matrix,** *on server<span style="color: #000000">. Here, we will be adding CSS Styles to have columns and text within it using </span><span style="color: #000000">different colors. </span>

## Instructions

1. Login to Jira as an Administrator.
2. Navigate to<span style="color: #000000"> </span>> Macro (inline-external-image)

***<span style="color: #000000"> > Issues > custom fields > Add custom field</span>*****<span style="color: #000000">.</span>**
3. Select **All** and search for "*Issue Matrix*" and click on **Next** as shown in the below screenshot:  
> Macro (inline-media-image)
4. Add a name to the custom field (for example, *Issue Matrix_2*)
5. Add the custom field to the project screen where required:  
> Macro (inline-media-image)
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 **<span style="color: #091e42">*Configure > Edit Matrix Configuration >*</span>**<span style="color: #091e42"> </span>*<span style="color: #091e42">**Epic**</span>*<span style="color: #091e42"> and click on </span><span style="color: #091e42">**Next.**</span>  
> Macro (inline-media-image)
9. <span style="color: #091e42">Configure the below details and click on </span>**<span style="color: #091e42">Save</span>**<span style="color: #091e42"> to save the configuration.</span>  
> Macro (inline-media-image)
10. Navigate to ***System > Announcement Banner.***
11. <span style="color: #091e42">Add the below CSS Script in the </span>*<span style="color: #091e42">Announcement Banner</span>*<span style="color: #091e42"> section and modify the custom field ID (Ex: Issue Matrix_2 has ID 10621).  The </span>**<span style="color: #091e42">th</span>**<span style="color: #091e42"> and </span>**<span style="color: #091e42">td</span>**<span style="color: #091e42"> elements are used for table cells. </span>**<span style="color: #091e42">th</span>**<span style="color: #091e42"> is used for table header cells while TD is used for table data cells.</span>
12. Click on **Set Banner**.
13. <span style="color: #091e42">With the above CSS configuration implemented, below is the required output </span><span style="color: #091e42">on the Issue Matrix panel:</span>

![image](media://381b9cfd-774b-4d6b-bbdf-03c45c1f13d9)

> ⚠️ Below are the steps to limit the CSS styles to a few projects:
> ⚠️ 
> ⚠️ - Navigate to ***Admin > Issues > Custom fields*** and select the respective Issue Matrix custom field; right-click to choose the **Configure** option.
> ⚠️ - Click on **Edit configuration **for applicable contexts for the scheme; choose either ***Global context*** (applicable to all projects) or ***Apply to issues under selected projects**** *and enter **Modify**.