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: CSSNowadays 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
