After this tread helped me a lot to change the colors in a classic report with cards template. I discovered that in APEX 5.1 this neat solution is no longer working. Cards now have a cool option which fills the card with the color of the icon. But this works only as long as you are using the template colors. When you implement the former solution things will not show as you thougth they would.
Diving into the element inspector I noticed a new tag: #CARD_COLOR#.
<div class="t-Card-icon u-color #CARD_COLOR#">
This is new and perhaps by just referencing it in the sql-statement I would be able to make the color conditional without having to change much in the css stylesheet. And better, without having to use a customized template.
This looked liked it worked. In the report sql give the column the name "CARD_COLOR" with the value 'red' and this will be the line:
<div class="t-Card-icon u-color red">
But it doesn't work either. The class u-color needs to be overwritten. If you look in the css stylesheet. The following code shows:
.t-Card .u-color {
background-color: #bfbfbf;
}
So I did the following thing:
1. create a css stylesheet: ie colors.css
And fill it with for example the following lines:
| .t-Card .u-color-blue { |
| background-color: blue; |
}
.t-Card .u-color-red {
}
.t-Card .u-color-orange {
| background-color: orange; |
}
.t-Card .u-color-yellow {
| background-color: yellow; |
}
2. Save the stylesheet in your application static files and make a reference to it in the cascading style sheets under 'User interface defaults'
3. In your report sql put the following column:
, case st.s_id
when 1 then 'u-color-blue'
when 2 then 'u-color-orange'
when 3 then 'u-color-red'
when 4 then 'u-color-yellow'
end card_color
When running the page you get the nice conditional icon colors.
line in inspector: <div class="t-Card-icon u-color u-color-red"> this overwrites the default u-color.
No need to create a customized template with a custom template option.
Hope this helps by making conditional colored cards.
Regards,
Marco.