Skip to main content

HTML & CSS

With Custom CSS and access to HTML widgets and pages, there's no limit to what you can accomplish in Docebo Learn. Share how you've customized Docebo to your liking with custom HTML & CSS.

  • 441 Posts
  • 2,348 Replies
441 Posts
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
Using PDF.JS To Display PDF's, control the interface, and retain links functionality

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 S3, Azure Blob, Local Server etc will all work) for you to load documents onto. It needs to be able to run scripts (but you don’t need to k

2752
P
Novice III
23 days ago
B
Contributor III
Ben BaumanContributor III
asked in HTML & CSS
My Profile widget - User Additional Fields and displaying more than 1 line of text

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 include: Action Items My Coach’s Contact Info My Initial Win See the screenshot below (or attached PNG) for example of what we are

935
B
Contributor III
23 days ago
RyanNeal
Contributor I
RyanNealContributor I
asked in HTML & CSS
Image Carousel/ Banner

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.

862
lrnlab
Hero III
25 days ago
S
Influencer III
Suzy_qInfluencer III
asked in HTML & CSS
CSS to remove External Certificates

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 :) 

233
S
Influencer III
26 days ago
G
Novice III
giulia bombardieriNovice III
posted in HTML & CSS
Adding a Custom Font in a Training material --- HTML page

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

6811
G
Novice III
29 days ago
B
Contributor III
Ben BaumanContributor III
asked in HTML & CSS
CSS to hide "Group Names" on the My Activities page?

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!    

161
J
Novice III
1 month ago
S
Helper II
Sébastien ArbourHelper II
asked in HTML & CSS
New Course Player - Retake learning plan

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

411
S
Helper II
1 month ago
Isram
Influencer III
IsramInfluencer III
asked in HTML & CSS
CSS support in eliminating the Course details from the ILT courses 

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   

18011
Courtney.harvey
Influencer II
1 month ago
V
Novice II
vin.porterNovice II
asked in HTML & CSS
Hiding Outdated option

Is there any way to hide the option on the course mini-menus to “Mark as Outdated”? Client either wants a text entry for the user to enter (already upvoted that idea) or for it to go away.

62926
lrnlab
Hero III
1 month ago
ktbadham
Helper I
ktbadhamHelper I
asked in HTML & CSS
Remove Add to Calendar on ILT session page

The add to calendar button doesn’t work for us. I was hiding it in the old player with this CSS:#doc-layout-action-buttons [aria-label="Calendar"] {display:none;} But I can’t seem to figure out how to do the same thing on the new course player. Does anyone know the class/ID that controls this, and what the aria labels are for the new menu? I want to hide the calendar as well as mark as outdated. Thank you in advance for your help!

24915
S
Influencer II
1 month ago
G
Novice II
GPSlifeNovice II
asked in HTML & CSS
Hide "Tutorials" Button and Filters in Insights

Hello,I am currently building a dashboard for my powerusers. On one hand, I don’t need the filters, which are only available in English (and not in the localization tool). Is it possible to completely hide the automatic display of filters or disable filters entirely?Additionally, the "Tutorials" button in the header is also bothering me. I would like to hide it as well. I tried hiding the entire row (which would also be a good solution), but I couldn’t manage to do it with CSS. Does anyone have a solution for this?BR Robert

81
G
Novice II
1 month ago
B
Novice I
BCunha1Novice I
asked in HTML & CSS
CSS Question: Removing Gradient from Course Overview Header

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! 

3358
B
Influencer II
1 month ago
elamast
Hero I
elamastHero I
posted in HTML & CSS
"Lesson completed successfully" toast/banner for HTML training materials (new player)

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;} 

352
elamast
Hero I
1 month ago
M
Novice I
marina.limNovice I
asked in HTML & CSS
Hide email icon in Gamification Rewards tab with CSS

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?

132
M
Novice I
1 month ago
A
Novice I
asiodlarzNovice I
asked in HTML & CSS
How Can I Remove this Pop-Up

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

352
francesca.vaccarino
Novice II
1 month ago
B
Novice I
BaRonaNovice I
asked in HTML & CSS
Controlling Video Access Within a Single HTML Widget in Docebo

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! 

301
francesca.vaccarino
Novice II
1 month ago
Daniel
Hero III
DanielHero III
asked in HTML & CSS
CSS to change closed caption size

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 

1574
L
Contributor III
1 month ago
A
Novice I
asiodlarzNovice I
asked in HTML & CSS
Can you edit this?

See image, can you personalize this? 

221
lrnlab
Hero III
1 month ago
G
gabsaporitoNewcomer
asked in HTML & CSS
CSS/HTML question

 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! 

371
jmkachidurian
Helper II
1 month ago
E
Novice I
evaceNovice I
asked in HTML & CSS
Nested pages

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.

584
dklinger
Hero III
1 month ago
Isram
Influencer III
IsramInfluencer III
asked in HTML & CSS
CSS support in eliminating the "gradient black "on Header Layout for ILT and Learning Plans

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 

1303
R
Influencer II
1 month ago
sfrost
Helper II
sfrostHelper II
asked in HTML & CSS
I want to change the report is downloading image to be more on brand.

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) no-repeat;height: 300px;background-size: contain;max-width: 200px;background-position: top;margin: 0 auto;} /*Update Report is Downloading Image*/doc-layout-page-content her-download-report-file ui

767
sfrost
Helper II
2 months ago
admin_mhshomes
Contributor III
admin_mhshomesContributor III
asked in HTML & CSS
HTML showing up in event description

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.

332
M
Docebian
2 months ago
elamast
Hero I
elamastHero I
posted in HTML & CSS
Hide "Enroll" button for Power Users on ecommerce courses via CSS

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 essentially make the “display:none” conditional upon the appearance of the “add to cart” button being above the “enroll” button.  I hope this helps someone else!

1998
elamast
Hero I
2 months ago
P
Novice I
pawaruthsNovice I
asked in HTML & CSS
Remove enroll button on a course page

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 buttons.I found a similar case that was created a year ago:But there was no solution provided. However, it was mentioned that CSS could be helpful.Thank you in advance for your support.

1349
G
Novice I
2 months ago

Badge winners

  • Product Q&A Influencer
    Cindy Moorehas earned the badge Product Q&A Influencer
  • Let's Talk Shop Genius
    gstagerhas earned the badge Let's Talk Shop Genius
  • Product Q&A Genius
    JKolodnerhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    kjandersonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings