HTML & CSS

Should look like thisHelp! Help! Help!I have no idea what to do next… Nor does Docebo support….I’m building a page where there’s some HTML that will be used. The left part of the page will have a clickable 2x6 grid (URL links to be added later) like the above. The right side will have quick links (URLS to be added later), like the above. Once I paste the code into the editor and then view page preview, it looks PERFECT. (Image above). BUT. After Save, leave the preview and return (I can click back to the editor, or reload the page.. any change), everything changes to the image below, where the images to into a 1x6 column and the links loose all of their formatting…  I’ve attached the codes here too… Anyone have any ideas, tips, tricks? Thank you

Hi, Does anyone know how I can change the colour of the course status within the new course player? Mainly the ‘Completed’ bit I have attached a screenshot so you know what I am on about :)  Thanks!

I’m wanting to create a nice, clean UI for our LMS and, with some code (and from the help of others on here), can get an image of my choosing as a background or in the header bar already. To do this today, I am having to really fudge things in the system in order to get my images onto the Docebo CDN to be called by the code. The only way I can do this today, is to create image widgets on a hidden page and sniff out the stored file location once uploaded  - not elegant at all. For the life of me, I cannot seem to find an asset repository where I can upload and store a few images for use in my HTML and CSS code around the platform.Any idea folks?All help much appreciated. 

Hello! I thought I’d share a quick HTML/CSS snippet for anyone that wants to include their company social media links on their pages to look something like this:  Here’s the HTML that you would need to paste into a 1/3 column width page widget:<div style="padding:19px 10px;"> <div class="social-row"> <!-- Instagram --> <a href="https://www.instagram.com/" target="_blank" class="socials" style="background:#125688;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-instagram"></i></a> <!-- Facebook --> <a href="https://www.facebook.com/" target="_blank" class="socials" style="background:#3B5998;color:#FFFFFF;padding:15px 24px;" rel="noreferrer noopener"><i class="zmdi z

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