HTML & CSS

The new update to the Observation Checklists made it so that there is a new option for the manager to upload a file on every question of every Observation Checklist (see image). This is confusing to our managers because we don’t require this, and it’s making the checklists very long. I asked Docebo support and they have no way of turning it off. Is anyone aware of something we can input via CSS to remove this? Thank you in advance.  

Hi, I’m hoping someone is able to point me in the right direction for this. I’ve noticed a couple of similar related posts but not quite. (Happy to be corrected, as I know there will be better ‘searchers’ out there!!)We’re currently building our solution and it would be great to be able to add the short description to the course cards (so in the white space underneath ‘Test Course - LS’). Is there a way to do this via CSS? I did have a look at the properties of the short description when you click through, but got stuck. I have a feeling it’s going to be one of those “We want this, but it’s in a Development backlog”, but fingers crossed!!  

Hello - We have our training material setup in a way that users do not need to complete each one for the course to mark complete (various language options).However, a progress bar and X/X lessons completed appears in the course player, that we thought would be confusing to the end user.  We used the following CSS to hide both of these elements. Please feel free to use the code as well. /* Remove Course Player Lessons Progress Bar */.progress-bar.bg-grey { display: none! important;}/* Hide X Lessons Completed on Course Player */.subtitle-block {    display: none! important;} 

The image slider is popular and to help ease confusion with creating sliders that have a different number of images - I am separating the options each into their own posting. This is a slider for two images. The HTML<!-- HTML CODE FOR A SLIDER WITH TWO DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption>

The image slider is popular and to help ease confusion with creating sliders that have a different number of images - I am separating the options each into their own posting. This is a slider for five images. The HTML<!-- HTML CODE FOR A SLIDER WITH FIVE DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption>

 Due to the popularity of the slider, the many configurations, and the growing original thread, I am creating separate postings for sliders with two, three, four, and five images. Here is the four-image slider. The HTML<!-- HTML CODE FOR A SLIDER WITH FOUR DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption&g

Due to the popularity of the slider, the many configurations, and the growing original thread, I am creating separate postings for sliders with two, three, four, and five images. Here is the three-image slider. The HTML<!-- HTML CODE FOR A SLIDER WITH THREE DIFFERENT IMAGES --><!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT --><!-- CONTAINER DIV --><div id="bannerSlider"><!-- SLIDER ENVELOPE--> <figure class="slider"><!-- IMAGE NUMBER ONE --> <figure> <img src="https://path/to/your/image1.jpg" /> <figcaption>Image 1 Caption</figcaption> </figure><!-- IMAGE NUMBER TWO --><!-- EXAMPLE WITH A CLICKABLE LINK --><!-- LINK WILL OPEN IN NEW TAB --> <figure> <a href="https://www.google.com" target="_blank"> <img src="https://path/to/your/image2.jpg" /> <figcaption>Image 2 Caption</figcaption&

We desperately need to hide the training labels that are in the syllabus of the new course player. They have no meaning to our learners and the visual clutter is overwhelming. It also dissuades us from being able to use the short description for training materials that would add value to our learners. I have combed through every mildly related community post and tried every CSS suggestion from the past few years in our sandbox. None have worked to hide training label. I reached out to Docebo Support and they said they do not advise on CSS.Is there a CSS genius out there who can assist with this dilemma?    P.S. I know they can be changed via localization but our goal is to hide them entirely. That being said, if you changed yours, what did you change them to? Open to suggestions. . 

Hi there, Hoping someone can help. I have created an FAQ Page using the accordion method detailed in this amazing post The Search for a better Accordion.What I would now like to do on a separate Support Page is create a separate accordion effect that incorporates multiple accordions within a larger accordion (a parent accordion with multiple children accordion), if that makes sense.I've used the Docebo add-in in ChatGPT but it's not generated the results I’m looking for.Below is what I have copied over form the FAQ Page I created, but I now want to make the "Local Support - Malaysia, Below are the list of SMEs..." part of the box a parent accordion so that the list of blue boxes expands out when the user clicks on the parent. That way my page won't be covered in loads of blue boxes and the users can click on the country and department they need the contacts of.Can anyone help, hopefully this makes sense!Thank you,Kal

I work for a casino and we have built our own web app that simulates poker hands. We want to iFrame it into our Docebo platform. I was wondering if there is a way to pass the credentials of the signed in Docebo user directly to the iFrame so they don’t have to sign in again once they select the iFrame page? I tried looking through the documentation but I haven’t found anything yet.

#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-user-menu-button.ng-star-inserted > ui-button-icon::after{ content: "MENU"; color:#888; font-size: 0.92em; text-align: center; font-weight: 600; top: -6;}#ui-button-icon-3 { bottom: -8;}/* add text "menu" to hamburger menu */Having minor spacing issues - pretty sure my text-align does nothing

