HTML & CSS

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, like this:   How can I do this while meeting the following requirements? The image remains constrained within the existing borders of the Instructor-Led Training box The link functionality is unaffectedAll of my attempts to do this so far have either broken the grid, or broken the link. Here’s what the code for the w

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, which are positioned vertically with CSS. The widget on the right cont

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

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-block{ visibility: hidden !important; display: none !important; opacity:0 !important; }Did anyone of you get any success in modifying such page?Thanks in advance for your helpRegardsStefano

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 Learning Now page view of a TM, we decided to go with our primary blue. This works well since the text is already formatted white and thus needs to be on a darker background. Here’s how ours looks now:   

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,I am aware that Docebo doesn’t assist with HTML/CSS code BUT I have an interesting scenario. CSS code works well in sandbox and viewed as test user. In production it works in Composer/Desktop Preview BUT when I log in as test user, it doesn’t work. Can someone give me a hint on what am I missing?This is CSS code - second button follows the same logic:This is HTML code it refers to:<div id="tfs-banner" class="tfs-banner" style="height:180px;background-image:url("https://cdn5.dcbstatic.com/files/e/c/academy_docebosaas_com/userfiles/816732/black.png");background-position:left;background-repeat:no-repeat;padding:30px;color:#ffffff;"> <img src="https://cdn5.dcbstatic.com/files/e/c/ecovadis_docebosaas_com/userfiles/816732/baner.png" alt="" width="720" height="142" /></div><p><a class="btn_first" href="https://academy.tfs-initiative.com/learn/signin" target="_blank" rel="noreferrer noopener">TFS ACADEMY FOR MEMBERS</a> <a class="btn_second" h

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 :)