HTML & CSS

The new navigation is almost here, and as many of you have noticed, it can break custom CSS. Here's how we handled it, in case it saves someone the month I spent going the long way.I was tasked with rebuilding our custom CSS so the new nav would match production. Last year a developer rebuilt our homepage and sub-pages, and we didn't want to lose that look. My first approach was to rebuild it section by section in the new format, using AI tools to help. After about a month I'd nearly finished just the homepage.Then it clicked: there had to be a simpler way. I used AI to compare our production CSS against the new-nav structure, and there was the answer. Much of our code scopes styling to the #doc-layout element Docebo uses today. In the new nav, that top-level element is replaced by app-layout — so every rule anchored to #doc-layout was matching nothing, which is why the layout fell apart.The fix for the bulk of our code was to broaden those selectors to match both elements instead of r

Hello Community members!I'd like to share one of my favorite code snippets with you, which can enhance the learning experience with a modern touch. By incorporating the code below, you can turn your widgets into rounded objects, similar to buttons, giving your platform a more contemporary look and feel."/* ****************** *//* Rounded Experience *//* ****************** *//* Sign-in pop-up window block */.external-simple-content { border-radius: 20px; overflow: hidden; z-index: 1; /* To ensure it stacks above the background */}/* Sign-in pop-up window */.external-simple-signin.ng-star-inserted,/* Cards in Built-in pages (e.g. My catalogs, My Courses and Learning Plans, etc) */.ui-card-wrapper,/* Course Panel Thumbnails within Learning Plans */.ui-card-header,/* Enrollment Types badges (e.g. Mandatory, optional, etc) */.lmn-badge-status-theme-info,/* Locked courses */dcb-sh-content-thumbnail { border-radius: 10px !important; overflow: hidden; /* ensures content respects the round

Ever wanted to hide all Page titles ? It’s super easy with custom CSS!  To hide all page titles on your platform, simply add the following code:/* Hide Page Title and Description*/#doc-layout-title-bar {  display: none !important;} Result below: Hope that helps! Similar articles:Change the course status color Make your widget with rounded corners Enhance the new calendar widget Hide the language code on courses cards 

Hi everyone,I'm curious to hear how heavily you are all relying on the HTML Training Material type in your current platform setups.With the platform's native features and widgets constantly evolving, I'm wondering if its primary use cases are shifting for the broader community.What are your main use cases for HTML training materials today? Are you using them heavily for structural course design and custom formatting, or mostly just as an iframe wrapper for external content?Would love to hear about some creative ways you're using it!

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

We have a standard in all of our products that help is surfaced from a question mark icon on the main navigation header. We have long wanted to customize this but ran into limitations on old UI. Curious if anyone else has tried to implement a custom button on the navigation bar or even top header to launch a new page. 

You’re looking to personalized the courses status badges (not started, in progress, completed)?Below, you'll find a code snippet that you can insert into your Custom Styles 💡:/* *********************************************** *//* Course Status Label Colors - Card, List, Channels *//* *********************************************** *//* Not Started */.ui-badge-status-success,.ui-list-item-status-not_started .ui-badge-status-success { background-color: #020050 !important; color: #ffffff !important;}/* In Progress */.ui-badge-status-neutral,.ui-list-item-status-in_progress .ui-badge-status-neutral,.ui-card-status-in_progress .ui-badge-status-neutral { background-color: #F7681E !important; color: #ffffff !important;}/* Completed */.ui-card-header:has(+ ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral,.ui-list-item-status-completed .ui-badge-status-neutral,.ui-card-status-completed .ui-badge-status-neutral { background-color: #008767 !important; color: #ffffff !i

So, this has been around for a few years now, but I only recently became aware of it. And I thought I’d spread the word here, because it’s really quite cool and opens up more options for us using custom CSS in Docebo.There’s a lot you can read about this online, but I liked this little run-down: https://gomakethings.com/the-has-css-pseudo-class/A couple of examples where I’ve already found a use-case for this in Docebo:It bugs me that when you self-enroll in a course that requires admin approval, on the course page it shows your status as “Enrolled” with a warning box below that. As far as I’m concerned, no. You are not enrolled yet. But how do I hide that status in this situation without hiding it all the time?Answer:.lrn-widget-content-enrollment-status:has(+.lrn-widget-content-enrollment-description) { display: none;}I have an external page embedded as an iframe. I don’t want the title bar to show up for this particular page; it’s superfluous and unhelpful. Perhaps there’s anothe

Hi all, we want to move the SSO login button futher up, so users get to see this first rather than the login (which they don’t use)….. We can’t turn off/hide the login buttons as others have suggested otherwise we wouldn't have access (security).  Does anyone have any CSS code we could take a look at please? 

Hello, If we iframe a comslider in as an html widget on our homepage, and a user clicks a link in that comslider, can we make it navigate the whole “master” docebo page? Or do all comslider links have to be “new window” or “in iframe”. Here is an example of where the comslider would go - replacing that “limitless” banner. 

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!  

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: none !important;}This works for thumbnails assigned through Course Training Material and the Central

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" &

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.  

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 href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption>

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>

 Due to the popularity of the slider, the many configurations, and the growing original thread, I am creating separate postings for sliders with two, three, four, and five images. Here is the four-image slider. The HTML<!-- HTML CODE FOR A SLIDER WITH FOUR 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&g

Due to the popularity of the slider, the many configurations, and the growing original thread, I am creating separate postings for sliders with two, three, four, and five images. Here is the three-image slider. The HTML<!-- HTML CODE FOR A SLIDER WITH THREE 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&

#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-user-menu-button.ng-star-inserted > ui-button-icon::after{ content: "MENU"; color:#888; font-size: 0.92em; text-align: center; font-weight: 600; top: -6;}#ui-button-icon-3 { bottom: -8;}/* add text "menu" to hamburger menu */Having minor spacing issues - pretty sure my text-align does nothing