HTML & CSS

We are not using points in gamification, is there a way to hide the “My Points” reference? 

Good day Community!I was curious to know if anyone had come up with code that could hide the point value that appears on badge ribbons. There's some concern in my organization that even if we set the point value to 0 for each badge we create (as we're going for a less competitive approach to badging), users will find it odd to see a line of 0s across their awarded badges. Any insight would be appreciated. Thank you!

When looking at the course cards at the course catalog, I’d like to add a border around the image/thumbnail on the course cards. Another important aspect, is that the colour of the border depends on of it is an ILT class or e-learning. Lets say the border around E-learning cards are red and the ILT ones blue. (As shown from a figma sketch(image underneath this text))I got a code snippet from employees at Docebo, but it didn’t work or change anything. Here’s the code snippet I got: /* Specific border color for E-learning courses (Course codes starting with "EL") *//* Note: Docebo uses dcb-ui-card or ui-card, check your specific platform structure */ [dcb-course-code^="EL"] .ui-card-wrapper, [course-code^="EL"] .ui-card-wrapper {border-color: #FF0000 !important; /* Red border for E-learning */} /* Specific border color for ILT courses (Course codes starting with "ILT") */[dcb-course-code^="ILT"] .ui-card-wrapper, [course-code^="ILT"] .ui-card-wrapper {border-color: #0000FF !important; /*

Hi,we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..I tried to do this with CSS but then I have an empty spot on the list I used the following CSS Code:#doc-page-97 .ui-card-status-done {display: none !important;}We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).Does anybody have an idea how we can hide completed courses from the channel widget?

Hello Everyone! I am attempting to hide this header on all pages.   When I tried the codes below in our STAGE environment, they all worked. When I add them to PROD, they did not work. ----------------------------doc-layout-internal-header {    visibility: hidden;}----------------------------doc-layout-internal-header {    display: none !important;}-----------------------------#doc-page-24 #doc-layout-title-bar { display: none; }----------------------------- Any ideas here? Anything is helpful. :) 

Hello,When a manager goes to enroll their team member into a course (my team → ellipsis Enroll in course), the title of the course appears as white on a white background. You can only see it if you select it or highlight over it... I do not see white font in our Configure Branding & Look section (Colors setting) or CSS settings (only thing for CSS is our homepage setup, widget for page etc.). I know the My Team page is a built-in page… Any ideas on how I can get the words to appear in a darker color without impacting how the homepage looks?   

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? 

Hi there. Does anyone know of a way (CSS or otherwise), to remove the “(required)”, as highlighted in the below image, from every mandatory question in an observation checklist on the Go.Learn App? The fact that it says (required) next to the title and the repeat it again below (in the actual response area) is confusing people. They think they should be able to type in the title area. I’ve tried using the localization tool with no luck. Thanks in advance! 

We use the image widget on some of our pages because the entire image can be a link. We know the image widget doesn’t meet accessiblity standards. We have found this the best option based on what we are trying to accomplish.An October update allows alterative text to be added to image widgets. We want to add this for accessibility purposes. Unfortunately, a tooltip displays on the page when alt text is added to the image widget. We don’t want the tooltip to display. We don’t know CSS and were given something to try..pages-widget-page .single-widget img[alt]:hover { pointer-events: none;}This doesn’t work as it also prevents people from being able to click on the image, which is a link. Does anyone know of CSS that would prevent the alt text tooltip from displaying for image widgets AND allow the image to be clicked?

Hello! I have some experience in HTML/CSS, but not a lot in how to make it work with Docebo’s UI tools for creating custom widgets. I was curious how the rest of you are formatting and placing your CSS, the best way to incorporate images, and any other recommendations you have! For example, are you placing the CSS for your HTML widgets in the advanced settings for advanced look at feel, inserting a <style> <head> element for the HTML of your widget, or placing them in line with your HTML? For images, what is the best way to place them, and how have you gone about making sure they are visible. In addition, if anyone has a list of supported/unsupported HTML tags in Docebo, I would greatly appreciate it!

Hello,I am curious.  Does anyone know if there is a way to use HTML/CSS to hide courses that are ‘Under Maintenance’ from the learner’s dashboard?  We have courses that we have retired from our catalog, but unfortunately, if a learner was enrolled, they still appear on the learner’s screen with a lock symbol and ‘Under Maintenance.’  We have considered using enrollment archiving but there are some limitations there as well…Thanks for any tips or advice!

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!

Does anyone how to hide these objects using CSS: ​​​​ I'm using the following code:  /** Remove Checklists from My Team Page */dcb-ui-tabs-horizontal-header-item[data-dcb-ui-aria-label="Checklists "] {    display: none;}/** Remove Team Members from My Team Page */dcb-ui-tabs-horizontal-header-item[data-dcb-ui-aria-label="Team Members "] {    display: none;}/* Hide 'Users - Learning Paths from Reports in My Team Page */.hyd-table-row:nth-child(2){    display: none !important;}/* Hide 'Users - Certifications from Reports in My Team Page */.hyd-table-row:nth-child(3){    display: none !important;} /* Hide 'Users - Sessions from Reports in My Team Page */.hyd-table-row:nth-child(4){    display: none !important;}  But for some reason, it hides upcoming sessions on courses as well.  Any advice? 😥Thank you in advance 

Is there a way to change to change the background colours of the Previous Lesson Next Lesson buttons? In dark mode, I want to make them more noticeable.  

Does anyone have a comprehensive list of all of the illustrations? I’ve found some CSS to re-skin a few (thanks to everyone who has contributed those!), but am struggling to locate all of them. Person on BikeDancing person Kneeling Person Which ones am I missing?

I am having trouble getting a gif to sit on my homepage, created in canva, need to just display no play buttons etc. Can someone please assist?

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

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.

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.  

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.