HTML & CSS

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

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 

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

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

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

Hi,I’m wanting to hide the  “invite to watch” circle button from channels as well as the ‘invite to watch’ button from the drop down list.Or does anyone know the CSS code to hide them?I found a couple of questions similar but there CSS isnt working ☹️Many thanks! 

The add to calendar button doesn’t work for us. I was hiding it in the old player with this CSS:#doc-layout-action-buttons [aria-label="Calendar"] {display:none;} But I can’t seem to figure out how to do the same thing on the new course player. Does anyone know the class/ID that controls this, and what the aria labels are for the new menu? I want to hide the calendar as well as mark as outdated. Thank you in advance for your help!

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

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

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

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-