Customize your Interactive Report with CSS

A lot of you are using jQuery to customize visual parts of an APEX application. I probably to often do so myself but there is a much more elegant way:   CSS

Nowadays you are able to add different kind of rules into your CSS styles. In this example I will show you how to get into the topic by changing an Interactive Report (IR). In my example I want to change the typical group by visualization.


Before


After


First of all you need to give your IR a unique name or class to identify it properly.
IR > Appearance > CSS Classes: irCustomStyles



Now you need to add the customized CSS code in your page:
Page > CSS > Inline

.irCustomStyles .a-IRR-table td {
    border-top: 0 solid #ffffff !important;
}

.irCustomStyles table.a-IRR-table th:first-child.a-IRR-header:not(.a-IRR-header--group) {
  background-color: white !important;
}

.irCustomStyles table.a-IRR-table tr:has( .a-IRR-header ) {
    border-bottom: medium none white !important;
    border-top: medium none white !important;
}

1. Rule: Takes the border from the TD elements away. Standard CSS probably most of you have done like this before. 
2. Rule: This one changes only the first TH element and when they are not referenced with class ".a-IRR-header--group"
3. Rule: The "has"-clause only applies if the result is true. In this case if a class called "a-IRR-header" exists.

Fore more details check those sources:
:not(s) - By Sara Cope
Selecting Parent Elements with CSS and jQuery - by Thoriq Firdaus