HTML & CSS

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,

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?

I changed the colour on the UI status badge (One colour for not started, in progress and completed). Like shown on the picture underneath with the badge for in progress: It did change to the colours that I wanted, but not on the icons: I tried to change the colour, but with no luck. Anyone who knows how to change the colour on icon only within the UI bagdes? Underneath is the code I used a from another community thread (with some additional css added) to add new colour to the badges: /* *********************************************** *//* Course Status Label Colors - Card, List, Channels *//* ********************************************

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?   

Hello all, my boss asked me to get rid of the cat tail (her exact words were cat butt but writing butt got my post flagged) image in our Task List Widget. The code below was first tested in the sandbox and then moved to production./** Hide Cat Butt Image **//** Target the element by its data attribute **/[data-illustration-name="empty_bin"] { display: none !important;}I wanted to get rid of the image, but keep the “No courses to start” BeforeAfterI checked our transcripts page and it still shows other “empty” images that we are fine with.

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: no

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 */.hy

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

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 t

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"

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!!  

Hello - We have our training material setup in a way that users do not need to complete each one for the course to mark complete (various language options).However, a progress bar and X/X lessons completed appears in the course player, that we thought would be confusing to the end user.  We used the following CSS to hide both of these elements. Please feel free to use the code as well. /* Remove Course Player Lessons Progress Bar */.progress-bar.bg-grey { display: none! important;}/* Hide X Lessons Completed on Course Player */.subtitle-block {    display: none! important;} 

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 h