CSS Coding to Update Pages on the New Course Player
Does anyone know how to use CSS Coding to:
Get rid of the Share & Add to Playlist button on the Virtual Training (ILT), eLearning, Learning Plan page on the new Course player before enrollment?
Get rid of the Share button after Enrollment on Virtual Training (ILT), eLearning, Learning Plan page on the new Course player.
Remove the Learning Plan ID (I was able to do this for courses but have been unable to apply the same CSS codding concept to remove it from the Learning Plan page).
Thank you in advance! I have tried a few options on my own with no luck and am running out of time!
Courtney
Page 1 / 2
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
If i figure it out (working ơn thís today) I’ll add it here...
I don’t know about css but the share button can be disabled/hidden by turning off the “Enable Enrollment Link for this course” under the Enrollment Options sections.
Yes but that only works if you do not use the enrolment link at all...If you need to enable it, the “Share” option appears automatically. So it’s not really a valid option unfortunately.
I don’t know about css but the share button can be disabled/hidden by turning off the “Enable Enrollment Link for this course” under the Enrollment Options sections.
Thank you but we need the link enabled for communication purposes; however, we have two different audiences one who uses deep links and the other who uses this link. I need to remove the share button so that one audience doesn’t attempt to use it and send a link that will not work to the other audience.
I am really worried that the course player is going live in december and there is no support on how this can be disabled, learners will have a very bad experience of seeing these unwanted items. I also see Add to Playlist option which is not required
Agree, we really need Docebo to come up with some options for us now that these buttons are front and centre...
Unfortunately Docebo doesn’t offer any solution regarding these buttons
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Can you please share steps and code to skip the entire box. By entire box you mean, share, Add to playlist and Mark as outdated option is removed. Would really appreciate if you could help me with the code and where to paste the code.
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Can you please share steps and code to skip the entire box. By entire box you mean, share, Add to playlist and Mark as outdated option is removed. Would really appreciate if you could help me with the code and where to paste the code.
To add the CSS, you’ll have to go to your menu, select Configure branding and look, and open the Custom styles tab. You can add all codes to the 7.0 custom CSS.
Custom styles CSS
To remove the full button box, you can use the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; }
Button box New Course Player Page
If you were to only remove the Share button or the Add to Playlist, you can use these.
Super @rozemarijnsanberg I’ll give it a try. Thank you!
Hi @rozemarijnsanberg just added the code and it seems to be working well...Thanks again!
I may ping you if I find any other spots that need some attention...
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Can you please share steps and code to skip the entire box. By entire box you mean, share, Add to playlist and Mark as outdated option is removed. Would really appreciate if you could help me with the code and where to paste the code.
To add the CSS, you’ll have to go to your menu, select Configure branding and look, and open the Custom styles tab. You can add all codes to the 7.0 custom CSS.
Custom styles CSS
To remove the full button box, you can use the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; }
Button box New Course Player Page
If you were to only remove the Share button or the Add to Playlist, you can use these.
This is wonderful, worked for me, Thanks a lot. I have one more ask I need to also remove the Course ID that shows in the right below corner and also my course page showing the course name in gradient color style, I want to change the background color and have it as a solid color with no gradient effect.
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Can you please share steps and code to skip the entire box. By entire box you mean, share, Add to playlist and Mark as outdated option is removed. Would really appreciate if you could help me with the code and where to paste the code.
To add the CSS, you’ll have to go to your menu, select Configure branding and look, and open the Custom styles tab. You can add all codes to the 7.0 custom CSS.
Custom styles CSS
To remove the full button box, you can use the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; }
Button box New Course Player Page
If you were to only remove the Share button or the Add to Playlist, you can use these.
This is wonderful, worked for me, Thanks a lot. I have one more ask I need to also remove the Course ID that shows in the right below corner and also my course page showing the course name in gradient color style, I want to change the background color and have it as a solid color with no gradient effect.
Sure To hide the Course ID in the box on the right side, you can use the following:
The top one will hide the Course ID, the bottom one will hide the Learning Plan ID. In case you might use those as well and would like to hide them
If you are okay with all your courses having a solid background color in the header, this is relatively simple. You can hide the gradient with the following code, then in the course properties you can select your solid color layout for each course separately. Or you could select the solid color in the Configure branding and look ‘Course overview page’ tab, this will make the header of each course the same color. Please note that this will overwrite your background image, if you use this code while having an image in the banner, you will get a white banner.
Course Properties - Header layout solid colorConfigure branding and look - Header layout solid color
Am trying to figure this out too…
Please note that with the new player, these options appear in different spots based the course settings/options - same for the “Course/LP” details box so be careful not to remove too much and test, test, test with different course types and LP’s to be sure you are not hiding things you do want to hide or shouldn't.
Yes, I figured that out on the Learning Plan ID, I could only figure out how to hide the entire box and I just want to hide the ID. I can’t figure out how to hide the buttons (share & add to playlist), but have removed add to playlist from a drop down.
We have managed to remove Course ID and Learning Plan ID with the following CSS:
Hopefully, this will help you in hiding it as well!
Can you please share steps and code to skip the entire box. By entire box you mean, share, Add to playlist and Mark as outdated option is removed. Would really appreciate if you could help me with the code and where to paste the code.
To add the CSS, you’ll have to go to your menu, select Configure branding and look, and open the Custom styles tab. You can add all codes to the 7.0 custom CSS.
Custom styles CSS
To remove the full button box, you can use the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; }
Button box New Course Player Page
If you were to only remove the Share button or the Add to Playlist, you can use these.
This is wonderful, worked for me, Thanks a lot. I have one more ask I need to also remove the Course ID that shows in the right below corner and also my course page showing the course name in gradient color style, I want to change the background color and have it as a solid color with no gradient effect.
Sure To hide the Course ID in the box on the right side, you can use the following:
The top one will hide the Course ID, the bottom one will hide the Learning Plan ID. In case you might use those as well and would like to hide them
If you are okay with all your courses having a solid background color in the header, this is relatively simple. You can hide the gradient with the following code, then in the course properties you can select your solid color layout for each course separately. Or you could select the solid color in the Configure branding and look ‘Course overview page’ tab, this will make the header of each course the same color. Please note that this will overwrite your background image, if you use this code while having an image in the banner, you will get a white banner.
Course Properties - Header layout solid colorConfigure branding and look - Header layout solid color
Hello,
I tried adding the code as suggested but it did not remove the gradient effect also did not remove the course Id, please review my screenshot. Appreciate all the help.
Hello,
I tried adding the code as suggested but it did not remove the gradient effect also did not remove the course Id, please review my screenshot. Appreciate all the help.
Can you share a screenshot of both your page with the header and Course ID and of you CSS in the Configure branding and look? I can have a look for you.
@rozemarijnsanberg Sure here you go
@nishathapa25 Try replacing your existing code for the 3 items (hide share, etc., gradient, and course & LP ID) with the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; } /* End Hide Share, Add to Playlist & Mark as Outdated */
/* Hide Course & Learning Plan ID */ div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-course-id.ng-star-inserted { display: none; }
div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-learning-plan-id.ng-star-inserted { display: none; } /* End Hide Course & Learning Plan ID */
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; } /* End Hide Share, Add to Playlist & Mark as Outdated */
/* Hide Course & Learning Plan ID */ div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-course-id.ng-star-inserted { display: none; }
div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-learning-plan-id.ng-star-inserted { display: none; } /* End Hide Course & Learning Plan ID */
For the gradient background removal, it is critical to keep the !important, as the default from Docebo will take priority when not added.
In case the Course ID still pops up, you could test if adding ‘!important’ to the CSS will help. Just be very selective with its use.
Let me know :)
I tried the updated code and it works, changes the background color and all other button we wanted to remove. However, the course name appears in white and is not visible now. attached image below, how can we change that?
Really appreciate all the help!
@nishathapa25 Try replacing your existing code for the 3 items (hide share, etc., gradient, and course & LP ID) with the following code:
/* Hide Share, Add to Playlist & Mark as Outdated */ lrn-widget-content-overview-header.ng-star-inserted div.dcb-te-content-overview-header-action-buttons.ng-star-inserted { display: none; } /* End Hide Share, Add to Playlist & Mark as Outdated */
/* Hide Course & Learning Plan ID */ div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-course-id.ng-star-inserted { display: none; }
div.ui-accordion-panel-content.ng-star-inserted li.dcb-te-content-details-widget-item.lrn-widget-content-details-learning-plan-id.ng-star-inserted { display: none; } /* End Hide Course & Learning Plan ID */
For the gradient background removal, it is critical to keep the !important, as the default from Docebo will take priority when not added.
In case the Course ID still pops up, you could test if adding ‘!important’ to the CSS will help. Just be very selective with its use.
Let me know :)
I tried the updated code and it works, changes the background color and all other button we wanted to remove. However, the course name appears in white and is not visible now. attached image below, how can we change that?
Really appreciate all the help!
You can add the following in your CSS, just need to update the #FFFFFF into the color you would like your font to be.
@rozemarijnsanberg may need your help again...seems like the code you provided only works for a specific set of course settings and only for a specific role...while testing, I found that the ILT courses still display the buttons and if you are logged in as an instructor, the same occurs...the buttons come back...these buttons are a moving target so quiet challenging to remove…
Did you test all the various permutations of the courses? (not enrolled, enrolled, as an Instructor, PU, allowing/or not to self-unenroll, changes sessions, with enrolment link enabled/not enabled, etc.) Seems the code only works for very specific use cases...are you seeing the same?
To hide the Course ID in the box on the right side, you can use the following:
