HTML & CSS

Anyone know how to get rid of the “Optional Courses” section in the learning plan player? We have no optional courses so this is pointless. I also would like to get rid of the time counter as it is not accurate and is causing confusion.  

Hi, I have been trying all sorts of CSS to force expand the folders in a syllabus. No luck. I have tried many versions but similar to this:  .ui-accordion-panel-header[aria-expanded="true"] + .ui-accordion-panel-divider + .ui-accordion-panel-content-wrapper{ height: auto !important; max-height: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; transition: none !important;}Does anyone have the trick? I want all the folders expanded showing all the sub-content in the syllabus. Thank you!Mark

 Guide to Using the Docebo HTML and CSS BotAt Docebo Inspire 2024 in Dallas, Patrick Morales and I shared a custom GPT that we built as part of our talk: “Building Custom Widgets with ChatGPT”. For those that weren’t able to attend, I wanted to share some more details about how the custom GPT works. If you just want to jump right in, here’s the link to the Docebo HTML and CSS Assistant custom GPT. Important Notice:I hope you’ll find this tool to be helpful and valuable. But as with all HTML and CSS added to the platform, Docebo can’t guarantee that any modification can be achieved or that it will always work. Updates happen to the LMS all the time and things that used to work may stop working at some point. Even if the snippet was generated using this tool, Docebo can’t be held responsible for the maintenance of the code. Please also note: HTML and CSS do not work in the mobile app. The changes you make for desktop will not be reflected in the Go.Learn or Branded Mobile App. The recomm

Hello all, we made a custom CSS navigation menu, but the menu dropdowns “hide” behind our catalog widget. Does anyone know what might be going on? It works fine on all other pages that have other widgets. 

Would any CSS experts know the code to remove a tab from the admin menu (specifically the Question Bank)? Our power users need permission to create courses but this enables the Question Bank which we cannot have them access. We would apply the CSS only to Extended Enterprise domains so it would not impact our main platform. Thank you in advance!

Hi Docebo community!We’ve been using Comslider for about five months. Periodically, we get a message that says “UserProjectAccountProblemThe project to be billed is associated with a delinquent billing account.The billing account for the owning project is disabled in state delinquent”. However, we are paid up through the end of the year and are nowhere near our quota for use. The odd thing is that the error seems to crop up about once a month for 24 hours and then self-resolves.I’ve emailed support but not response. Anyone else having this issue? 

