HTML & CSS

HelloCan I ask if anyone can supply the CSS code in order to change the colour of the new priority status on the course and learning plan cards?  (Mandatory, Required, Recommended etc)?Thank you in advance for your help.Lisa

I am looking for some assistance please. I am trying to hide the Content Partner block that is displayed in a course. And I can not figure out the CSS to hide. Can anyone provide guidance, please? 

The attributes can be helpful, many threads point out some shortcomings which are helpful.  I don’t see anything related to CSS formatting of the attributes on the content card.  Regardless of the attribute its just small grey font.  It doesn’t stick out.  It would be nice to color code/format the attributes so they stand out and don’t get overlooked.  Any CSS pro’s out there know if this is possible?

There are a few chats and ideas about making uploaded documents work differently, which I 100% agree should happen, but for those folks who have been able to have a seperate upload space and then use iframes to bring the document or link out to them, I wanted to writeup how I use PDF.JS to achieve this and not require programming knowledge.Why bother with this over a simple link or iframe direct the document?The main benefit is control. If you link out, this moves the user from where they were which can be confusing. If you just iframe the document in directly, it may work for you, but you are leaving the PDF display to the user’s browser and device. This leads to a varied experience for folks depending on browser and device, aka a support nightmare.Disclaimers up front:This is entirely based on your have access to some sort of external server (AWS S

Hi Docebo Community, The team here at Southwestern Consulting would like to make some customizations to the My Profile widget, and I spent time searching the boards and did not see any answers or this question asked previously. Any pro tips are greatly appreciated from your friend in Nashville 😁 Use case:On the My Profile widget, we would like to show more than one line of text for some of the User Additional Fields that are displayed on the widget. For example, we have a field “My Coaching Goals” where a client’s various goals would be listed. this is a Text Area field (up to 65,000 characters) for example, my goals are listed in this field as : “Run a 26 mile marathon, grow my team, be a leader” BUT - on the widget currently, the widget displays just “Run a 26 mile maratho...” A few other fields we would like to display additional rows of text

Hey all,Pretty fresh to learning HTML/ CSS. I am trying to build an image carousel that moves/ allows the user to see some different news and banners from their main page.I am getting stuck with all of the codes I’ve attempted and just don’t know what I am doing wrong and could use some guidance. Has anyone shared this experience? I would love to know what solutions you came up with.

HelloWould anyone be happy to share some CSS that would remove the bottom section informing users to go to External Certificates?  All our courses are linked via Certifications and not external certificates and will like to eliminate this option.  Cheers :) 

Hello everyone, I’m new in Docebo and I’m trying to customize a bit the training materials of my courses. I would love to customize for example HTML pages but I’m facing with lots of issues.First of all I want to change the font with a custom one. Reading in the community i’ve configured the custom style in the branding  and look & feel, adding the right code for the font that I want to implement.But it’s not clear to me how I can add that font in a training material- html page now.It seems it doesn’t work.Can somebody help me with this? I’m not an expert in html, but i’ll do my best :)  thank you Giulia

Please delete or disregard this post: we found the answer here:  this works: #content > div.myactivities-sidebar > div > div.main > div > div > div.user-report-summary > div > div.user-report-info.span6 > div.user-report-info-data > div:nth-child(5) {display: none;} ###Hi Everyone, My colleague and I  are trying to hide the “Groups” and “Group Names” from appearing to our users on the My Activities page. We tried a few ideas with some CSS but couldn’t get it right. I tried the code below, but it did not work: /* on the My Activities page, hide the Group Names from the users */div.label:contains("Groups") + div.data {display: none;} Any help is appreciated!

We noticed that learners can retake a learning plan once this is finished. There are also individual buttons for each courses. Although we are looking for such a function on the system, we fear that our users might get confused. If I understand it correctly, the button will reset the learning objects, but not the course nor the learning plan. They remain as “completed”, but the course progress is set at 0%. This has already caused confusion in the past when users restarted a course with a newer version. 🙃Is there a way to hide the retake button without impacting the start button of the course? Or is there a setting where we can let users access the courses without resetting their progress on learning objects? 🤔Any suggestions are welcomed! 😀

Hello Docebians!Hello! I’m looking for CSS support in eliminating the Course details from the ILT courses and Learning Plans Details  Thank you in advance!@lrnlab   

Hi there! For those who have activated the latest docebo features, has anyone successfully removed the gradient from the header image using CSS? This is the course overview page one lands on when they click on an unenrolled course from the course catalog. I know Docebo University has coded the gradient out for their own purposes but am having hard time figuring out the CSS in this particular instance where a page ID isn’t evident. Note: i have not activated the new features yet, and am not sure if that impacts what I’m looking at in the code. Thank you all! 

