HTML & CSS

Why is this available for power users who only have permissions to “view” users?How are people hiding this with CSS?

This guide walks you through building a 5-slide, click-to-navigate image carousel for a Docebo widget page — pure HTML + CSS, no JavaScript. It uses hidden radio inputs and CSS :checked selectors to drive the visible slide state so learners control the pacing (no autoplay). This pattern was last verified in August 2026 against the current Docebo navigation experience. Click here to see the widget live 👉 Before you start: this is community-contributed guidance, not an official Docebo support article. If a future platform update strips input elements or disallows :checked/sibling CSS, the arrows may stop working — please flag that in the comments if it happens so we can update this guide. Quick overview - What this widget guide gives youA centered "hero" slide with title, subtitle and CTA button. Two dimmed slides visible on each side (near/far), with smooth transitions. Prev/Next arrows that loop both directions (5 → 1 and 1 → 5). Fully responsive CSS and class scoping so the widget wo

Hello, We didn’t end up using this code, but I thought it might be helpful to others. It turns your hamburger menu into a 3 column “mega menu” top center using CSS-flexbox columns. It also makes the topbar “fat” plus a few other tweaks. Enjoy! Before:After: 

Has anyone used CSS to remove the global search bar from the top of their pages? If so, we’d love to hear your suggestions on how to do it.

Hello I need a very smart person to help us out. We have put a catalog on the page and set it to calendar view. It produces the calendar and is very hard to read -- especially when trying to get a quick at a glance view of the upcoming webinars for the month. I’d like to use CSS to change the default view from “Monthly” to “Agenda” right now each person has to manually change the setting themselves. Has anyone already figured this out that could share their CSS? 

Hello -We are working on enhancing our learner experience. During our User Acceptance Testing, the Next Lesson/Previous Lesson button in the Course Player was confusing for our users.   Does anyone have the CSS to hide these buttons?Thanks for your help! Best,Liz

 Has anyone had any luck turning off Docebo Marketing popups that have started appearing since the new interface launch. I’ve tried Elmast’s suggestion (CSS) Hiding contextual help via CSS | Community to no avail. and I note that the feature request:https://community.docebo.com/ideas/persist-keeping-contextual-balloon-help-turned-off-when-the-user-turns-it-off-4229 appears to have been removed.Our management team is kind of unhappy that platform marketing is showing up on the platform so we need a way to permanently turn it off/disable it. Craig 

Hi all,Docebo will activate the new Certifications & Retraining experience on Oct 28th according to this announcement: https://help.docebo.com/hc/en-us/articles/19807231971474-Product-updates#:~:text=Heads%20up!-,New%20Certifications%20%26%20Retraining%20experience,-Starting%20October%2028I assume that other customers (like us) are not ready yet to use the new experience.To prevent users from seeing the Warning Banner on the My Activities page, we used this CSS:/* Hide warning banner on My Activities - Legacy Certifications */.printable.user-report-courses .ml-warning-banner { display: none !important;}Just wanted to share it with the Community.Always test things in Sandbox :)

Hi everyone,We're updating a branded Docebo theme and noticed that course status badges appear to behave differently across various parts of the platform.On My Courses, we can still style statuses independently:Enrolled In Progress CompletedHowever, when inspecting Catalog, Search, and Homepage Available Courses cards, we found the badges appear to render as: ui-badge-status-successfor:New Enrolledand ui-badge-status-neutral for:In Progress CompletedWe inspected the rendered HTML and were unable to find status-specific identifiers such as:ui-card-status-completed ui-card-status-in_progress data-status="completed"on these card types.Has anyone found a supported selector, attribute, or other method to distinguish Completed from In Progress on Catalog/Homepage course cards following recent UI updates?Please also note that I am a lowly LMS admin, not a coder or developer. Most of this work was done using AI to help me out and my skills are limited and I might be missing something.  Any tho

Hello! We are trying to remove the “invite to watch” and “mark as outdated” options when you click the elapses menu on an asset in a channel (and other places these options might exist). I was able to remove the large invite to watch button when you click into an asset, but these menu options appear more complex. Any advice would be appreciated!   I think some of the complication comes from the list items not being consistent across the board but let me know what we can do to mitigate clicks. I also attempted to add one of the previous CSS blocks that removes permissions from the sidebar, but that did not work for us.  Thank you!Hailey Gebhart

