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 2 / 2
@lrnlab I did our testing with an admin, superuser, and learner account. With all of them I tested the different options; already enrolled, self-enrollment (through the catalog & with link), self-enrollment (link not enabled), etc. work. We don’t see the buttons appearing again, even though opening different courses with different settings.
Please note, we don’t use the self unenrollment function, which would pop up when clicking the three dots. Without those dots there, your learners cannot self unenroll. I will check if there’s a way to keep them and only remove the ‘add to playlist’ and ‘mark as outdated’ items.
Also, we very rarely use the ILT sessions. Maybe share a screenshot of your look?
Thanks
@lrnlab I did our testing with an admin, superuser, and learner account. With all of them I tested the different options; already enrolled, self-enrollment (through the catalog & with link), self-enrollment (link not enabled), etc. work. We don’t see the buttons appearing again, even though opening different courses with different settings.
Please note, we don’t use the self unenrollment function, which would pop up when clicking the three dots. Without those dots there, your learners cannot self unenroll. I will check if there’s a way to keep them and only remove the ‘add to playlist’ and ‘mark as outdated’ items.
Also, we very rarely use the ILT sessions. Maybe share a screenshot of your look?
Thanks
@lrnlab Small update.
I’ve just played and tested a bit. In case you have courses with self unenrollment and would like to keep that options within the three dots (more options), this code works on my side on admin, SU, and learner view for normal courses and ILT courses:
/* More Options List Items Removal Course Player */
/* 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.
I tried and the course title color is now updated to black, I had a question the background which we changed to white where can I edit that color, I want to put something slightly warm white or warm grey to pop that section out. Also if we do all this custom settings to the course header will it not allow if any course will have an image being uploaded to show up please?
also, I more request that needs your expert advice.
I see some additional fields as default showing under the course details. Can we hide one of the fields from appearing?
@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.
I tried and the course title color is now updated to black, I had a question the background which we changed to white where can I edit that color, I want to put something slightly warm white or warm grey to pop that section out. Also if we do all this custom settings to the course header will it not allow if any course will have an image being uploaded to show up please?
With the hidden gradient layer on top of the header, you can change the color of the header within each course (in case you want them all a different color). This can be done within the Course Properties, scroll down to the Header layout section, enable the custom settings, and select your solid color.
Course Properties Header layout
If you want the header color to be the same for all your courses, you can go to Configure brandling and look, open the Course overview page dropdown, and select your solid color.
Branding and look Header layout
also, I more request that needs your expert advice.
I see some additional fields as default showing under the course details. Can we hide one of the fields from appearing?
Can you share some settings with me for your ILT course? We don’t use them frequently, and I cannot seem to get this Additional information on my page.
@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.
I tried and the course title color is now updated to black, I had a question the background which we changed to white where can I edit that color, I want to put something slightly warm white or warm grey to pop that section out. Also if we do all this custom settings to the course header will it not allow if any course will have an image being uploaded to show up please?
With the hidden gradient layer on top of the header, you can change the color of the header within each course (in case you want them all a different color). This can be done within the Course Properties, scroll down to the Header layout section, enable the custom settings, and select your solid color.
Course Properties Header layout
If you want the header color to be the same for all your courses, you can go to Configure brandling and look, open the Course overview page dropdown, and select your solid color.
Branding and look Header layout
we have some additional fields created that we use to add additional properties of the course.
These additional fields are for both ELearning and ILT.
Also, I tried the above course properties edit for custom header color - it works, however when I try to add a picture using Cover image layout it does not show the image, earlier before the CSS changes it did show the image. this is how it looks when I add image to course setting
@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.
I tried and the course title color is now updated to black, I had a question the background which we changed to white where can I edit that color, I want to put something slightly warm white or warm grey to pop that section out. Also if we do all this custom settings to the course header will it not allow if any course will have an image being uploaded to show up please?
With the hidden gradient layer on top of the header, you can change the color of the header within each course (in case you want them all a different color). This can be done within the Course Properties, scroll down to the Header layout section, enable the custom settings, and select your solid color.
Course Properties Header layout
If you want the header color to be the same for all your courses, you can go to Configure brandling and look, open the Course overview page dropdown, and select your solid color.
Branding and look Header layout
we have some additional fields created that we use to add additional properties of the course.
These additional fields are for both ELearning and ILT.
Also, I tried the above course properties edit for custom header color - it works, however when I try to add a picture using Cover image layout it does not show the image, earlier before the CSS changes it did show the image. this is how it looks when I add image to course setting
In case you don’t want your users to see that specific additional information, you should be able to uncheck the box highlighted in the screenshot below and update your additional field.
Regarding the gradient layer; Unfortunately, Docebo combined this code with the background image. We would love it if we could change up or even remove that gradient from our header, but it would mean each course will have the exact same image in the banner. In case you don’t mind this, you could add your background image URL in the CSS. Otherwise, the only option to have different headers is by changing the solid color.
@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.
I tried and the course title color is now updated to black, I had a question the background which we changed to white where can I edit that color, I want to put something slightly warm white or warm grey to pop that section out. Also if we do all this custom settings to the course header will it not allow if any course will have an image being uploaded to show up please?
With the hidden gradient layer on top of the header, you can change the color of the header within each course (in case you want them all a different color). This can be done within the Course Properties, scroll down to the Header layout section, enable the custom settings, and select your solid color.
Course Properties Header layout
If you want the header color to be the same for all your courses, you can go to Configure brandling and look, open the Course overview page dropdown, and select your solid color.
Branding and look Header layout
we have some additional fields created that we use to add additional properties of the course.
These additional fields are for both ELearning and ILT.
Also, I tried the above course properties edit for custom header color - it works, however when I try to add a picture using Cover image layout it does not show the image, earlier before the CSS changes it did show the image. this is how it looks when I add image to course setting
In case you don’t want your users to see that specific additional information, you should be able to uncheck the box highlighted in the screenshot below and update your additional field.
Regarding the gradient layer; Unfortunately, Docebo combined this code with the background image. We would love it if we could change up or even remove that gradient from our header, but it would mean each course will have the exact same image in the banner. In case you don’t mind this, you could add your background image URL in the CSS. Otherwise, the only option to have different headers is by changing the solid color.
ohhh that means I can either keep color or keep basic layout and have the color as white in header background or keep the gradient effect to allow image option
@nishathapa25 Unfortunately, yes.
The three options:
The same background image for each course without the gradient (CSS)
Background image customized for a single course with gradient
Solid color header without gradient (on course level or global level)
All,
Thank you for the great questions and collaboration on this post! Special shout out to @rozemarijnsanberg! You have really help clean up our pages in short amount of time! I can’t thank you enough!
All,
Thank you for the great questions and collaboration on this post! Special shout out to @rozemarijnsanberg! You have really help clean up our pages in short amount of time! I can’t thank you enough!
I echo your sentiments...thanks very much @rozemarijnsanberg
Like @lrnlab , i cannot get the code to work for the specific buttons. We want the share button to still be visible when the option is turned on, but want to hide the Mark as Outdated and the Add to Playlist options. Depending on the window sizing, they are in different places. I’ve been able to hide them on the course player page, but not on the overview page.
If anyone has other ideas, i’d love to hear them.
For the course and learning plan id, we just hid the whole box. none of the info was necessary for us.
Like @lrnlab , i cannot get the code to work for the specific buttons. We want the share button to still be visible when the option is turned on, but want to hide the Mark as Outdated and the Add to Playlist options. Depending on the window sizing, they are in different places. I’ve been able to hide them on the course player page, but not on the overview page.
If anyone has other ideas, i’d love to hear them.
For the course and learning plan id, we just hid the whole box. none of the info was necessary for us.
Thank you @lrnlab and @rozemarijnsanberg . Unfortunately that code doesn’t work.
This is what i’m trying to hide. This is the course overview page, after the user has completed the course. Any guidance is TRULY appreciated.
Thanks
Lynda
Thank you @lrnlab and @rozemarijnsanberg . Unfortunately that code doesn’t work.
This is what i’m trying to hide. This is the course overview page, after the user has completed the course. Any guidance is TRULY appreciated.
Thanks
Lynda
This new player and its dynamic pages, etc. makes adjusting CSS very difficult...any differences in the course settings will likely affect it so you almost have to run though all the different permutations of course settings (same for ILT and LP) and adjust the code while hoping none of the CSS conflicts with another (this is what happened in our case - I had to comment out all the code and then additional back 1-by-1 to see where it worked or not)
Really wish Docebo would have thought this through a little more and actually provided some options for CSS we can manage…
We’ll get there….I have more to do so if I find any code that works, I’ll add it here..
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 worked for me - I was able to remove all three of them - I can’t however figure out how to remove them from the ellipsys menu - and I just opened a ticket because our “Unenroll” option button is missing.
Thank you @lrnlab and @rozemarijnsanberg . Unfortunately that code doesn’t work.
This is what i’m trying to hide. This is the course overview page, after the user has completed the course. Any guidance is TRULY appreciated.
Thanks
Lynda
This new player and its dynamic pages, etc. makes adjusting CSS very difficult...any differences in the course settings will likely affect it so you almost have to run though all the different permutations of course settings (same for ILT and LP) and adjust the code while hoping none of the CSS conflicts with another (this is what happened in our case - I had to comment out all the code and then additional back 1-by-1 to see where it worked or not)
Really wish Docebo would have thought this through a little more and actually provided some options for CSS we can manage…
We’ll get there….I have more to do so if I find any code that works, I’ll add it here..
@lyndagutman As @lrnlab mentioned, with all the dynamic pages, it’s a pain to work with the CSS. In your case, if the aim is to hide the whole More Options… button on a completed state course, then the following CSS should manage to do just that. If you were to remove the rating and sharing options from the settings, this code will no longer work, as those listed items will become their own buttons.
/* More Options Removal Overview Page Course Completed State */ div.dcb-te-content-overview-header-action-buttons.ng-star-inserted buttontaria-label="More options"] { display: none; } /* End More Options Removal Overview Page Course Completed State */
Thank you @rozemarijnsanberg . i actually want the rating and sharing options (for the most part), so i’ll try and let you know if this works. You’ve been so helpful, i really appreciate it.
Thank you @rozemarijnsanberg . i actually want the rating and sharing options (for the most part), so i’ll try and let you know if this works. You’ve been so helpful, i really appreciate it.
I feel your pain like many others...really wish Docebo would have been more considerate with the design and at the very least offer up some options for us to be able to control what our course pages look like and what functions are available.
@lrnlab Thanks, it helps to know i’m not the only one . Do you know if anyone entered this into ideas for future release?
PS how do you reply to the posts and show the comment you are replying to?
@lyndagutman not sure if anything has been posted but I hope to find some time to do so today or tomorrow.
As for including a post when you reply, just click “Quote” next to the Like button
. Do you know if anyone entered this into ideas for future release?