HTML & CSS

We are using the following CSS to change the background color on a specific page in Docebo:/** Change the Street Landing page color to black **/#doc-page-57 {background-color: black;}We are getting the following result:We have tried various attempts to target the white space below our widgets, but have had no impact on changing the color to black.We really wish Docebo would provide access to the entire CSS code they use.Any suggestions? 

Is it possible to hide the “Page Info Boxes for User” ? on user pages with CSS.  If so, can you please share what that CSS code would be.  Thank you. 

I’ve tried some of the codes provided in other threads, but it is still not hiding the Mark as Outdated button from the course overview page or more drop down menu WITHOUT hiding the unenroll or change sessions options.I need code just for the “mark as outdated” option. This needs to be an opt in/out setting on the Admin side altogether, along with sharing or rating…  we just have users enroll, unenroll or change sessions, we don’t sell courses to outside users

Hi,Does anyone have the CSS to remove the search box from the search bar? 

We don’t want to expose instructor emails to our learners because we have an established support process that our customers should use to get help. Here’s the CSS that I used to hide the instructor email from our learners in the new 2024/2025 VILT course UI: /** Remove Instructor Widget **/.dcb-te-content-instructors-widget-instructor-email {          display: none;} Before:After: 

Has anyone discovered and can share new CSS coding to globally hide assignment submission options for Screen Recording and Link? We’d like to only have upload option displayed. It appears from past posts that coding was shared but is not working in the new course player. Specifically, this is the area and the two options we’d like to hide.Hide Record and Add a Link Submit Options? 

Does anyone have way to set a maximum height for a custom content box widget? Along the same lines, is there a way to set the font size for the content title and subtitle fields?

We want to add a button or link that says "Click here to login with your client credentials" or something similar. This will take you to our app for them to login via SSO. as anyone been able to add a button undee the “SIGN IN” button on the Sign in page? We want it under the current Sign In button. TIA!  

I need to isolate and hide these three areas of the My Activities page:Discover Coach & Share Overview Top Most Viewed Courses My PerformanceI have been right clicking and inspecting, but I can’t seem to isolate the elements and hide them with CSS. Anyone have any CSS for me? 😀 

Docebo may not currently have a built-in way to add GIFs to your pages, but with a few extra resources, you can add them to your pages.  I’ll share here what we have done on our LMS to use GIFs.We have a webserver where we are able to host images outside of Docebo - but there may be other storage options out there that will also work.  As for creating the GIFs, we have been using mostly Canva lately to create them (it’s super easy to use and inexpensive for a PRO account).Sometimes we’ll do a single GIF image and place on the page to draw more attention to a topic.  Other times, we do a set of “slides” to scroll additional information on the page.  Once we have the slide(s) created, we export them as a GIF in Canva.  We then upload that GIF to our webserver (please comment below if you have found other hosting solutions for images) and place it on a page using an HTML widget.In the HTML widget, we just use a simple <img> tag to display the GIF.  Here’

Hey everyone,I would like to design an own header within docebo. I think about a carousel with three custom content boxes that I can slide. Is this possible? I just see code for normal image slides, but not for custom content boxes.The header carousel should span the entire width of the screen.Would be happy to get some Code, I have absolutely no experience working with CSS unfortunately...Thanks in forward!Annika. 

code not workingtried image and character codecharacter code would be better ui-language-selector ui-button-dropdown ui-button-text button:before{ content: url('https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/signin-globe.svg'); /*'\f173';*/}/*globe icon for lang selector on homepage*/ 

Hi - Wondering if anyone knows how to use CSS to hide the Instructors listed by default on the course summary screen? The attached image shows the Instructors highlighted in yellow. Many of the instructors are not with the company any longer and we would like to just have the list suppressed all together if we can find some CSS to do that. The only other solution I currently found is to unenroll the Instructors, but we don’t want the active instructors to be displayed either.Thanks for any ideas! 

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