Best Answer

CSS change course tag (not started, in progress, completed) in List mode

  • 20 February 2023
  • 4 replies
  • 189 views
Bouben
Rank
Userlevel 3
Badge

 Dear CSS gurus

I was able to change my course/LP tiles tags colors looking in the various messages 💪🏼

But I’m stuck on doing the same while displaying courses in List mode (instead of Cards). I’ve tried to go through with my console… no results 😭

And I would simply match my colors: Not stated = light blue, In progress = Orange and Completed = Green.

Can you help me ?

Thanks a lot in advance

icon

Best answer by Bfarkas 6 March 2023, 17:33

View original

4 replies

Bfarkas
Rank
Userlevel 7
Badge +3

So, if you are just doing Not Started/Inprogress the below should work:

ui-badge-status .ui-badge-status-wrapper.ui-badge-status-neutral {
background-color: #0000ff !important;
}

ui-badge-status .ui-badge-status-wrapper.ui-badge-status-success {
background-color: #00ff00 !important;
}

However, note it is being forced over and can potentially impact other areas so would highly recommend restricting to the pages you know you want it on. 

Also, note that in progress and complete will both be impacted as the same and I don’t see a good way to differentiate them in this approach.

When I needed to do that, I created a custom list of a different widget, which you can see here:

 

Bouben
Rank
Userlevel 3
Badge

Thanks for the tip @Bfarkas 

Let me test that on my sandbox and keep you posted

Bouben
Rank
Userlevel 3
Badge

Hummm… not working as expected.

I’ve tried to dig up with my HTML console but I see the following, making me think its not possible

<div class="ui-badge-status-wrapper ui-badge-status-success ui-badge-status-size-large ui-typography-subtitle" data-dcb-ui-screen-reader-visible="true" aria-hidden="true"><!---->Not Started<!----></div>

<div class="ui-badge-status-wrapper ui-badge-status-neutral ui-badge-status-size-large ui-typography-subtitle" data-dcb-ui-screen-reader-visible="true" aria-hidden="true"><!---->In Progress<!----></div>

<div class="ui-badge-status-wrapper ui-badge-status-neutral ui-badge-status-size-large ui-typography-subtitle" data-dcb-ui-screen-reader-visible="true" aria-hidden="true"><!---->Completed<!----></div>

My upper setup was done following @MHelme trick from 

 

Bfarkas
Rank
Userlevel 7
Badge +3

Can you be more specific as to what is not working for you? Also, if you are appplying both methods to the same page, make sure to be widget specific since there is overlap in the methods and could cause issues to each other. 

Reply


Terms & ConditionsCookie settings