Skip to main content

If you’re using the HTML training material type and really want to get rid of that instantaneous pop-over saying the activity is completed, here’s some CSS code to hide it:

 

/*Hide pop-over completion message for HTML content*/
div.intime-completed.ng-star-inserted > div {

    display: none !important;

}

 

The activity will still be marked completed everywhere it needs to be.  This just prevents the pop-over message from displaying.

HI @elamast thanks for adding this...we should have this post in our new discussion group, HTML & CSS where we are gathering all similar types of posts...perhaps @Adam Ballhaussen can move this over for you?

This is awesome @elamast, thank you for sharing! @lrnlab good call. I’ve moved this to the HTML & CSS discussion category

This is awesome @elamast, thank you for sharing! @lrnlab good call. I’ve moved this to the HTML & CSS discussion category

many thanks Adam...

You are the man! thank you!

 

Hi all, has anyone needed to update this for the new course player and been successful?

This code does not seem to work now for either player.  I’ll do some digging and see if I can find another way.

@elamast something changed a few months ago s they started re-appearing...I’m must living with it now...appreciate you looking in to this. thank you.

Looks like the element is part of the .zmdi class now which is shared with other attributes - like the circle buttons throughout the site. If we hide that .zmdi class, it’ll hide the images in the circle buttons

Just a hunch, if you need this right away it might require unsupported scripting to solve. I’m envisioning a function that watches every x milliseconds for this div to be inserted and dynamically changes it.

What I did observe was that the .intime-completed class is not in the code at all until a triggering event (choosing the html training material) causes it to be inserted.  This may be the crux of the problem.

If we want a supported solution, I recommend waiting until after 9/30 and then requesting a new feature that allows this completion pop-over to be hidden by checking a checkbox in the properties.  

Hi there

Give the following CSS a go. Have tested this with a Video and HTML training material in the same course but could do with further testing on this.

body:has(lrn-training-material-player-html) .ui-notification-toast-success {
    display: none!important
}

 

Hi there

Give the following CSS a go. Have tested this with a Video and HTML training material in the same course but could do with further testing on this.

body:has(lrn-training-material-player-html) .ui-notification-toast-success {
    display: none!important
}

 

Didn’t work for me, but will do more testing.

Hello all,

Please test the following CSS in your Sandbox first.

I was trying to figure out a way to remove the Completion banner all together from the HTML Page training material, with no luck. But I was able to remove everything inside if you all want to try the following CSS. 

/*removes completion banner title & description*/

.dcb-ui-notification-content {

  display: none !important;

}

/* removes buttons */

.dcb-ui-notification-actions {

   display: none !important;

}

/*removes check mark icon*/

.dcb-ui-icon-size-xs {

  display: none !important;

}

 

 

When I moved the previous post CSS the Sandbox to Production the check mark icon wasn’t hidden. I found a new CSS function to remove the check circle. Here is the updated CSS:

/*removes completion banner title & description*/

.dcb-ui-notification-content {

  display: none !important;

}

/* removes buttons */

.dcb-ui-notification-actions {

   display: none !important;

}

/*removes check mark icon */

dcb-ui-notificationciconsvgname="check_circle"] dcb-ui-icon {

  display: none;

}

Reply


Terms & ConditionsCookie settings