Skip to main content

HTML & CSS

With Custom CSS and access to HTML widgets and pages, there's no limit to what you can accomplish in Docebo Learn. Share how you've customized Docebo to your liking with custom HTML & CSS.

  • 448 Posts
  • 2,369 Replies
448 Posts
dr.reinhardt
Contributor II
dr.reinhardtContributor II
asked in HTML & CSS
Changing the "whoops" page image via CSS

Hello Community!Does someone know how to change this picture? Thanks! 

196237
Lena
Helper I
6 months ago
G
Contributor II
gusContributor II
asked in HTML & CSS
CSS to delete of rename the Expiraiton Date column n My Activities | Courses

I need to remove or rename the Expiraton Date column. We don’t use validity dates for courses and this is confusing our customers with their certification expiry. I found the course-management-grid_c4 column easily enough and can apply a display:none, but this only hides the heading, which moves all the other headings left. The content column remains intact so all the remaining fields are misaligned. If it’s not possible to hide the column the other option is to rename it to something not resembling expiry, but I haven’t been able to rename the label. Thanks in advance.

263
G
Contributor II
18 hours ago
K
Novice III
Kieran WilsonNovice III
posted in HTML & CSS
Renew Certification Button

Sooooo, I really need some help, does anyone have any ideas how I can make the Renew certification button more obvious, I am struggling to find the right selector, without impacting the rest of the platform. I only want it to make changes on the course player pages. Getting slowly frustrated with users going I’ve recompleted the course but it hasn’t updated my records. Then I ask did you click the button? and the answer is always no what button!  

1135
M
Novice II
4 days ago
M
Novice II
mjfreemanNovice II
asked in HTML & CSS
CSS for Renew Certification button on new course player

We are looking to edit the CSS to make the Renew Certification button stand out more on the course player. We have users that miss this and simply click on the Retake Course button instead. Does anyone have any expertise on updating the CSS for the new course player to edit the Renew Certification button banner

241
S
5 days ago
Scott Foster
Influencer II
Scott FosterInfluencer II
asked in HTML & CSS
CSS to hide the course type in the new course player?

Hello everyone,I have searched the community but could not find an answer to my issue. I am trying to hide the course type in the new course player within a course. We use the eLearning course type for several types of courses, not all of which are actual eLearning.Has anyone else hidden this?Thanks in advance.

160
Scott Foster
Influencer II
10 days ago
C
cfranklinNewcomer
asked in HTML & CSS
CSS to hide lesson details, tags, etc. in new course player

Hello,I’m looking for a little CSS help to hide the “Lesson Details” block of metadata and tags in the course player. I saw in a related post that someone shared code a year ago to hide tags appearing in chapters, but I don’t believe that will work with the current course player? Any advice?Thank you!

4094
J
10 days ago
E
Eric.ShantzNewcomer
asked in HTML & CSS
Add a new button to the header of the login/landing page

Hey all, I’m looking to update some of the header buttons on our login/landing page to make it easier for users to understand how to create a new account!Currently, we have the default set up with just the “Sign In” button that displays the SSO modal, then to the sign-in / registration page. But I’m hoping to change the style of the “Sign In” button, and add a “Register” button to the right - Similarly to how AWS does it here: If anyone has done this before / has any suggestions on how to accomplish this, I’d really appreciate it!Thanks, 

160
E
10 days ago
V
Novice II
vin.porterNovice II
asked in HTML & CSS
Hiding Outdated option

Is there any way to hide the option on the course mini-menus to “Mark as Outdated”? Client either wants a text entry for the user to enter (already upvoted that idea) or for it to go away.

66627
J
Novice II
10 days ago
Courtney.harvey
Influencer II
Courtney.harveyInfluencer II
asked in HTML & CSS
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

63549
S
Novice II
11 days ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Has anyone ever tried adding the language selector dropdown from the log in page to the main header once logged in?

About to explore adding the below language selector we see on the login page to the standard header once a user is logged in. Has anyone tried this before?  

