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.

  • 441 Posts
  • 2,348 Replies
441 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! 

193137
Lena
Helper I
5 months 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! 

271
I
Docebian
1 day 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.

150
G
Novice II
2 days 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. 

94817
jordandb
Novice III
3 days 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?

1134
gstager
Hero III
3 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

232
V
Novice II
4 days 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.

2086
jen.russo
7 days 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?

42523
J
8 days 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.   

211
lrnlab
Hero III
10 days 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;}

7116
D
Novice III
14 days 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: 

130
mikeyv
14 days 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.

353
JeanetteMcVeigh
Hero II
15 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

53547
lrnlab
Hero III
15 days ago
J
Jamie ShopProsNewcomer
asked in HTML & CSS
HTLM Issue - Page Creation

Should look like thisHelp! Help! Help!I have no idea what to do next… Nor does Docebo support….I’m building a page where there’s some HTML that will be used. The left part of the page will have a clickable 2x6 grid (URL links to be added later) like the above. The right side will have quick links (URLS to be added later), like the above. Once I paste the code into the editor and then view page preview, it looks PERFECT. (Image above). BUT. After Save, leave the preview and return (I can click back to the editor, or reload the page.. any change), everything changes to the image below, where the images to into a 1x6 column and the links loose all of their formatting…  I’ve attached the codes here too… Anyone have any ideas, tips, tricks? Thank you!!! Changes to this 

494
dklinger
Hero III
15 days 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!  

502
K
Novice III
16 days ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
The Search for a Better Slider - Option 1

This post is meant to be an attempt at helping folks implement a slider type of widget with images that cycle through in an endless loop. No interaction. Down the road, I will offer one that has some manual selection to it. That is why this is titled as option 1.There has indeed been a number of postings referencing Comslider as a great resource for this sort of thing. I have not used it personally but I would venture a guess that it is much nicer and simpler than what I am about to offer here but this is free - so I guess you get what you pay for - LOL. At any rate - I figure that for some folks - Comslider may not be an option. If that is the case - you have one here.This is a CSS and HTML option - no JavaScript. This would still require some work on your part to tweak it for your number of images and to put in your image URLs - etc. I will try to help with that part as best I can.Here is a quick look at the one I built as a sample. Sorry it is a little small and blurry but I had to

234668
A
Novice III
16 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? 

272
T
16 days ago
T
Novice III
trillyNovice III
asked in HTML & CSS
Change colour of course status on new course player

Hi, Does anyone know how I can change the colour of the course status within the new course player? Mainly the ‘Completed’ bit I have attached a screenshot so you know what I am on about :)  Thanks!

572
T
Novice III
16 days ago
W
Novice II
whetstonethNovice II
asked in HTML & CSS
Hide Assignment Submission Options in New Course Player

Has anyone discovered and can share new CSS coding to globally hide assignment submission options for Screen Recording and Link? We’d like to only have upload option displayed. It appears from past posts that coding was shared but is not working in the new course player. Specifically, this is the area and the two options we’d like to hide.Hide Record and Add a Link Submit Options? 

15614
learnwithzac
Novice I
17 days ago
T
Novice I
tillerpNovice I
asked in HTML & CSS
Where can I place some graphic assets for use in a custom UI

I’m wanting to create a nice, clean UI for our LMS and, with some code (and from the help of others on here), can get an image of my choosing as a background or in the header bar already. To do this today, I am having to really fudge things in the system in order to get my images onto the Docebo CDN to be called by the code. The only way I can do this today, is to create image widgets on a hidden page and sniff out the stored file location once uploaded  - not elegant at all. For the life of me, I cannot seem to find an asset repository where I can upload and store a few images for use in my HTML and CSS code around the platform.Any idea folks?All help much appreciated. 

302
T
Novice I
17 days ago
N
Docebian
nick.tostoDocebian
posted in HTML & CSS
Social media links widget HTML and CSS Snippet

Hello! I thought I’d share a quick HTML/CSS snippet for anyone that wants to include their company social media links on their pages to look something like this:  Here’s the HTML that you would need to paste into a 1/3 column width page widget:<div style="padding:19px 10px;"> <div class="social-row"> <!-- Instagram --> <a href="https://www.instagram.com/" target="_blank" class="socials" style="background:#125688;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-instagram"></i></a> <!-- Facebook --> <a href="https://www.facebook.com/" target="_blank" class="socials" style="background:#3B5998;color:#FFFFFF;padding:15px 24px;" rel="noreferrer noopener"><i class="zmdi zmdi-facebook"></i></a> <!-- Twitter --> <a href="https://twitter.com/" target="_blank" class="socials" style="background:#55ACEE;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-twit

1752
sigamoline
Helper II
18 days ago
L
Influencer III
Lisa DInfluencer III
asked in HTML & CSS
CSS Code to change colour of priority on course and learning plan cards

HelloCan I ask if anyone can supply the CSS code in order to change the colour of the new priority status on the course and learning plan cards?  (Mandatory, Required, Recommended etc)?Thank you in advance for your help.Lisa

773
andrew.charles
Docebian
20 days ago
J
Josh.goodmanNewcomer
asked in HTML & CSS
Hiding the Content Partner information on a course page

I am looking for some assistance please. I am trying to hide the Content Partner block that is displayed in a course. And I can not figure out the CSS to hide. Can anyone provide guidance, please? 

300
J
21 days ago
Jtischler
Helper II
JtischlerHelper II
asked in HTML & CSS
With the new enrollment attributes coming in Dec '24, is there any CSS available to make them stand out?

The attributes can be helpful, many threads point out some shortcomings which are helpful.  I don’t see anything related to CSS formatting of the attributes on the content card.  Regardless of the attribute its just small grey font.  It doesn’t stick out.  It would be nice to color code/format the attributes so they stand out and don’t get overlooked.  Any CSS pro’s out there know if this is possible?

9410
andrew.charles
Docebian
21 days ago
J
JblNewcomer
asked in HTML & CSS
Textfield colors of course status in My Activity page

Hello,I did not find an answer - does anyone know how to change the textfield colors of the course status displayed in the My Activity page via CSS?I managed to modify them at most of the other places, but am failing here.Thanks  

395
J
22 days ago

Badge winners

  • 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
  • Product Q&A Influencer
    kjandersonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings