Skip to main content
Best Answer

CSS to change the User Inactive Status Icon

  • August 12, 2025
  • 3 replies
  • 100 views
G
Helper I

I’m sure one of you clever css gurus has figured this out already. Help please.

I want to change the inactive user icon to be something more obvious, like a big red cross, or maybe a skull and crossbones, but I can’t get any further than something to do with the span.status-state

We’re experiencing ongoing issues where our staff are not realising that the little grey dot means inactive. And now today I learned that one of our support staff has his display set to dark mode, which makes the status icon display a grey tick, so he thought the customer was active. Not ideal

 

 

Best answer by elamast

I’m sure one of you clever css gurus has figured this out already. Help please.

I want to change the inactive user icon to be something more obvious, like a big red cross, or maybe a skull and crossbones, but I can’t get any further than something to do with the span.status-state

We’re experiencing ongoing issues where our staff are not realising that the little grey dot means inactive. And now today I learned that one of our support staff has his display set to dark mode, which makes the status icon display a grey tick, so he thought the customer was active. Not ideal

 

 

It’s interesting because the checkmark is still there in when the account is inactive, but is gray to match the circle color.  The checkmark is there through the pseudo-class .zmdi-check:before, and is present in both active and inactive states. 

I also observe three possible states for the DIV that contains the circle and checkmark:  .status-state (gray circle), .status-state .active (green circle), and .status-expired (red triangle--for expired users).  So let’s target the .status-state that is not also .active:

 

span.status-state:not(.active) {
    background: orange !important;
}

span.status-state:not(.active) i.zmdi-check::before {
content: "\F298";
}

Result:
 

 

    3 replies

    O
    Novice III
    Forum|alt.badge.img+1

    ​@gus You probably know this but, by default in the system there is a coloured circle (green) surrounding around the checker mark when the account is active. And when the account is inactive it’s just grey with no checker mark.
    Why not adding more colour to the checker mark so that it stands out if one us using dark mode?
     

    0p
    elamast
    Hero I
    Forum|alt.badge.img+7
    • elamast
    • Hero I
    • Answer
    • August 12, 2025

    I’m sure one of you clever css gurus has figured this out already. Help please.

    I want to change the inactive user icon to be something more obvious, like a big red cross, or maybe a skull and crossbones, but I can’t get any further than something to do with the span.status-state

    We’re experiencing ongoing issues where our staff are not realising that the little grey dot means inactive. And now today I learned that one of our support staff has his display set to dark mode, which makes the status icon display a grey tick, so he thought the customer was active. Not ideal

     

     

    It’s interesting because the checkmark is still there in when the account is inactive, but is gray to match the circle color.  The checkmark is there through the pseudo-class .zmdi-check:before, and is present in both active and inactive states. 

    I also observe three possible states for the DIV that contains the circle and checkmark:  .status-state (gray circle), .status-state .active (green circle), and .status-expired (red triangle--for expired users).  So let’s target the .status-state that is not also .active:

     

    span.status-state:not(.active) {
        background: orange !important;
    }

    span.status-state:not(.active) i.zmdi-check::before {
    content: "\F298";
    }

    Result:
     

     

    Ed Lamaster, AVO Training Institute Learning Technologies Manager and consultant.
    O
    G
    G
    Helper I
    • gus
    • Author
    • Helper I
    • August 13, 2025

    Thanks so much ​@elamast. That was perfect.

    For anybody else looking to do this, I did need to also add the fontawesome font family in order to get the icon I wanted with the content code.

    @font-face {
     font-family: 'FontAwesome';
     font-weight: normal;
     font-style: normal;
     src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
     src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    }

    span.status-state:not(.active) i.zmdi-check::before {
    content: "\f057";
    color:#c41444;
    font-family: FontAwesome;
    }

     

    Terms & ConditionsCookie settingsAccessibility statement