HTML & CSS

My team is looking to make our homepage more personable, is there a way to add a personalized message to the top of a homepage when a user logs in (ex. Welcome [user’s first name])?Assuming there is some code involved, but what widget and shortcut code should be used?

Hello there,With the new navigation UI now a mandatory requirement, can we ask the community for the css scripts to do the following: Move the login box from the center to the left side Change the color of the header bar to blackWe had the scripts to these in the old navigation UI, but it seems not to work anymore.Thank you for the support in advance.Caesar

Hello, does anyone have a css code to use to remove the AI Roleplay tab from MyTeam? We don’t even have it turned on but it’s on the myteam tab. 

There are parts of the new My Profile that we don’t want visible. I can’t figure out what element to target with CSS. Any ideas?

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

Everytime I am going into the platform and my browser refreshes. I am dismissing 3 modal popups now - reminding me about configuring the AI and the new navigation experience.Um - I refresh my browser often? And the 3 dismissing clicks are literally slowing me down.Yes this is belly aching - but I mean really????? 3 modal popups every single time a browser window refreshes with Docebo opening for a superadmin????

Hi everyone,I’d like to use this thread to collect ideas, solutions, and best practices for customizing course cards and the surrounding layout.I’ve already come across some CSS and HTML solutions, such as rounded corners or hiding specific information, but I’m curious to see what else is possible. Ideally, I’d like to avoid replacing course cards entirely with linked images.From my perspective, I’d love to:Display larger images Reduce the amount of information shown on the card Limit the layout to a maximum of 3–4 course cards per row Use GIFs instead of static imagesOverall, I’d really like to see a more customizable and flexible design for course cards.Looking forward to hearing your thoughts and seeing what you've already implemented!  

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?

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

I am having issues updating existing HTML widgets on pages in the new navigation. The issue is specifically with images that have css associated. When I try to replace a current image with a new image (by replacing the URL), it will not save and attempts to remove the image information completely.When I save, it replaces the URL with this:<div id="fh5co-hero" class="fh5co-hero-rev" style="background-image:url(;"><div class="container"><div class="row">It will not allow me to replace style="background-image:url(;” and no longer reflects the original image URL though the original image is visible.I even tried making a completely new page with the same issue.  I have done this many times over the past 4 years, so this is not the first time I have updated images. I have also tried opening a ticket.Has something changed in the way we manage HTML/WYSIWYG pages? 

Anyone have any success or find the need to hide the description which now shows up along with page titles in the new UI? We have previously used the description field to give contextual descriptions for our Power Users & Admins where pages are used for easier clean up & maintenance activities so I’d like to use CSS to hide it now that its learner facing with the new UI.So far I see the elements attached with the description when I inspect the various pages in my browser but these seem more generic and I’m worried if I apply CSS to them they’ll impact other areas of the platform.data-testid="default-description" class="lmn-typography-label-4If anyone has any guidance or recommendations for how to hide the new descriptions or tests they’ve done themselves would be awesome to here!

I am looking for help locating the ID of rows within custom content pages to apply a background colour to a row area within a custom widget page, similar to the new look in Docebo University.

I have a custom public page that uses HTML and custom CSS to act as a home page and hides the catalog page and the links in the navigation bar.When I turn on the new Admin Navigation, it “un-hides” those links and “un-hides” the catalog page.I am sure it’s just a piece of code somewhere, but I am not sure where. 

I’m looking for help with CSS to hide the course score on the course landing page after completion of a specific course. Any help would be greatly appreciated!  

We’re currently getting a lot of user queries regarding switching/ unenrolling from ILT sessions due to those options being hidden in a menu right out of the way. I was hoping to use the Header Message to highlight a resource showing people how to switch sessions as a way of reducing this. However, the header message itself is completely unformatted with no way to do so in the settings. I tried editing it with CSS but nothing I try seems to work.Here’s where I got to: app-layout-header-message { background-color: #a11fff; color: #ffffff; padding: 10px 20px; text-align: center;}Has anyone managed to do this successfully?

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! 

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 *//* *********************************************** *//* Not Started */.ui-badge-status-success,.ui-list-item-status-not_started .ui-badge-status-success {background-color: #FAE4E2 !important;border: solid 1px #666666;color: #333333 !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 {backg

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