HTML & CSS

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

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?

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

im looking for a way to limit the amount of posts shown in the activity stream, similar to the QA widget 

When changing text in the localization tool, is it possible to add a bold attribute?  For example, I want to emphasize the word IMPORTANT, but html code does not work.Appreicate any feedback.Regards,Cheryl

Hello, we are re-designing our landing page and wondered if anyone has any CSS code to allow us to make the search bar more prominent?  I have exhausted AI suggestions!Many thanks in advance, Lisa

Hi - I’m looking for some help with customizing a catalog widget I’m using to serve up some learning plans on a page.  I’m trying to reduce the overall vertical height between the “Enroll in Partner Onboarding” title and the green learning plan cards below it - probably by about 10 pixels.   I’ve already the search bar that’s built into the widget and the resource count label with the following CSS:  /* removes the categories filters and search bar from the partner onboarding plan widget */#doc-widget-1621 .ui-data-browser-controls-bar {    display:none !important;}/* removes text showing number of resources in the widget */#doc-widget-1621 .course-catalog-total-count {display: none;} When I inspect the element in the browser console, I’m able to reduce this space by deactivating the padding-top shown here.   I’ve tried several variations of this CSS to duplicate the effect, but without any luck. /* adjusts position of cards in partner onboarding catalog to remove gap between cards and

We’ve found our users often miss the global search at the top of the screen. We would like to duplicate it within a custom page, and our homepage. Could this be done with an HTML widget, CSS, or both together?

Is it possible to change the url you are taken to from the ‘View all’ button? I do not want users to see literally every due dated course they have ever been enrolled on regardless of their completion status. If they have completed the course then I don’t need them to see it linked from a widget supposedly showing expiring courses that they need to complete. So, is it possible to change the url on that button to take them to the same page, but with the filters applied? For example: this - https://docebo.example.domain.name.co.uk/learn/mycourses?mclp0=s-_%22not_started%22_%22in_progress%22~v-%22enrolled_date_desc%22 not this - https://docebo.example.domain.name.co.uk/learn/mycourses

 Hi, I’m trying to get this menu bar to work. I have this HTML code <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body { font-family: Arial, Helvetica, sans-serif;}.navbar { overflow: hidden; background-color: #333;}.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}.dropdown { float: left; overflow: hidden;}.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0;}.navbar a:hover, .dropdown:hover .dropbtn { background-color: green;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}.

Does anyone have any fun CSS or system settings I’m missing to control the height of this header across the platform (marked by red rectangle in the image)?It really feels like a waste of real estate just for a page title.  

Does anyone have any CSS code to hide the playlist feature that is displayed within the course banner? I would be so grateful if anyone has the CSS to accomplish this. Thank you. 

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!