Here is CSS code to remove the default dancing with confetti image and replace it with something else.I had to move my text to the bottom of the page and i moved the retake course to the top left corner so it was also out o the way. Change the sizing up to best fit your image. lmn-blank-slate {    display: flex;    background-image: url(https://i.imgur.com/La8dCQI.gif) !important;    background-repeat: no-repeat;    background-size: contain;    background-position: center;    width:100%;    height:400px;}lmn-blank-slate-title {    position: absolute;    bottom: 20px;    left: 0;    right: 0;    text-align: center;}dcb-course-lesson-completion-slate .dcb-course-lesson-player-completion-actions{    position: absolute;    top: 0;    left: 0;    z-index:9999;    visibility: visible;}lmn-illustration {   visibility: hidden;   opacity: 100 !important;}

Hello, I’m looking for ideas or tips with CSS and exam color selection. We’ve settled on branding colors, but the red confuses some people while taking exams. There was another post that was very helpful, but now facing a new problem. Our multi-select questions are not amended satisfactorily. Does any know what code I need to add to fix this? Or tips to find the necessary code to remedy the issue? The code I’ve implemented in Staging so far. Also, I’m learning the basics of CSS & HTML, does anyone have recommendations for courses/learning that would promote better understanding and maintenance in the future? I thought I would ask. There’s a lot of talented people in here :) Thanks!! /** Single Choice **/lmn-input-radio input[type=radio]:checked {    border: 2px solid #323e48 !important; /* Targets the border colour when selected */     background-color: #dde0e4 !important; /* Targets the inner colour of the above when selected */ } lmn-input-radio input[type=radio]:checked:before {

We are looking for a way to hide the Looks Good and Take a Look status banners from the My Team page. The majority of our courses do not have due dates and these banners have led to confusion by managers. Example: they see the Looks Good status for an employee and assume that employee has completed all courses so they don’t look at the Personal Summary page for the employee.We tested the CSS provided in this post but found it removed status labels from other areas of the platform where we need the labels. We tried using the Localization Tool to adjust the wording. This wasn’t a good fit because we would need to use too many words to describe things to our managers. We tried simply entering a space for both Looks Good and Take a Look. This adds a small colored square in the upper right corner which would create a whole new level of confusion for managers.Is there CSS that would specifically target these two labels and not others (or exclude other labels)? We are brand new to CSS and thi

Hi all,Wanted to share an update we just made to help enhance the learner experience! CSS for "No Upcoming Events" Purpose: Adds instructional text under the “No Upcoming Events” widget on live course pages. Why: Learners often think no sessions are available if they have missed the events they were meant to attend, as the widget only shows events for their current session they have already missed. This clarifies that they can use the ellipsis (⁝) menu to switch sessions or unenroll. What it does: Does not alter the view prior to missing the events Keeps the default image and message Adds guidance to help learners take action as the ellipsis is often missed by employees  Suggests submitting a Freshservice ticket for further support Before:After:  Code:/* Add helpful follow-up message under default "No upcoming events" content */lrn-widget-course-upcoming-events dcb-ui-accordion-panel[name="upcoming-events"] dcb-ui-blank-slate::after { content: "Need to switch to

Warning - Long geeky post ahead!!Lots of questions have come up surrounding accordions.I’ve toyed around with these and shared a relatively simple example in my animation series.I have since put together an FAQ accordion that I believe looks and functions well - at least in my environment. I have taken the CSS and heavily commented it for your ease of application to your own environments should you wish to make use of it. I’ve also added a short gif and some pictures so you can sort of see it in action.The code provided is for exactly what you see in this post.You’ll want to adjust as desired and test as usual for your environments.Here is a picture in full, 2/3, and 1/3 size widgets. Here is the CSS for your Branding and Look section/** Sticky Accordion **//** Removes the little icon and positions your title for the box **/#accord ul { list-style: none; padding: 0px; margin: 0px;}/** Set background color as desired for the overall box and popout border **//** Set box-shadow as desi

Hey Everyone!We are newer to Docebo and have started to play around with CSS in the course player. Is there a way to remove the play header and content label?  We are using Articulate for content creation, so when all is said and done we have 3 headers on the course page for the same content.  Any ideas are appreciated!!  

Hi,Looking to hide the Score on the My Activities page under courses, ILT  and external training.Does anyone know how to do this so its the how column and not just the title. 

Hi everyone,I'm trying to apply CSS to an "HTML Page" training material item in a course, but it's not working as expected. When I test my HTML and CSS in CodePen, everything works fine. In Docebo, I add a new "HTML Page" training material and paste my HTML code. Then, I go to Custom Styles and paste my CSS code. After saving and refreshing the course page, the CSS is not applied. I've used this method before, and it usually works without issues. Could this be related to how Docebo handles CSS for course players versus page widgets? Do I need to specify anything in the code to ensure it applies correctly?Any insights or troubleshooting suggestions would be greatly appreciated!Thanks in advance!

Hello CSS peeps!I want a letter/portrait orientation channel PDF or Document to display at full height of the image instead of the top portion with a scroll bar while keeping the image at full width of the window. (without clicking full page view)I tried .slides-player__wrap {height: 100%;} and that sort of does it but overlaps the div/tile below it instead of pushing page content down.Anyone know CSS for doing this? 

Following the recent upgrade to the Docebo webkit, we have noticed that there were a few changes to the core styling that impacted our specific styling. Accordingly, we have taken measures to address the changes with our own styling. I wanted to start this thread with the goal of sharing knowledge across the community and benefit from input from more experienced stylers. For instance, the new green button color is now appearing instead of our yellow branding color. Formerly, the branding color on the buttons was being controlled by the Configure Branding and Look >> Customize Colors >> Confirmation Messages. It appears that the new green styling is just Docebo default styling which make sense because I don’t associate Confirmation Messages with buttons inside the course (or the search bar icon either).In the previous webkit, we were using CSS to make this text color black to improve its accessibility against the yellow background. Here is the code that we use to target the

I was able to figure out how to remove the Progress and Details sidebar from a specific Learning Plan landing page, as the stakeholder thought it was “too busy” and wanted it removed. Here is an example of what the sidebar looks like (right side of image). Here is what it looks like removed. Here is the CSS code to remove it (the identifier for this LP is 87 found in the URL - [your domain name].docebosaas.com/learn/learning-plans/87). /** Hides Progress, Keep Learning From, and Learning Plan details on Street Playbook LP page **/.lrn-learning-plan-overview-87 .ui-col-24.ui-col-md-8.lrn-content-overview-sidebar {   display: none; } 

Hi everyone, i’m still new in exploring the custom CSS in this platform and would like to ask some input. Does anyone here have experience modifying the Login/Sign-In Page? I am trying to do something like this : However i can only do this : This is because, i figured that we cannot exactly add or remove existing element and can only modify it instead, hence i am not sure how to move the picture to the left but still attach it to the login box. Currently, i am using the .login-form-title:before and after to add the new item, is there a way to actually move it and not attach it with any of the existing element?  

If you happen to have a long registration form (due to all optional fields being visible), here’s some CSS to add a scrollbar to the window:div#doc-layout.doc-layout.doc-layout-external-ecommerce .ui-dialog-content.ui-dialog-size-lg.is-visible {    display: inline-block;    height: 90%;    overflow-y: auto;    overflow-x: hidden;} As a more user-friendly solution, I’ve opened an idea to suppress optional user fields from the registration window altogether (but still make them available for users to fill out later).  Please upvote:   

Hello!Has anyone found a way to modify a single sign in page? I know the text(content) can be modified via the localization tool but that setting is global across all clients / sign in forms in extended enterprise. I want to be able to have text on one extended enterprise client be different than the text on another.  Cohesitysandbox.docebosaas.com/veritaspartnersdifferent text than this page: Cohesitysandbox.docebosaas.com/veritascustomers

Hi there!I would like to remove the time uploaded on the assets. I realized that I can use this CSS code to remove it from a specific page:#doc-page-XX .ui-typography-subtitle.ui-color-typography-secondary {visibility: hidden; }However, is there any way to delete it from all pages? I tried to remove `#doc-page-XX` from the CSS code, but this also affected the course in the learning plan.Thank you very much!Best regards,Pawaruth

Hi,Does anyone has the CSS code to hide enrollment Priority: Recommended. We find the options Mandatory vs Recommended to be similar and would like to streamline the option when admin does the enrollment. To avoid mistake, we would like to hide one of them. Thanks!

The goal is to update the nav bar with our company products in one place (CSS) and have it display on multiple pages when called by html on the page. That way if a new product is added to the custom nav bar, we only have to update in one place and not multiple pages

Is it possible to use javascript to create relative links based on attributes? For example, I build a page with a content box that only allows one link. But I want that link to go to 4 separate pages depending on the branch of the user. This would allow me to have ONE page that can dynamically link to 4 different business units depending on which branch they sit in….currently, I have to have 4 version of the exact same page with only that one link different on them all. Any ideas? 

I need to set a Maximum height for a custom content box that is LESS than the default. This is not a configuration option in the widget itself. Does anyone have the CSS or other solution?