HTML & CSS

We are using Docebo Connect to automatically create calendar invites for Events. Given that the Event Description is what shows up in the Outlook Event, I have been using HTML to format how this looks to the invitee. However, this is now showing up in the Event Description on the LMS as well.  This is also the case in the Go Learn App.Does anyone know how to change this so that the text reads as it should?Thanks in advance.

We had a need to make the “Enroll” button disappear for Power Users.  We wanted to give customers the ability to manage their own user enrollments in the system, but not to be able to get free classes for the Power User (bypassing the shopping cart).  Here was the initial solution in CSS:/*hide course enroll button*/[aria-label="Enroll"] {display:none;} However, we also offer some free online tests to the public, and the solution above affected *all* enrollment buttons.  The solution to make the “enroll” button selectively disappear was based on CSS siblings:ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;}/*hide course enroll button under shopping cart*/ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;} This CSS allows you to essentia

Hi everyone,I would like to remove the enroll button from the new course page.The objective is to show an overview of the course, which is a 3-month program. This is because if participants enroll in a session, they will only see details specific to that session.However, this program requires them to attend several sessions throughout the program. There are two identical sessions to accommodate colleagues in different time zones. I would like to give them the option to choose their preferred time. Therefore, I will ask them to make their selection outside the platform. On this page, I just simply want to display the options. To avoid any confusion, I want to remove the enroll but

Hi everyone,I would like to remove the enroll button from Public catalogue page , Course Level and Session level both ? I got some idea from community page and i am able to hide the course level enroll button but i am unable to hide session level enroll button . Any Idea or suggestion how we can achieve this?  Thank you in advance for your support.Page reference to remove enroll button from Course level 

This is a follow-up to my previous question about implementing a grid of floating boxes - https://community.docebo.com/search/activity/topics?userid=6993. I was able successfully implement my box design using a CSS grid inside of an HTML widget. Right now it looks like this. A grid of boxes - hooray!One of the my requirements is that each box be a link. To extend the active link area over the entire box, and to get the text positioning the way I wanted it to be be, I set each link to be a flexbox. So I currently have a grid layout with a flex box within each grid item if that makes sense. Next, I want to add an image to the top portion of the “Instructor Led Training” box, li

I’m trying to develop a new front page for our Docebo implementation. Our design concept is similar to the one Docebo itself is using for its university.We want the main body of the page to be divided into two columns.On the left we’ll have a large “headline” and button leading to the course catalog for our flagship product.  On the right, we’ll have a set of floating boxes which contain links to secondary offerings.Our team has identified three options for implementing this layout. All of these involve using a Docebo widget page.  The first two options involve using a CSS grid to position the elements. Option 1: In the composer, create a one-column row, and populate it with a single HTML widget. Use a three-column CSS grid to position the html elements on the screen.  Option 2: In the composer, create a two-column row, and populate it with two HTML widgets. The widget in the left contains the main title and button

If you’re using the HTML training material type and really want to get rid of that instantaneous pop-over saying the activity is completed, here’s some CSS code to hide it: /*Hide pop-over completion message for HTML content*/div.intime-completed.ng-star-inserted > div {    display: none !important;} The activity will still be marked completed everywhere it needs to be.  This just prevents the pop-over message from displaying.

Hi,  We have started to use the new course player and would like to change Docebo’s illustrations inside the course player for when the user is starting a new course, and when the course is completed.  I have managed to remove these two illustrations and add our own illustration to replace these, but I have not found a way to distinguish these two illustrations by CSS. Our solution today changes both these illustrations to the same. Does anyone have an idea on how to distinguish these by CSS in the new course player, so we can have two different illustrations?   

Hi I’m quite new to the Docebo platform and would to change the rectangle label colour on the course cards for the status of the courses. We currently have blue for not started, which changes to black for courses In Progress or Completed, but we would like to have this as the following:Red - Not StartedAmber - In ProgressGreen - CompletedAny help on this would be very much appreciated. Thanks

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?

Here is a fun one - does anyone have an idea on how to hide deeplinks from the task widget?I had a higher up someone with the right intent incorrectly tell their staff to go do something. Because we are in a compliance cycle, this could cause some havoc with folks running their own reporting.To help avoid that? We are disabling the deeplinks for those courses for now. But we do like to deploy them with a tighter chain of custody (we actually have hidden the share link on a course page in the past with CSS).So...a question - has anyone attempted to tackle hiding the ellipses that can be available when a person hovers across something that is in their task list when deeplinks are enabled???? 

Greetings everyone. Have you noticed that from users' management when you want to activate or deactivate a user or users from a branch, it just rolls out? I mean the system doesn´t warn you about what you are about to perform, I think it would be a good idea to get a warning message before rolling out, get a message warning you before confirming the action you are about to perform and info about how many users you are about to modify. Does any from you know if we can configure this from CSS and in case you do, can you share how? or maybe if I need to open an idea to Docebo? Thanks 

One request that we have for our platform is to make “United States of America” the first choice when users self-register. What our Additional Fields - Country option currently looks like.What would be the best CSS code to do this? Or is this possible? 

Dear fellow members,I’m getting mad trying to hide an element via the custom CSS.In particular, the element to be hidden is the number of lessons completed in courses (see the highlighted text below):I’m a CSS beginner, though I succesfully modified several elements across pages.This one is handled via a span, such as:<span class="subtitle-block">0 / 3 lessons completed</span>I tried the following without success:.subtitle-block{ visibility: hidden !important; display: none !important; opacity:0 !important; }I also tried with the parent elements, always without success:progress-bar-wrap ng-star-inserted .subtitle-blo

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 Docebo community! Not sure if others have run into this, but there’s a strange light blue/aqua color background for the Resume Training page in the new course player.  The color isn’t configured in your colors in Configure branding and look. According to the CSS, it looks like it’s set to a default lightblue background. Here’s the CSS if you’re looking to change the color. Simply use the hex value for whatever color you’d like to use. /* Change "Resume Training" training material page placeholder background */.lrn-course-player-training-material-idle-view-content { background-color: #2B4FF4;} In order to differentiate this page view from the Start Learn

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 helpdes