60
JZenker
Guide II
13 days ago
B
Contributor III
Ben BaumanContributor III
asked in HTML & CSS
CSS for My Team page and hiding "Expired Certifications" and "Overdue Courses" sections?

Hi Docebo Community, Great seeing many of you at the conference this week. I tried out that great tip of using AI to help write CSS code, but I am getting stuck.On the MyTeam page there are two elements of the UI that really are just cluttering up the interface, and I would like to remove them.Expired Certifications Overdue courses.Please see screenshot below for reference. On the Expired Certifications, this what i am seeing when i “Inspect” with DevTools <section class="team-member-card__kpi kpi-wrapper"><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__value"> 0 </span><span class="kpi-counter__label"> Expired certifications </span></a><!----><!----><span class="kpi-divider ng-star-inserted"></span><!----><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__label"> Overdue courses </span><span class="kpi-counter__value"> 0 </span></a><!---->&

747
A
Helper I
13 days ago
azf713
Novice I
azf713Novice I
asked in HTML & CSS
How do I remove the Time Spent column from on-screen reports?

We’re trying to figure out a way to remove the Time Spent column from the User SUmmary Screen and from the Course Summary Screeen -- but leaving time spent available in Reports. Time Spent 

90
azf713
Novice I
14 days ago
V
Novice II
vin.porterNovice II
posted in HTML & CSS
Hiding "Free" on cards and in the course page

Use case: Client doesn’t want “Free” to show up on the catalogue cards or in the course page when you click on the card. All courses are free for their internal users and having “Free” show up on the cards makes them worry they might get charged for some courses.Existing solution was to use the Localization Tool and change module: app, key: free, text: Free to something more consistent e.g. “Not enrolled”.Another option just came to light:If you add in HTML into the localization tool the catalogue cards render it as HTML (course page doesn’t but we hit that next).So you can change the text in the Localization Tool to <span style=”color:#FFFFFF;”>Free</span>This works on the catalogue cards to hide just the Free text.It does display the HTML text in the course page though, doh! But you can target that while keeping any pricing./* Hiding Free on the course page */.lrn-widget-content-enrollment-status .ui-typography-heading-2{  color: #FFFFFF;}This works because any pricing in

496
lrnlab
Hero III
21 days ago
M
Novice I
marina.limNovice I
asked in HTML & CSS
CSS to hide "Recommended" in Enrollment Priority Option

Hi,Does anyone has the CSS code to hide enrollment Priority: Recommended. We find the options Mandatory vs Recommended to be similar and would like to streamline the option when admin does the enrollment. To avoid mistake, we would like to hide one of them. Thanks!

141
sjennings78
Guide II
24 days ago
T
taryn.bergmanNewcomer
asked in HTML & CSS
Changing color for "Moderated" button

I am having trouble changing the color for the “Moderated” button on courses that require approval. What CSS do I need to apply in order to change it? 

354
gstager
Hero III
25 days ago
T
TreelearningNewcomer
asked in HTML & CSS
CSS to Hide SSO for extended enterprise?

For our staff, we use a gmail SSO button to log in to Docebo, but we also have a public-facing extended enterprise domain. Unfortunately, under Docebo’s platform settings, you can only enter one URL redirect for the gmail SSO settings, and this redirect is linked to our internal domain, so whenever a user clicks on the gmail button on the sign in page of our public-facing portal, they get a message saying “You cannot access this page directly.”Is there a way to use CSS to hide the gmail button on our extended enterprise domain? Or, are there any other workarounds we could use to remove that button? Please advise. Thanks! 

311
I
Docebian
1 month ago
G
Novice II
gordankalabicNovice II
asked in HTML & CSS
Can you remove location in calendar events?

Is there a way to disable or bypass location in the Calendar widget when creating events? We would like to use the calendar widget for reminding students about assignment due dates, but we do not wish to have a location appear for each event.

170
G
Novice II
1 month ago
eric.trudeau
Novice II
eric.trudeauNovice II
asked in HTML & CSS
Changing or hiding SCORM Package Icon via CSS

