HTML & CSS

Hello,I am looking for some CSS code to remove the image on the below Assessment page as we have repurposed this feature and no longer require to see this.  Can anyone help? 

Does anyone know if there is CSS to hide the boxes that automatically form around the HTML widget when you add it it pages?The part in the red circleThanks!!

I need to remove or rename the Expiraton Date column. We don’t use validity dates for courses and this is confusing our customers with their certification expiry. I found the course-management-grid_c4 column easily enough and can apply a display:none, but this only hides the heading, which moves all the other headings left. The content column remains intact so all the remaining fields are misaligned. If it’s not possible to hide the column the other option is to rename it to something not resembling expiry, but I haven’t been able to rename the label. Thanks in advance.

We are looking to edit the CSS to make the Renew Certification button stand out more on the course player. We have users that miss this and simply click on the Retake Course button instead. Does anyone have any expertise on updating the CSS for the new course player to edit the Renew Certification button banner

Hello everyone,I have searched the community but could not find an answer to my issue. I am trying to hide the course type in the new course player within a course. We use the eLearning course type for several types of courses, not all of which are actual eLearning.Has anyone else hidden this?Thanks in advance.

Hello,I’m looking for a little CSS help to hide the “Lesson Details” block of metadata and tags in the course player. I saw in a related post that someone shared code a year ago to hide tags appearing in chapters, but I don’t believe that will work with the current course player? Any advice?Thank you!

Hey all, I’m looking to update some of the header buttons on our login/landing page to make it easier for users to understand how to create a new account!Currently, we have the default set up with just the “Sign In” button that displays the SSO modal, then to the sign-in / registration page. But I’m hoping to change the style of the “Sign In” button, and add a “Register” button to the right - Similarly to how AWS does it here: If anyone has done this before / has any suggestions on how to accomplish this, I’d really appreciate it!Thanks, 

Does anyone know how to use CSS Coding to: Get rid of the Share & Add to Playlist button on the Virtual Training (ILT), eLearning, Learning Plan page on the new Course player before enrollment? Get rid of the Share button after Enrollment on Virtual Training (ILT), eLearning, Learning Plan page on the new Course player. Remove the Learning Plan ID (I was able to do this for courses but have been unable to apply the same CSS codding concept to remove it from the Learning Plan page). Thank you in ad

About to explore adding the below language selector we see on the login page to the standard header once a user is logged in. Has anyone tried this before?  

Hi Docebo Community, Great seeing many of you at the conference this week. I tried out that great tip of using AI to help write CSS code, but I am getting stuck.On the MyTeam page there are two elements of the UI that really are just cluttering up the interface, and I would like to remove them.Expired Certifications Overdue courses.Please see screenshot below for reference. On the Expired Certifications, this what i am seeing when i “Inspect” with DevTools <section class="team-member-card__kpi kpi-wrapper"><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__value"> 0 </span><span class="kpi-counter__label"> Expired certifications </span></a><!----><!----><span class="kpi-divider ng-star-inserted"></span><!----><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__label"> Overdue courses </s

We’re trying to figure out a way to remove the Time Spent column from the User SUmmary Screen and from the Course Summary Screeen -- but leaving time spent available in Reports. Time Spent 

Use case: Client doesn’t want “Free” to show up on the catalogue cards or in the course page when you click on the card. All courses are free for their internal users and having “Free” show up on the cards makes them worry they might get charged for some courses.Existing solution was to use the Localization Tool and change module: app, key: free, text: Free to something more consistent e.g. “Not enrolled”.Another option just came to light:If you add in HTML into the localization tool the catalogue cards render it as HTML (course page doesn’t but we hit that next).So you can change the text in the Localization Tool to <span style=”color:#FFFFFF;”>Free</span>This works on the catalogue cards to hide just the Free text.It does display the HTML text in the course page though, doh! But you can target that while keeping any pricing./* Hiding Free on the course page */.lrn-widget-content-enrollment-status .ui-typography-hea

I am having trouble changing the color for the “Moderated” button on courses that require approval. What CSS do I need to apply in order to change it? 

