Conditional colors for fontawesome in Card List

Jon Barwell wrote:

I am going to create a dynamic list.
I have included the following as inline CSS to test
*.icon-red {color: red}
*.icon-green {color: green}

And then in the SQL query I was using
'fa-check icon-green' AS image
to set the check icon to green to test but it stays the default color.

What am I doing wrong?

Your CSS rules are being overridden by theme rules with a higher specificity. You can try using the !important directive to overcome this, but I suspect the results may still not be what you are looking for.

.icon-red {color: red !important}
.icon-green {color: green !important}

The cards list is quite a complicated component, with some of the presentation determined by fixed classes in the template and some that is modifiable through the List Template Options in the list definition. We therefore need to know which options are being used, and what values are being generated in the region source. Obviously the best way to do this is to create and share an example on apex.oracle.com.

I've taken a closer look at the Cards list option, and implemented a "traffic light" RAG colour scheme using a new template option and custom CSS.

1. Create a copy of the Cards list template called Cards w/ RAG colors.

2. Add a new template option to the Cards w/ RAG colors template:

Sequence: 20

Group: Color Accents

Display name: Use RAG Colors

Option Identifier: USE_RAG_COLORS

CSS classes: t-Cards--RAG

3. Add the custom CSS for the RAG colours to the template Inline CSS property:

.t-Card--RAG .RAG-red .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-red .t-Card .t-Card-icon .t-Icon {
  background-color: #c0504d;
}
.t-Card--RAG .RAG-amber .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-amber .t-Card .t-Card-icon .t-Icon {
  background-color: #f79646;
}
.t-Card--RAG .RAG-green .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-green .t-Card .t-Card-icon .t-Icon {
  background-color: #9bbb59;
}

4. Compute the "traffic light" RAG class conditionally in the list source query, returning the value in the list's attribute4 position, which the template uses to apply a class to the list entry via the #A04# substitution string:

select
   ...
  , case
      when d.employees < 3 then 'RAG-red'
      when d.employees < 7 then 'RAG-amber'
      else 'RAG-green'
    end attribute4
...