HTML & CSS

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 wi

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!

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-illustratio

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 **/

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 s

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

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.

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.

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-l

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

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?

I would like to add the Users first name or full name to the Main Hompage, using CSS, before the first widget on the page. For Example:Welcome Test User. Any suggestions on the CSS to use would be very helpful. Thank you. 

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.