Best Answer

Update status message on courses

  • 30 July 2021
  • 3 replies
  • 200 views
JeanetteMcVeigh
Rank
Userlevel 6
Badge +2

Hello!  I love reading these posts and getting some great ideas from all of you.

I am a novice at css and html, usually can tweak code that someone else has done but not good at creating my own ‘stuff’, so I’m coming to all of you for help.

The status boxes as show below (Not Started, In Progress and Completed), I would like to have the Completed ones have a different coloured background than the In Progress one.  Is this doable?

I would like this change to happen across the system, not just necessarily on the page this screen shot came from (My Courses and Learning Plans).

Any thoughts?

Thanks in advance.

 

icon

Best answer by elamast 30 July 2021, 23:02

View original

3 replies

elamast
Rank
Userlevel 6
Badge +2

Both “in progress” and “completed” statuses have identical classes associated with them, and no specific id to target. In both cases the gray/black background is set by the class .ui-badge-status-neutral, so changing that through custom styles would not work to differentiate “in progress” and “completed”.  I also attempted to inject style information through the Localization function (it sometimes works), but could not.

This is one of those times where I wish I could add a script that could target an element based on its text, but Docebo doesn’t yet allow that.

Ed Lamaster, AVO Training Institute Learning Technologies Manager and eSkillz Consultant.
Bfarkas
Rank
Userlevel 7
Badge +3

What type of page/widget is shown in that screenshot? I have this working on the channels widget with CSS:

/* Sets style of the In Progress status tag */
.ui-card-status-in_progress .ui-badge-status-wrapper {
background-color: #e67e22;
text-transform: capitalize;
}

/* Sets style of the Not Started status tag */
.ui-card-status-subscribed .ui-badge-status-wrapper {
background-color: #e74c3c;
}

/* Sets style of the Completed status tag */
.ui-card-status-done .ui-badge-status-wrapper {
background-color: #ff0000;
}

This would apply to all of them in the system, although you can select just specific widgets or pages if you wanted. Note I added the text-transform to the in progress as i wanted consistent capitalization between the three, it is not needed. Just update the color values for the background color and this will work on at least channel widgets, if you let me know other locations I can take a look.

Totally agree though that there are some places this may not be possible and would be nice to do simple scripts for this type of thing.

C
Rank
Userlevel 3

Hey @Bfarkas - any suggestions on how to do it for the Courses and Learning Plans widget? We have that on our homepage and would love to update the statuses! Also, do you have a screenshot showing the varying colors in your environment?

 

Reply


Terms & ConditionsCookie settings