We are soc2 audited and are failing to meet requirements of having a completed by or due date for courses and learning plans.  The soft deadline does not work as you can only select a date, selecting a timeframe such as 60days would be more beneficial, some of our courses are assigned by start date or when a person moves to a new role so the soft date has expired before they are even enrolled into the course. I have worked with a few LMS systems and this is the first system that does not have a completed by date. 

Hi friends!I’ve been trying to do this for 2 days now to no avail haha I come from a retail business and there are ‘compliance’ courses that team members must complete. We have them catagorised in catalogs. We are currently redesigning the team member home page, and using the task list to show courses ‘not started’ and ‘in progress’ but I want to be able to distinguish the courses with a badge (new to the language) that says ‘compliance’. Is something like this achievable? I was able to get the wording on every card, but not able to target specific cards via catalog. Hoping the community can help! Thank you!

Has any company partnered with a 3rd party vendor for HTML/CSS?  We would like to get some quotes regarding a redesign through the use of HTML.  

Like a few others here, I’ve been concerned about the ability of users to invite an entire channel’s user base to view an asset, but seem to have found a CSS fix.ProblemI’ve altered our language pack to remove any reference to inviting a channel, but the search box still returns channel results, e.g. if searching for someone called ‘Sofia’, typing ‘sof’ will autocomplete to our global ‘Soft Skills’ channels with thousands of users…BEFORE Solution /* AM - Prevent invitations to all channel users */.inviting-search-multiselect .text-basic-size:has(.additional-info){display: none!important;}.inviting-search-multiselect being the search bar on the Invite pop-out .text-basic-size being the individual search results :has specifying only search results which also include the number of channel users (.additional-info)This results in users still being selectable, but channels not! AFTER 

Good day everyone!I’m looking for the css code to change the sign-in window to have rounded corners.Thank you for your attention.Caesar

Hi, I watched a Docebo webinar where someone had used the HTML widget to translate the English content into multiple languages, once the user selected their language embedded into the widget. Can anyone help me in terms of how to do this? I currently have 14 dashboards in different languages it would be great to find a simple solution where I I can have one dashboard that translates the content into  a users selected  language. 

Hello, has anyone else used an HTML developer for Docebo other than GuyKat?  Any other recommendations from anyone?  Trying to get a flavor for the possibilities.  Thank you. 

We would like to update the “Whoops” text when there is no longer training assigned to a learner. However, when I go to the Localization tool to change the language, I see 3 options: Flow, Mobile, and Standard.  I’m assuming I know what Mobile and Standard are, but what is Flow? What will be impacted when I change that language? Thank you!

I am looking for CSS to Hide the Internal Header Logo, which is to the right of the hamburger menu. Any suggestions would be much appreciated. Thank you. Sheralynn

If you’re only using one single language to train your users, you may want to hide the redundant language code you see on course cards (see below):   Just insert this code on your Custom CSS to hide the language code:/* ************ *//* Language tag *//* ************ *//* Removes 'Language' from widget tiles and catalog tiles */.ui-card-language,.ui-card-separator,[data-cy="formal-content-language-code"],[data-cy="formal-content-language-code-accessible"],.ui-list-item-language,.ui-list-item-separator,.course-catalog-content .ui-card-language,.course-catalog-content .ui-card-separator,.course-catalog-content [data-cy="formal-content-language-code"],.course-catalog-content [data-cy="formal-content-language-code-accessible"] { display: none !important;}/* Add a " | " + a space after the # of courses on the Learning Plans tiles */.ui-card-count.ui-typography-subtitle.ui-color-typography-secondary.ng-star-inserted::after,.course-catalog-content .ui-card-count.ui-typography-subtitle.ui-co

Hi Everyone, So we’ve enabled users to choose their own timezone (just so we can import timezones into the user profile using HR Management) - but they would still have the option to change this in ‘My Profile’ under ‘Preferences’. So I’ve used CSS to remove the ‘Preferences’ tab - however, there is an annoying pop-up that asks if I want to change my timezone (i.e. if I, in South Africa login as a user in USA - where USA timezone is set on their profile, the pop-up will say: we’ve noticed you’re in GMT+2 timezone, do you want to update) Does anyone know how I can remove this pop-up?  

Hello,I did not find an answer - does anyone know how to change the textfield colors of the course status displayed in the My Activity page via CSS?I managed to modify them at most of the other places, but am failing here.Thanks  

It is possible to have CSS or HTML use colors from the “Configure Branding” menus?  We have a number of Extended Enterprise sites and have started to experiment with some custom buttons in CSS/HTML that I found here in the community.  The issue is that these all have button colors in the CSS, and while I could change change that for every site, I was hoping there was a way to just have it pick up the existing color scheme.

My client has items in the platform they are not launching with or will not be using.  They would like to hide those items on the Users Personal Summary/Transcript.  Those Items would be Badges, Social, Q&A, Share and Asset Rank.  Has anyone done this or something similar before using CSS to hide these items.  Any suggestions would be much appreciated.  Thank you.