To hide Invite to Watch ButtonYou can try adding the following CSS under Admin menu → Configure branding and look → Custom Styles. button#group_add[aria-label="Invite to watch"] { display: none !important;} Please have your IT or web team review and test this CSS in a sandbox environment before applying it in production.

Has anyone found a simple way to add hover-over tooltips to specific areas of an image in Docebo? I'd like users to see competency descriptions when hovering over an icon or label in a competency framework graphic. Any recommendations, examples, or free tools would be greatly appreciated.

Question: Support for Multi-Byte Emojis in Docebo via CSS?Hi everyone,I'm trying to use emojis within learning content and widgets in Docebo, but I'm seeing inconsistent results.For example, wrapping emojis in a span works for some characters: HTML <span class="emoji">⭐</span>  However, many other emojis (✅, 📚, 🚀, 🎯, 📢, etc.) either do not render or are replaced with blank spaces/unsupported characters.I'm wondering:Does Docebo fully support multi-byte Unicode emoji characters? Is there a recommended CSS font stack (e.g., Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji) that can be added at the platform or theme level? Are there any platform settings, theme customizations, or custom CSS options required to enable broader emoji support? Has anyone successfully displayed modern Unicode emojis consistently across web and mobile learners?My initial thought was that this might be a font-rendering issue rather than an HTML issue, since simple symbols like ⭐ display correc

How can I hide some of the public custom pages on Extended Enterprise domains with CSS?I have over 50 EE domains and would like to select which external pages I make visible for some of the EE domains. 

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

Hi all!On each of the Assets, there are 3 dots (hover text says "More") and within the 3 dots is a Download option. Is there a way to make a more prominent Download button via CSS? Put it directly on the asset view page instead of behind the 3 dots?  Note that I am more than happy to sacrifice the “Invite to edit” button in exchange for a download button!  

Hi all. When someone fills out a checklist and submits it’s to their manager, the submitted answers become a very light grey colour which is hard to see. Does anyone have any ideas how to modify this colour to black or something darker and more accessible? Any ideas with CSS are welcome.  

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.

Has anyone been able to find CSS to add a subtitle to widgets? Like, if a task widget is named “Manager Tasks” and we want to add additional smaller text below, like “The below tasks are for your direct reports and those below them in hierarchy”.

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

Hi all.I’m updating a bunch of certificates for all of my Power Users, & one has requested a different date format than the rest - they wish to see the date in mm/dd/yyyy format (so, e.g., something issued today would show ‘08/27/2026’).But i can only coax the last 2 digits out of my year. i initially tried ‘mm/dd/yyyy’, but i got ‘0808/2727/26262626’. I could fix the day & month easily enough, but anything i try for the year only returns ‘26’ one or more times; it does not show the first 2 digits whatever i try.Any suggestions are appreciated.

We faced some issues with the new interface when creating sessions and I’d like to share the CSS that we used to fix it.The problem was in the form opened in the right-side tab, when pressing "New/assign" and "New session" in the "Course" "Sessions" menu:​​​​​​the buttons to navigate through the form (“cancel”, “next”, “previous”) were not visible the session evaluation list was condensed to the left side, leaving a lot of empty space in the right sideThe solution found was to apply a custom CSS to make the buttons visible, preserving the original platform layout, to fix the bulleted list to occupy the entire space, maintaining the scrollbar visible, ensuring the last text is also visible, while keeping the code as least intrusive as possible:/* New Session panel and radio list fix - START */create-ilt-session-stepper .doc-layout-right-panel-content.ui-scrollable { overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; padding-bottom:

I'm not sure if I'm just missing the option, but I'd like the header image to be full width and responsive to the browser window size.Ideally, the content wouldn't be restricted to such a narrow container, leaving so much white space on the left and right. Does anyone know if this can be achieved with custom CSS and HTML?

Hi everyone -I’ve seen some awesome posts about hiding the catalog search bar completely.  However, I want to keep the catalog search bar and hide the Filters and Calendar options from my catalog search bar.  Would there be a way to hide this using CSS? Any help would be greatly appreciated! Thank you! Liz