Skip to main content

Dear fellow members,

I’m getting mad trying to hide an element via the custom CSS.

In particular, the element to be hidden is the number of lessons completed in courses (see the highlighted text below):

I’m a CSS beginner, though I succesfully modified several elements across pages.

This one is handled via a span, such as:

<span class="subtitle-block">0 / 3 lessons completed</span>

I tried the following without success:

.subtitle-block{  
    visibility: hidden !important; 
    display: none !important;  
    opacity:0 !important; 
    }

I also tried with the parent elements, always without success:

progress-bar-wrap ng-star-inserted .subtitle-block{  
    visibility: hidden !important; 
    display: none !important;  
    opacity:0 !important; 
    }

Did anyone of you get any success in modifying such page?

Thanks in advance for your help

Regards

Stefano

After some other searching, I edited the style in the browser and succesfully removed that line.

I copied the selector and add it in the styles with the display:none statement.

Here’s what I did:

 

But when I put the same directive into the custom CSS; it doesn’t work :(

IN the end, I discovered this post that has a solution that worked.

Hiding X/X Lessons Completed & Lessons Progress Bar | Community (docebo.com)

Looks very like the first solution I tried.

The thing is, I did all my test on our sandbox, with no success.

Now I tried on the production environment, and it worked fine.

There should be some differences between the two enfironments.

Cheers!

stefano

 

You might not want to spend too much time customizing the old payer pages and they will move to the new course player by the end if this year and you will likely need to rebuild or adjust some the CSS code to accommodate the new layout, labels, etc.

Reply


Terms & ConditionsCookie settings