How to customize the colors of Advanced Portal Reports when you have Refined installed

Owned by Georgi Gachev, created
Last updated: Oct 13, 2021
2 min read

If you have Refined addon installed you can use it to change the CSS in Jira including the CSS of Advanced Portal Reports. This will help you change the colors and other CSS properties if needed.

Instructions

You need to add blocks of CSS code to the section for custom CSS and HTML of Refined in order to affect the Advanced Portal Reports CSS options. For example, if you wish to change the green color with another color (#4aa2d4 in our example) here are some blocks of code that change different parts of the User Interface. To fully replace the green color everywhere, include all of the blocks in the custom CSS and HTML section in Refined. Make sure you don’t have the symbol ; after every CSS block that ends in } because Refined will stop executing the script. The correct format is (.aui-dialog2-header-close:hover { background: #4aa2d4 !important;})

 

1) The top bar (header) color

#header-content

{ background:#4aa2d4 !important; }

1) The green arrows on the dropdown elements

#s2id_status-single-select  a.select2-choice:after, #s2id_createdby-single-select  a.select2-choice:after, #s2id_requesttype-single-select  a.select2-choice:after, #s2id_date-criteria  a.select2-choice:after

{ border-top-color: #4aa2d4; color: #4aa2d4 !important; }

2) The green background of the column selection in the settings menu

.nem-selected-column

{ background: #4aa2d4 !important; }

3) The green color appearing when hovering over the unselected columns in the settings menu

li.nem-column-selector-li:hover:not(.nem-selected-column),li.field-column-selector-li:hover, li.status-selector-li:hover, li.link-selector-li:hover

{ background-color: #4aa2d4 !important; }

4) The text in the Service Desk names dropdown list

 
#s2id_servicedesk-single-select, #s2id_servicedesk-single-select a.select2-choice 

{ color: #4aa2d4 !important; }

5) The color appearing when hovering over the Service Desk names dropdown list

#s2id_servicedesk-single-select:hover

{ background: #4aa2d4 !important; }

6) The green arrows for More and Export

.aui-iconfont-chevron-down
{ color: #4aa2d4 !important; }


7) Hover for the Close and Search icons

.aui-dialog2-header-close:hover

{ background: #4aa2d4 !important; }


#text-search-wraper:hover span

{ color: #4aa2d4 !important; }