HTML & CSS

Hi All, just wanted to check if anybody else faces issues with HTML widgets and CSS styled content. Since this morning ( I guess due to a new release ), we lost our additional toolbar that we do have on every page. I did use the “Custom icon boxes” code shared here in the community for that and it worked well the last two years. Today it is showing the HTML code only and is ignoring the CSS completly. Both source codes are still intact and unchanged on the platform. Does anybody have a similar problem or an idea what could be the reason for that. I talked to the Support team, but they could not help me with that. Any idea or hint would be helpful. Thanks for your supportAlex 

Is there any way to hide the option on the course mini-menus to “Mark as Outdated”? Client either wants a text entry for the user to enter (already upvoted that idea) or for it to go away.

Hello,I am currently building a dashboard for my powerusers. On one hand, I don’t need the filters, which are only available in English (and not in the localization tool). Is it possible to completely hide the automatic display of filters or disable filters entirely?Additionally, the "Tutorials" button in the header is also bothering me. I would like to hide it as well. I tried hiding the entire row (which would also be a good solution), but I couldn’t manage to do it with CSS. Does anyone have a solution for this?BR Robert

Hi! I have no experience with CSS/HTML but am trying my best to learn! I am looking to pin or fix the menu permanently on our LMS so employees will see the pages at all times when they navigate our LMS. So basically the pages on the menu will always be visible on the left side of the screen without having to click on the 3 lines at the top left. I found an article to add a vertical menu, but I don’t think this is what I was looking for.(link for reference: https://university.docebo.com/share/asset/view/729) With this option, I was able to put in the CSS code but had a hard time opening the HTML Code. Everytime I clicked on the file, it would open in a browser but no code pops up. I tried to right click to open with a text editor, but the option is not there in the right-click menu.

Our branding guidelines prefer we do not use iconography in our menus and and pages. I’m seeking a CSS solution to remove all icons from the MENU and from the CHANNELS. Please help if you can. 

Hi Everyone,We are hoping some wizard here has some magic CSS we can sprinkle in, to hide this part of the pop-up after a user completes a scorm package & course: “Course Score: Your final grade: 0”  see picture below     We love the Rate the Course being so prominently displayed!We just want to hide the part of the UI with the “Your Achievements Course score; Your final grade: 0” Until we find a solution to hide that, we have changed our SCORM player to the “Stand-Alone Mode” which then has the effect of there being no pop-up after a user completes a SCORM package and the course. Thanks in advance!Ben from Nashville

We have shifted usage of Channels in our platform from social learning and sharing, to be more used to access guides and procedural documents from SME’s across the organization. Many of our employees will want to use the Global Search function to find these guides, and right now they would appear under the Assets subheading. I saw a post about changing it in the Localization Tool, but does anyone have any sort of advice on how to change the wording potentially via CSS? Any help would be great! 

Having some trouble getting custom css containers outside of their restricted widget box settings. Even with css/html I’m not able to use the entire area of the page:  Looking to have the containers in my code to auto use all of the available space like this design:https://info.fintechos.com/hubfs/Academy%20and%20Learning/Homepage.png  

I’ve been trying to change the background of the Download Certificate button but with no luck. There’s no option in the Customize Colors section, and I have tried quite a but of CSS code, but with no luck. i will post some of my unsuccessful code. Any ideas?.dcb-ui-button-interaction-backdrop {    background-color: #08107b;    color: #ffffff; /* Optional: Ensures the text on the button is visible */    border: none; /* Optional: Removes any border */    padding: 10px 20px; /* Optional: Adjusts button padding */    border-radius: 5px; /* Optional: Adds rounded corners */    cursor: pointer; /* Optional: Adds a pointer cursor for hover effect */}/* Add hover effect */.dcb-ui-button-interaction-backdrop:hover {    background-color: #0a1ab3; /* Optional: Slightly lighter shade f

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

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?