Versions Compared

Old Version 7

changes.mady.by.user Rama Goberu

Saved on

compared with

New Version 8

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This article explains how to add CSS styling to the Issue Matrix panel in Jira using the app, Issue Matrix, on server.

...

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

  4. Add a name to the custom field (for

    example 

    example, Issue Matrix_2)

  5. Add the custom field to the

    respective

    project screen where it is required:
    Image Modified

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

  10. Navigate Navigate System → Click > 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).

    Code Block
    themeMidnight
    <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 Set Banner.

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

Image Modified

Note

Below are the steps to limit the CSS styles to a few projects:

  • Navigate to Admin →Issues →Custom fields →Select the respective Issue matrix custom field and Right-click to choose the configure option.
  • Click on Edit configuration for Applicable contexts for the scheme and choose either Global context(applicable to all projects) or Apply to issues under selected projects and enter Modify.

...