Has anyone discovered a way to change or hide the SCORM package icon using CSS?Iconography is so important for UX and the zip file means absolutely nothing to our learners, and even confuses many of them. 

95917
jordandb
Contributor II
1 month ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS
CSS to change breadcrumb font color?

I thought I was on the right track with changing changing the breadcrumb font size color by using: doc-layout-breadcrumbs .breadcrumbs { font-size: 14px; color: black;}This successfully changes the font size, but it keeps that font color white (I’m guessing because it is a link?).  Has anyone been able to successfully change the color of the font on the breadcrumb with CSS?

1204
gstager
Hero III
1 month ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
More CSS Games - Hiding the shareable link icon via CSS

Hi folks,So we are going to leverage some of the deeplink aspects of courses and I wanted to check if anyone has figured out how to hide this one via CSS.Anyone figure out how to hide these?That may sound counter-intuitive? But we have some concerns with the chain of custody with these links. Hiding them gives us the benefit of pushing with finess...and using the deeplinks in notifications from Docebo and aspects of the intranet our learning team will own.

2176
jen.russo
1 month ago
K
Novice II
kendallNovice II
asked in HTML & CSS
List of all stock illustrations

Does anyone have a comprehensive list of all of the illustrations? I’ve found some CSS to re-skin a few (thanks to everyone who has contributed those!), but am struggling to locate all of them. Person on BikeDancing person Kneeling Person Which ones am I missing?

46223
J
1 month ago
M
Novice III
Monserrat CanteroNovice III
asked in HTML & CSS
CSS Code to make the width relative in Survey for the new course player

Hey there!I wonder if any of you know how to set the width on surveys to make appear relative to the elements in there, with the new course player functionality, users have to scroll right or left to find all the options on the scale, and I wonder if any is experiencing the same and if you know how to fix it. Thanks.   

241
lrnlab
Hero III
1 month ago
elamast
Hero I
elamastHero I
posted in HTML & CSS
Hide the "add to cart" button (old and new interface) if there are no available sessions

Here’s a way to hide the “add to cart” button when there are no sessions:NEW Interface:/*hide add to cart button in purchase box if there are no available sessions*/body:has(.ui-notification-inline [role="alert"]) dcb-ui-button-raised-primary {display:none;}OLD Interface:/*hide add to cart button in purchase box if there are no available sessions*/body:has(div.enrollment-content > div.session-text.text-grey-mid.ng-star-inserted > p) ui-button-raised-primary {display:none;}

7316
D
Novice III
1 month ago
mikeyv
mikeyvNewcomer
posted in HTML & CSS
Hide the Instructor email text hyperlink from VILT session/event page | New course pages 2024

We don’t want to expose instructor emails to our learners because we have an established support process that our customers should use to get help. Here’s the CSS that I used to hide the instructor email from our learners in the new 2024/2025 VILT course UI: /** Remove Instructor Widget **/.dcb-te-content-instructors-widget-instructor-email {          display: none;} Before:After: 

240
mikeyv
1 month ago
JeanetteMcVeigh
Hero II
JeanetteMcVeighHero II
asked in HTML & CSS
Change words in Share button on course with enrollment link active

I would like to add some text to the Share button - seems some folks need more help.Not sure which option, if there is one, in the localization tool to select.I would like to make it say “Share this course” - some folks think it’s a social share option.Please advise.  thanks.

363
JeanetteMcVeigh
Hero II
1 month ago

Badge winners

  • Product Q&A Influencer
    mrrippy82has earned the badge Product Q&A Influencer
  • Product Q&A Genius
    sigamolinehas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    Cindy Moorehas earned the badge Product Q&A Influencer
  • Let's Talk Shop Genius
    gstagerhas earned the badge Let's Talk Shop Genius
  • Product Q&A Genius
    JKolodnerhas earned the badge Product Q&A Genius
Show all badges
Terms & ConditionsCookie settings