HTML & CSS

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! 

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.

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. 

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?

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.

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.   

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;}

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.

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

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!

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. 

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 z

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

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? 

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?

There are a few chats and ideas about making uploaded documents work differently, which I 100% agree should happen, but for those folks who have been able to have a seperate upload space and then use iframes to bring the document or link out to them, I wanted to writeup how I use PDF.JS to achieve this and not require programming knowledge.Why bother with this over a simple link or iframe direct the document?The main benefit is control. If you link out, this moves the user from where they were which can be confusing. If you just iframe the document in directly, it may work for you, but you are leaving the PDF display to the user’s browser and device. This leads to a varied experience for folks depending on browser and device, aka a support nightmare.Disclaimers up front:This is entirely based on your have access to some sort of external server (AWS S

Hi Docebo Community, The team here at Southwestern Consulting would like to make some customizations to the My Profile widget, and I spent time searching the boards and did not see any answers or this question asked previously. Any pro tips are greatly appreciated from your friend in Nashville 😁 Use case:On the My Profile widget, we would like to show more than one line of text for some of the User Additional Fields that are displayed on the widget. For example, we have a field “My Coaching Goals” where a client’s various goals would be listed. this is a Text Area field (up to 65,000 characters) for example, my goals are listed in this field as : “Run a 26 mile marathon, grow my team, be a leader” BUT - on the widget currently, the widget displays just “Run a 26 mile maratho...” A few other fields we would like to display additional rows of text

Hey all,Pretty fresh to learning HTML/ CSS. I am trying to build an image carousel that moves/ allows the user to see some different news and banners from their main page.I am getting stuck with all of the codes I’ve attempted and just don’t know what I am doing wrong and could use some guidance. Has anyone shared this experience? I would love to know what solutions you came up with.

HelloWould anyone be happy to share some CSS that would remove the bottom section informing users to go to External Certificates?  All our courses are linked via Certifications and not external certificates and will like to eliminate this option.  Cheers :) 

Hello everyone, I’m new in Docebo and I’m trying to customize a bit the training materials of my courses. I would love to customize for example HTML pages but I’m facing with lots of issues.First of all I want to change the font with a custom one. Reading in the community i’ve configured the custom style in the branding  and look & feel, adding the right code for the font that I want to implement.But it’s not clear to me how I can add that font in a training material- html page now.It seems it doesn’t work.Can somebody help me with this? I’m not an expert in html, but i’ll do my best :)  thank you Giulia

Please delete or disregard this post: we found the answer here:  this works: #content > div.myactivities-sidebar > div > div.main > div > div > div.user-report-summary > div > div.user-report-info.span6 > div.user-report-info-data > div:nth-child(5) {display: none;} ###Hi Everyone, My colleague and I  are trying to hide the “Groups” and “Group Names” from appearing to our users on the My Activities page. We tried a few ideas with some CSS but couldn’t get it right. I tried the code below, but it did not work: /* on the My Activities page, hide the Group Names from the users */div.label:contains("Groups") + div.data {display: none;} Any help is appreciated!

We noticed that learners can retake a learning plan once this is finished. There are also individual buttons for each courses. Although we are looking for such a function on the system, we fear that our users might get confused. If I understand it correctly, the button will reset the learning objects, but not the course nor the learning plan. They remain as “completed”, but the course progress is set at 0%. This has already caused confusion in the past when users restarted a course with a newer version. 🙃Is there a way to hide the retake button without impacting the start button of the course? Or is there a setting where we can let users access the courses without resetting their progress on learning objects? 🤔Any suggestions are welcomed! 😀

Hello Docebians!Hello! I’m looking for CSS support in eliminating the Course details from the ILT courses and Learning Plans Details  Thank you in advance!@lrnlab   

Hi there! For those who have activated the latest docebo features, has anyone successfully removed the gradient from the header image using CSS? This is the course overview page one lands on when they click on an unenrolled course from the course catalog. I know Docebo University has coded the gradient out for their own purposes but am having hard time figuring out the CSS in this particular instance where a page ID isn’t evident. Note: i have not activated the new features yet, and am not sure if that impacts what I’m looking at in the code. Thank you all! 

With the new player I was having a difficult time hiding the “lesson completed successfully” banner that pops up when you enter an HTML training material.  It’s not there for very long, but I think I figured it out.If you don’t like messing with CSS, you can go into the Localization tool, search for “Lesson completed successfully”, and remove the verbiage there by substituting a space for the existing text in red below:standard The lesson has been completed successfully Lesson completed successfully  If you can/want to change the CSS, this code did the trick for me:/* hide the player/toast banner */.dcb-ui-toasts-container-botton-center {    visibility: hidden !important;    display: none !important;}