New ID to target Gamification & Notification icons: CSS Update

  • 28 April 2023
  • 1 reply

Userlevel 7
Badge +6

Some time ago some ago a few questions went around regarding the icons along the top right and being able to change the color of them.

I happened to notice this morning that they had reverted back to the default dark grey color so I decided to look into it.

I discovered that the ID from prior code is no longer being used so using the hashtag to reference the ID of the icon
ex. g#gamification

stopped working.

Instead - it looks like ID has been replaced with data-icon-name
So - for those who may be interested - here are a couple examples of my updated approach to targeting the individual icons.
There may be other ways to do this as well and as always - test to make sure that nothing else is affected with your instance of Docebo.
/** Change Icon Color **/

[data-icon-name="gamification"] {
fill: #AD122A;

[data-icon-name="notifications"] {
fill: #fcb614;

/** End Change Icon Color **/


1 reply

Userlevel 7
Badge +4

 @gstager you’re a rockstar. Thank you for sharing!