HTML & CSS

Hi everyone,I’m trying to disable the option for users to close the User Menu in my application. Does anyone know if there are built-in codes or configurations available to achieve this?If you’ve worked on something similar or have insights into this, I’d really appreciate your input.Thanks in advance! 

I am a CSS newbie, and I’m finding so many good CSS code ideas here in the community. I’m wondering if anyone has code examples for the following Login page adjustments I’m trying to make. Any tips would be greatly appreciated. I’m trying to accomplish two things:  First, I’d like to change the wording on the SSO Login Button to say something similar to what it says on the Docebo University Login page. See screenshot. I would like our button to say Onna Employee Login.  The second thing I’d like to accomplish is changing the header background color. I’ve figured out how to do this on all pages once you’re logged in, but the changes are not reflecting on the Login page.  Thanks so much for any and all tips!  

Hi. I seem to be stuck on seemingly an easy task of changing the background colour of an html widget from the usual “Docebo grey”. I’m trying to create a really simple title on top of the background colour but having exhausted all options, I can’t seem to get beyond the following:  I’ve attempted three different routes:Applied a “background colour” directly to the widget id in css. Created a style class which has a black background colour. Added a black background colour to the font style class. None of the above approaches seem to work. Any help would be greatly appreciated for what seems like something so trivial. Thanks in advance. Tagging in @gstager and @Bfarkas who are always extremely helpful. Code couldn’t be simpler:html<div class="GlobalHSbackground"><div class="GlobalTitleSettings">Quick Links.</div></div> Css:  #doc-widget-3977{background-color: #000000;} .GlobalHSbackground{background-color: #000000;} .GlobalTitleSettings{    font-family: montserrat

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 advance! I have tried a few options on my own with no luck and am running out of time! Courtney

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 </span><span class="kpi-counter__value"> 0 </span></a><!---->&

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-heading-2{  color: #FFFFFF;}This works because any pricing in

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!!! Changes to this