With the new player I was having a difficult time hiding the “lesson completed successfully” banner that pops up when you enter an HTML training material.  It’s not there for very long, but I think I figured it out.If you don’t like messing with CSS, you can go into the Localization tool, search for “Lesson completed successfully”, and remove the verbiage there by substituting a space for the existing text in red below:standard The lesson has been completed successfully Lesson completed successfully  If you can/want to change the CSS, this code did the trick for me:/* hide the player/toast banner */.dcb-ui-toasts-container-botton-center {    visibility: hidden !important;    display: none !important;} 

I would like to hide the Email icon in Gamification, Rewards tab as we didn’t want the email to be sent to all superadmins. Do anyone know the CSS code to hide it?

See the image, we have a notification set up and we want to disable this pop-up. Is that possible? If so how?

Hello Docebo Community,I have a question about controlling visibility within HTML page widgets:I need to display two different videos on the same page and restrict access to each video based on user groups. Specifically:Video A should be visible only to Group 1 Video B should be visible only to Group 2I understand that Docebo doesn't support JavaScript in HTML widgets. However, I'm looking for a solution to control visibility of different content within the same widget.Is there a way to achieve this? Perhaps through:HTML/CSS tricks Alternative widget types Widget configuration options I might have missed Other creative solutionsAny suggestions would be greatly appreciated!Thank you in advance for your help! 

Hi all,Just wondering if anyone knows the CSS code required to change the font size of closed captions in the video player. I contacted support and they told me the only way to change the size is with CSS. Also, does anyone know if it’s possible to have a dynamic font size that adjusts to the size of the screen? The closed captions look really small when viewed in full screen mode.Thanks,Daniel 

See image, can you personalize this? 

 Hello, I'm contacting you about an HTML/CSS question.I would like to change the colour of the ‘Completed’ label to green. Unfortunately, when I change the colour, the colour of the ‘In progress’ label also changes because the HTML/CSS code is the same. Could you improve this?Thank you in advance! 

Hello, I have a page that I would like to nest within another page; it basically provides the user with additional information on a learning program, so it makes sense for it to be nested within that main page, so that the breadcrumbs would reflect this hierarchy.Is there no option for that? Or can I somehow manipulate the breadcrumbs to achieve the desired effect? Thank you.

Hello Docebians!I need your support in eliminating the "gradient black "on Header Layout for ILT Course and Learning Plans HP The options allow you to set  Solid color...but... The header layout is not Solid color …it is gradient blackIs there a way to eliminate this “gradient black” with CSS code ?I appreciate you help!@DPatel @roberto.moscatelli Thanks 

I know it’s possible to change images in docebo because I was able to update the 403 image and the nothing here images…. but now I want to update the Report is downloading page…  I know this CSS works: /*Replace Kneeling Person with custom image */doc-widget-channels ui-illustration.ui-illustration,doc-widget-course-catalog ui-illustration.ui-illustration, doc-widget-my-courses-and-learning-plans ui-illustration.ui-illustration{background: url(IMAGE URL) no-repeat center;background-size: contain;}doc-widget-channels ui-illustration.ui-illustration svg,doc-widget-course-catalog ui-illustration.ui-illustration svg, doc-widget-my-courses-and-learning-plans ui-illustration.ui-illustration svg{visibility: hidden;} /*forbidden page */.internal-error-content .error_image {background: url(IMAGE URL

We are using Docebo Connect to automatically create calendar invites for Events. Given that the Event Description is what shows up in the Outlook Event, I have been using HTML to format how this looks to the invitee. However, this is now showing up in the Event Description on the LMS as well.  This is also the case in the Go Learn App.Does anyone know how to change this so that the text reads as it should?Thanks in advance.

We had a need to make the “Enroll” button disappear for Power Users.  We wanted to give customers the ability to manage their own user enrollments in the system, but not to be able to get free classes for the Power User (bypassing the shopping cart).  Here was the initial solution in CSS:/*hide course enroll button*/[aria-label="Enroll"] {display:none;} However, we also offer some free online tests to the public, and the solution above affected *all* enrollment buttons.  The solution to make the “enroll” button selectively disappear was based on CSS siblings:ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;}/*hide course enroll button under shopping cart*/ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;} This CSS allows you to essentia

Hi everyone,I would like to remove the enroll button from the new course page.The objective is to show an overview of the course, which is a 3-month program. This is because if participants enroll in a session, they will only see details specific to that session.However, this program requires them to attend several sessions throughout the program. There are two identical sessions to accommodate colleagues in different time zones. I would like to give them the option to choose their preferred time. Therefore, I will ask them to make their selection outside the platform. On this page, I just simply want to display the options. To avoid any confusion, I want to remove the enroll but