For our staff, we use a gmail SSO button to log in to Docebo, but we also have a public-facing extended enterprise domain. Unfortunately, under Docebo’s platform settings, you can only enter one URL redirect for the gmail SSO settings, and this redirect is linked to our internal domain, so whenever a user clicks on the gmail button on the sign in page of our public-facing portal, they get a message saying “You cannot access this page directly.”Is there a way to use CSS to hide the gmail button on our extended enterprise domain? Or, are there any other workarounds we could use to remove that button? Please advise. Thanks! 

Is there a way to disable or bypass location in the Calendar widget when creating events? We would like to use the calendar widget for reminding students about assignment due dates, but we do not wish to have a location appear for each event.

Has anyone discovered a way to change or hide the SCORM package icon using CSS?Iconography is so important for UX and the zip file means absolutely nothing to our learners, and even confuses many of them. 

I thought I was on the right track with changing changing the breadcrumb font size color by using: doc-layout-breadcrumbs .breadcrumbs { font-size: 14px; color: black;}This successfully changes the font size, but it keeps that font color white (I’m guessing because it is a link?).  Has anyone been able to successfully change the color of the font on the breadcrumb with CSS?

Hi folks,So we are going to leverage some of the deeplink aspects of courses and I wanted to check if anyone has figured out how to hide this one via CSS.Anyone figure out how to hide these?That may sound counter-intuitive? But we have some concerns with the chain of custody with these links. Hiding them gives us the benefit of pushing with finess...and using the deeplinks in notifications from Docebo and aspects of the intranet our learning team will own.

Hey there!I wonder if any of you know how to set the width on surveys to make appear relative to the elements in there, with the new course player functionality, users have to scroll right or left to find all the options on the scale, and I wonder if any is experiencing the same and if you know how to fix it. Thanks.   

Here’s a way to hide the “add to cart” button when there are no sessions:NEW Interface:/*hide add to cart button in purchase box if there are no available sessions*/body:has(.ui-notification-inline [role="alert"]) dcb-ui-button-raised-primary {display:none;}OLD Interface:/*hide add to cart button in purchase box if there are no available sessions*/body:has(div.enrollment-content > div.session-text.text-grey-mid.ng-star-inserted > p) ui-button-raised-primary {display:none;}

I would like to add some text to the Share button - seems some folks need more help.Not sure which option, if there is one, in the localization tool to select.I would like to make it say “Share this course” - some folks think it’s a social share option.Please advise.  thanks.

Should look like thisHelp! Help! Help!I have no idea what to do next… Nor does Docebo support….I’m building a page where there’s some HTML that will be used. The left part of the page will have a clickable 2x6 grid (URL links to be added later) like the above. The right side will have quick links (URLS to be added later), like the above. Once I paste the code into the editor and then view page preview, it looks PERFECT. (Image above). BUT. After Save, leave the preview and return (I can click back to the editor, or reload the page.. any change), everything changes to the image below, where the images to into a 1x6 column and the links loose all of their formatting…  I’ve attached the codes here too… Anyone have any ideas, tips, tricks? Thank you

Hi, Does anyone know how I can change the colour of the course status within the new course player? Mainly the ‘Completed’ bit I have attached a screenshot so you know what I am on about :)  Thanks!

I’m wanting to create a nice, clean UI for our LMS and, with some code (and from the help of others on here), can get an image of my choosing as a background or in the header bar already. To do this today, I am having to really fudge things in the system in order to get my images onto the Docebo CDN to be called by the code. The only way I can do this today, is to create image widgets on a hidden page and sniff out the stored file location once uploaded  - not elegant at all. For the life of me, I cannot seem to find an asset repository where I can upload and store a few images for use in my HTML and CSS code around the platform.Any idea folks?All help much appreciated. 

Hello! I thought I’d share a quick HTML/CSS snippet for anyone that wants to include their company social media links on their pages to look something like this:  Here’s the HTML that you would need to paste into a 1/3 column width page widget:<div style="padding:19px 10px;"> <div class="social-row"> <!-- Instagram --> <a href="https://www.instagram.com/" target="_blank" class="socials" style="background:#125688;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-instagram"></i></a> <!-- Facebook --> <a href="https://www.facebook.com/" target="_blank" class="socials" style="background:#3B5998;color:#FFFFFF;padding:15px 24px;" rel="noreferrer noopener"><i class="zmdi z