HTML & CSS

When I drop my code into the HTML text box for a Catalog Custom Page, I can see it all load correctly in the edit mode.Combined HTML and CSS preview after entering codeOnce I publish the code, it changes so that the CSS isn’t loading. Any ideas?How Page and Editor appears after clicking Confirm and Publishing the page 

Hey All, I was wondering if anyone had the HTML / CSS code for moving the button position on custom content boxes? Like what Docebo University have done here: Any help would be appreciated! :) 

My organization is working with a marketing agency which has asked me to add two chunks of Google Analytics/Tag Manager code, one in the header and one in the body. I enabled GA4 but I only see a single field for code. Can both header and body codes be placed here?Docebo customer support suggested I try the Zendesk widget because the code is javascript, but nowhere in the community do I see this solution being discussed.I found the other community posts on this topic somewhat confusing and am not sure how to proceed.Thank you.

Hello Community,I’m trying to change the roundness of the edges of the login container. Can you please share the CSS script if you know it?Thanks much. 

Hello Community,Can you share the script to have rounded corners for the login container?Thank you very much for the attention.  

How can I change the checked radio button color for the Single-Choice test questions in Docebo? I need help in CSS or other settings that I can change the checked radio button from system green to blue (#0099ff) . Thanks. 

I would like to create a dropdown menu that includes links to all our major site pages. Currently we are using a simple horizontal menu. I have reached out to Docebo about this, and they have an “At Your Own Risk” approach to this. I am also aware of the CSS warning about having it apply to all pages. I am competent in HTML, not so much in CSS. I have followed a lot of links that give all kinds of lengthy and sometimes contradictory instruction. But what I really need is an actual example, with CSS and HTML code, that works in Docebo without messing everything else up.  Thanks.

Hello,I'm working on a project where asset titles and descriptions are often duplicated, meaning the same information appears in both fields. I'm looking for a way to clean this up by removing the duplication, as it's redundant to display the same content twice.Has anyone written code or come across a solution for this? I'd appreciate any guidance or examples. Thanks in advance! Siga

I’m working in the sandbox environment and trying to update the In Progress and Completed font color in css. I have updated a few classes but my css continues to get overwritten by the Docebo css. Anyone figure out how to update the new course player? This code although it works when I inspect the page, and edit it, it will not work when I add this css to the course player css. /** Change text color of In-Progess indicator on tile **/.ui-card-status-in_progress .ui-badge-status-neutral {color: #FFFFFF; background-color: #1D700F!important;}  

Hi all, I’m experiencing an issue with the HTMLL/WYSIWYG page widget and I’m hoping that someone here might have come across it/resolved it. The ProblemWhen nesting block elements (<div>) inside inline elements (<a>), the editor seems to "auto-correct" the structure upon saving, leading to a disrupted and redundant layout.Original structure:<a href="#"> <div></div> <div></div></a>Becomes:<a href="#"></a><div><a href="#"></a></div><a href="#"></a><div><a href="#"></a></div>I’ve managed to find a work around, however it’s impacting the intended functionality and appearance of the content.I reached out to helpdesk regarding the issue but they said they aren’t HTML experts and suggested consulting the community.  Seeking Insights:Has anyone else faced a similar problem with nested elements in the HTM/WYSIWYG widget on Docebo?   Any known workarounds or fixes? I susp

Anyone have some CSS code to change this UFO picture? 

Hello Community,Can you share the script to change the color of the breadcrumb bar?Thank you very much for the attention.

Just noticed that anyone with access to view users can also access the option to “Manage Team Requests” and potentially remove a team member association. This page seems to track all changes made to employee/manager relationships whether done by an admin or via CSV import. This definitely poses a risk…Does anyone know or have CSS to hide this option on the User Management page? @gstager ?thank you.

Hi guys!I am looking into adding html&css so the image can turn from b&w to color on hover over?Can anyone share a code for that? Thanks a million :)

Hi. I’m trying to apply some fairly extensive CSS to an HTML widget, and it’s quite tedious….saving the CSS changes, clicking “confirm”, going over to my widget desktop view in a separate window, reloading the page, clicking on “desktop preview” again.Is there an easier way? Anything close to a real-time experience?Thanks.

Hello, all.I am working on a page layout and have three custom content boxes (see image). I want to change the CSS so that every custom content box on this page will have a border-radius: 20px. My attempts aren’t working. I am struggling to know how to apply universal CSS to an entire page in terms of correctly referencing the targeted widgets. I could use some help. Here’s how I’m referencing it in my CSS file:#doc-page-23 custom-content-box-widget {border-radius: 20px;} Thank you!

I have been researching ways to adjust the Breadcrumb Navigation settings and I am currently stuck on this. Could some please give some advice or direction on this?  Here is my scenario: Our page is setup to display Breadcrumbs in the following format:< Back I Home > Admin DashboardCustom Styles CSS input: : /* ************************************** *//* Makes the 'breadcrumb bar' a gradient. *//* ************************************** */  /* doc-layout-breadcrumbs .breadcrumbs {    background-image: linear-gradient(45deg,#0068D9 0%,#333333 20%)!important;} */  doc-layout-breadcrumbs .hierarchical-breadcrumbs ui-icon {    margin-right: 10 px; It has been requested to extend the Breadcrumb Trail to show all steps the user took to get to the current page.For example, <Back I Home > Page 1 > Page 2 > Page 3 Any assistance is greatly appreciated. 

Hello, Community! We’re new to Docebo (we just finished our onboarding!) and fairly new to CSS as well.I’d like to add a label to the “three-dots” icon at the top of the course page (or any page) so that people know it is a “More Options” menu. Our people seem to be “missing” that this icon is there.During onboarding, our rep provided the following code to add a label to our Admin gear:#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon::after{content: "Admin";color:#000;font-size: 0.88em;font-weight: 600;} I could replicate this coding, and I’m typically the kind of person who likes to dig in and figure things out myself, but I’m not sure of how to locate the pathing I need to identify the “three-dots” menu. Hard to dig in when I’m not sure where to start digging :)Any help and guidance you can provide would be greatly appreciated.

Hi, we would like to show the user’s name on each page/tab of the user personal summary. Currently the name only appears on the Statistics page, but we’d like to have it appear on the other pages. Has anyone created CSS code to do this? 

Hello, Working on some designs for our homepage and two of them use the For attribute to function. However, it seems as though as soon as we add the code to the HTML widget, all instances of the For attribute are removed by the system automatically. Has anyone seen this before? Any workarounds? Thanks - 

Hello!  I recently learned about inserting a rotating banner using Google Slides to our home page. An easy enough process and I have it 95% done. I have the HTML code and am inserting the code as an HTML widget. It works perfectly fine, but I do notice that it has the “Google Slides” bar at the bottom of it, almost like it is doing a presentation. Does anyone know how to remove this bar? I’ve looked at several threads that also use Slides to HTML banners, but haven’t found anything. 

Hi CSS experts,Is there a way to change the color of the Star icon?Thanks for your help! 

Hi all,We have our LMS platform built and looking how we want using CSS but now we want to have an additional homepage for another customer to view tailored content and when we duplicate the original homepage it appears as though the CSS from the default hompage isn’t pulling through to the newly created one and elements of the page are different.  What do we need to tweak CSS wise to get consistancy throughout the pages?  I have tried looking at the IDs of the boxes etc without success.This is the default homepage...One created in sandbox for the group… So the main box has lost the formatting of the font and colour and the small blue box the formatting of the title with icon.​​​​​​​

Has anyone figured out a way to customize the columns on the learning paths page. Ours currently looks like this   And I would really like to extend the name column so we can see the name. I found a page that has the CSS tags for the course management page but not for learning paths. Does anyone have any experience with the CSS for learning paths ?  

We use email notifications to send training plans to our users. In the last 2 weeks email notifications that we have been set up using Source Codes are not being sent from the platform.Has something changed to where notifications only work using HTML text? Is anyone else having this issue? I’ve recreated a few of our notifications removing the Source code and only using the Short Codes provided and it seems to work. However, we use the source code due to the branding and clean look that it provides.