HTML & CSS

Good day Community!I was curious to know if anyone had come up with code that could hide the point value that appears on badge ribbons. There's some concern in my organization that even if we set the point value to 0 for each badge we create (as we're going for a less competitive approach to badging), users will find it odd to see a line of 0s across their awarded badges. Any insight would be appreciated. Thank you!

When looking at the course cards at the course catalog, I’d like to add a border around the image/thumbnail on the course cards. Another important aspect, is that the colour of the border depends on of it is an ILT class or e-learning. Lets say the border around E-learning cards are red and the ILT ones blue. (As shown from a figma sketch(image underneath this text))I got a code snippet from employees at Docebo, but it didn’t work or change anything. Here’s the code snippet I got: /* Specific border color for E-learning courses (Course codes starting with "EL") *//* Note: Docebo uses dcb-ui-card or ui-card, check your specific platform structure */ [dcb-course-code^="EL"] .ui-card-wrapper, [course-code^="EL"] .ui-card-wrapper {border-color: #FF0000 !important; /* Red border for E-learning */} /* Specific border color for ILT courses (Course codes starting with "ILT") */[dcb-course-code^="ILT"] .ui-card-wrapper, [course-code^="ILT"] .ui-card-wrapper {border-color: #0000FF !important; /*

Hi,we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..I tried to do this with CSS but then I have an empty spot on the list I used the following CSS Code:#doc-page-97 .ui-card-status-done {display: none !important;}We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).Does anybody have an idea how we can hide completed courses from the channel widget?

Hello Everyone! I am attempting to hide this header on all pages.   When I tried the codes below in our STAGE environment, they all worked. When I add them to PROD, they did not work. ----------------------------doc-layout-internal-header {    visibility: hidden;}----------------------------doc-layout-internal-header {    display: none !important;}-----------------------------#doc-page-24 #doc-layout-title-bar { display: none; }----------------------------- Any ideas here? Anything is helpful. :) 

Hello,When a manager goes to enroll their team member into a course (my team → ellipsis Enroll in course), the title of the course appears as white on a white background. You can only see it if you select it or highlight over it... I do not see white font in our Configure Branding & Look section (Colors setting) or CSS settings (only thing for CSS is our homepage setup, widget for page etc.). I know the My Team page is a built-in page… Any ideas on how I can get the words to appear in a darker color without impacting how the homepage looks?   

Have you ever accidentally deleted a training material thumbnail?Adding a training material thumbnail is a great way to customize a learner's experience in your platform, but its really easy to accidentally delete a thumbnail - and when you do it will delete that custom thumbnail everywhere its been applied.While it would be helpful to be able to adjust how easy it is to accidentally delete the training material thumbnail, I've come up with some quick CSS to remove the delete icon from the thumbnail and save folks from the experience of accidentally removing hours and hours worth of work...definitely not speaking from experience.The CSSThis should correctly identify the delete icon on the training material thumbnail and remove the scary red “x” from the thumbnail and let you upload and adjust them in peace./* Hide ‘Red X’ on Training Material thumbnails */.sub-item .deleteicon {display: none !important;}This works for thumbnails assigned through Course Training Material and the Central

Hi Docebo community!We’ve been using Comslider for about five months. Periodically, we get a message that says “UserProjectAccountProblemThe project to be billed is associated with a delinquent billing account.The billing account for the owning project is disabled in state delinquent”. However, we are paid up through the end of the year and are nowhere near our quota for use. The odd thing is that the error seems to crop up about once a month for 24 hours and then self-resolves.I’ve emailed support but not response. Anyone else having this issue? 

Hi there. Does anyone know of a way (CSS or otherwise), to remove the “(required)”, as highlighted in the below image, from every mandatory question in an observation checklist on the Go.Learn App? The fact that it says (required) next to the title and the repeat it again below (in the actual response area) is confusing people. They think they should be able to type in the title area. I’ve tried using the localization tool with no luck. Thanks in advance! 

We use the image widget on some of our pages because the entire image can be a link. We know the image widget doesn’t meet accessiblity standards. We have found this the best option based on what we are trying to accomplish.An October update allows alterative text to be added to image widgets. We want to add this for accessibility purposes. Unfortunately, a tooltip displays on the page when alt text is added to the image widget. We don’t want the tooltip to display. We don’t know CSS and were given something to try..pages-widget-page .single-widget img[alt]:hover { pointer-events: none;}This doesn’t work as it also prevents people from being able to click on the image, which is a link. Does anyone know of CSS that would prevent the alt text tooltip from displaying for image widgets AND allow the image to be clicked?

Hello! I have some experience in HTML/CSS, but not a lot in how to make it work with Docebo’s UI tools for creating custom widgets. I was curious how the rest of you are formatting and placing your CSS, the best way to incorporate images, and any other recommendations you have! For example, are you placing the CSS for your HTML widgets in the advanced settings for advanced look at feel, inserting a <style> <head> element for the HTML of your widget, or placing them in line with your HTML? For images, what is the best way to place them, and how have you gone about making sure they are visible. In addition, if anyone has a list of supported/unsupported HTML tags in Docebo, I would greatly appreciate it!

Hello,I am curious.  Does anyone know if there is a way to use HTML/CSS to hide courses that are ‘Under Maintenance’ from the learner’s dashboard?  We have courses that we have retired from our catalog, but unfortunately, if a learner was enrolled, they still appear on the learner’s screen with a lock symbol and ‘Under Maintenance.’  We have considered using enrollment archiving but there are some limitations there as well…Thanks for any tips or advice!

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!

Does anyone how to hide these objects using CSS: ​​​​ I'm using the following code:  /** Remove Checklists from My Team Page */dcb-ui-tabs-horizontal-header-item[data-dcb-ui-aria-label="Checklists "] {    display: none;}/** Remove Team Members from My Team Page */dcb-ui-tabs-horizontal-header-item[data-dcb-ui-aria-label="Team Members "] {    display: none;}/* Hide 'Users - Learning Paths from Reports in My Team Page */.hyd-table-row:nth-child(2){    display: none !important;}/* Hide 'Users - Certifications from Reports in My Team Page */.hyd-table-row:nth-child(3){    display: none !important;} /* Hide 'Users - Sessions from Reports in My Team Page */.hyd-table-row:nth-child(4){    display: none !important;}  But for some reason, it hides upcoming sessions on courses as well.  Any advice? 😥Thank you in advance 

We had a custom nav bar added to our user home pages. According to our web developer, it appears that a recent platform update has removed the interactivity from the nav bar:  Does anyone know how to navigate around these continual changes that messes up our CSS? Is there perhaps a weakness in our own code that needs to be shored up? TIA! <doc-layout-user-menu id="doc-layout-user-menu" class="doc-layout-user-menu ng-star-inserted" inert=""> <dcb-ui-trap> <div> <div> <div class="dcb-ui-trap-focus-bait" dcb-ui-keyboard-focusable-visible="false" tabindex="-1" ></div> <div> <div role="navigation" class="user-menu-wrapper ui-shadow-md" data-dcb-ui-screen-reader-visible="true" aria-hidden="true" dcb-ui-keyboard-focusable-visible="false" data-dcb-ui-aria-label="User menu" aria-label="User menu" &

Is there a way to change to change the background colours of the Previous Lesson Next Lesson buttons? In dark mode, I want to make them more noticeable.  

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?

I am having trouble getting a gif to sit on my homepage, created in canva, need to just display no play buttons etc. Can someone please assist?

It was great meeting a lot of the Community at Inspire 2025 this year!As we all get home and situated, I want to say thank you to all who joined my session - Beyond the Basics: Leveraging Built-in Tools to Enhance Your Platform. It will be available on Docebo University in the coming weeks.For the community, I wanted to share a slider tool that uses purely CSS & HTML. No more needing to pay extra for something like Comslider. Preview: This slider users the left pane to display an image of your choice, and the right pan has a header, top text, button, and bottom text.I’ve commented the code so you can easily know where to add your image links, update header and subtext, as well as button links and button text.Feel free to take this code into the tool of your choice to change colors, font styles, and more.Enjoy! Look forward to Inspire 2026. CSS:/* Slide Scroller Home */.homeslider-container { display: flex; flex-direction: column; justify-content: flex-start; align-items

Hi everyone!Inspired by ​@gstager’s excellent carousel ideas, I’ve been experimenting with the new `scroll-marker-group` CSS pseudo-element. It currently only works on updated Chromium browsers (Chrome, Edge, Opera), but it’s in the Technology Preview build of Safari (no word on Firefox, or mobile browsers just yet.)HTML: hopefully a simple structure. Each <div> within the <section> corresponds to each carousel item. Each item is made up of a content and image <div> with the relevant content inside. <section class="ab-carousel"> <div> <div class="content"> <h2>Heading 1</h2> <p>Caption text can go here</p> <p><a href="#">Link</a></p> </div> <div class="img"> <img src="/path/to/image" alt=""> </div> </div> <!-- add the scroll-start class to highlight this item by default --> <div class="scroll-start">

Hi CSS Gurus!Would anyone by chance know if there’s a way to change the thumbs up icon in the Task List widget to an icon of our own choosing?I keep thinking that this has to be do-able via CSS similarly to how we added our logo to our sign-in page with a little ::before styling of the right item and display:none on an item that needed to go away. I’m just having the worst time identifying that icon image.  Any brainstorming or help is appreciated!This is the area I’m trying to target -  

The new update to the Observation Checklists made it so that there is a new option for the manager to upload a file on every question of every Observation Checklist (see image). This is confusing to our managers because we don’t require this, and it’s making the checklists very long. I asked Docebo support and they have no way of turning it off. Is anyone aware of something we can input via CSS to remove this? Thank you in advance.  

Hi, I’m hoping someone is able to point me in the right direction for this. I’ve noticed a couple of similar related posts but not quite. (Happy to be corrected, as I know there will be better ‘searchers’ out there!!)We’re currently building our solution and it would be great to be able to add the short description to the course cards (so in the white space underneath ‘Test Course - LS’). Is there a way to do this via CSS? I did have a look at the properties of the short description when you click through, but got stuck. I have a feeling it’s going to be one of those “We want this, but it’s in a Development backlog”, but fingers crossed!!  

The image slider is popular and to help ease confusion with creating sliders that have a different number of images - I am separating the options each into their own posting. This is a slider for two images. The HTML<!-- HTML CODE FOR A SLIDER WITH TWO DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption>

In July 2025, the Calendar Widget underwent significant changes (full article available here). Nevertheless, you can still enhance it with 🖍 Custom CSS.Below, you'll find a code snippet that you can insert into your Custom Styles 💡:/* *************** *//* Calendar Widget *//* *************** *//* Hide Calendar Search Bar */ docebo-accessible-calendar-search-bar > .data-browser { display: none !important; }/* Monthly Calendar Search Bar */docebo-accessible-calendar-search-bar > .data-browser { background-color: #22BA8E; border: transparent ; color: white ;}/* Monthly Calendar Top Banner */docebo-accessible-calendar-navbar > .navContainer { background-color: #22BA8E !important; color: white;}/* Monthly Calendar Weekly Dates header - Boxes (M, T, W, etc) */thead > .lmn-typography-label-3 { background-color: white !important;}/* Monthly Calendar Weekly Dates header - Value (M, T, W, etc) */thead > .lmn-typography-label-3 span[aria-hidden="true"] { font-weight: 9

The image slider is popular and to help ease confusion with creating sliders that have a different number of images - I am separating the options each into their own posting. This is a slider for five images. The HTML<!-- HTML CODE FOR A SLIDER WITH FIVE DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption>