How to modify the color of the Confirm and Cancel buttons in the Date-Time picker in Jira Data Center
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
Learn how to customize the colors of the Confirm and Cancel buttons in the Date-Time picker fields in Jira.
Environment
Jira on Data Center.
Background
Starting with Jira version 9.5, when using the Date-time picker to select dates, there is an additional step that requires selecting the Confirm or Continue buttons. This change was implemented to ensure that teams worldwide can use Jira with minimal difficulty. For more details, you can learn aboutAtlassian’s Accessibility Program.
Solution
Jira does not provide a built-in feature to change the color of its date-time picker through its standard configuration options or settings.
However, it is possible to inject JavaScript code to alter the styling dynamically. This can be done by modifying the Configuring an announcement banner as described below :
In the upper-right corner of the Jira screen, select Administration, then System.
Under User interface, select Announcement banner.
Enter the following HTML code in the Announcement field which will set the Confirm button to green and the Cancel button to red.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<style type="text/css"> .actions-row .confirm { background-color: green; color: white; border: 1px solid darkred; padding: 10px 20px; cursor: pointer; } .actions-row .cancel { background-color: red; color: white; border: 1px solid darkred; padding: 10px 20px; cursor: pointer; } .actions-row .confirm:hover, .actions-row .cancel:hover { background-color: darkred; } </style>Select the required Visibility level for the banner.
Select the Set banner button.
Was this helpful?