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.

  • 487 Posts
  • 2,490 Replies
489 Posts
lrnlab
Hero III
lrnlabHero III
asked in HTML & CSS
Hiding Contextual Help icon

Does anyone have CSS code to hide this icon? We are trying to strip down one of sites to have minimal options in the top bar...Was able to find a way to hide global search but would appreciate if anyone has this code is they can share. Thank you. 

50917
Adam Ballhaussen
Guide III
R
Influencer II
randallsimInfluencer II
asked in HTML & CSS
Custom breadcrumb bar using CSS

Hi, I’m looking for help with CSS.I would like to put a link to our main catalog on the right side of the breadcrumb bar. Simply the word catalog and when you click the word it takes you to the catalog page.Anyone know the CSS to make this happen?

2392
B
Helper I
SMorse
Novice I
SMorseNovice I
posted in HTML & CSS
Help Creating a HTML/WYSIWYG Widget with Image Map

This is my first time trying to use the HTML Widget. Thank you for any help you can provide. I am trying to add an image that has 3 clickable areas. I have the Image map code and the image. I have tried to insert the code into the HTML field and upload the Image in the WYSIWYG field of the widget. This produces the image as expected, but no links.@Bfarkas Could you possible help me figure out what am I doing wrong?

3345
SMorse
Novice I
lrnlab
Hero III
lrnlabHero III
posted in HTML & CSS
Hide Gamification Icon using CSS

Here’s a quick way to hide the gamification icon at the top level or by sib-domain:.internal-header-gamification {    visibility: hidden;    width: 0.1;    padding: 0;}

36010
luca.rossi
Novice III
zoe.johannsen
Novice I
zoe.johannsenNovice I
asked in HTML & CSS
Course stream covering bottom footer made by CSS

Once I get into a few of our catalogs and scroll, the course tiles cover the “footer” (not sure what the technical language is for this) where we have our company values listed. I think somethings wrong with the CSS for the footer, but I’m not sure. I did not write the CSS for our LMS and the person who did is no longer with our company. Hopefully the image provides some clarity, too. Any guidance from you coding geniuses?  

180
zoe.johannsen
Novice I
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
Thought Process and Common Tools for Platform Modifications

I was consulting for a company the other day, and we got into an interesting conversation on evaluating how to do platform customizations, and then reading some recent posts of common topics that come up, thought it might be useful to try and write the outcomes down.For the sake of this discussion, focused on CSS/HTML changes, not programmatic or API based, which leads to the first point.Is it possible? There tends to be a lot of confusion on what is and is not editable by CSS modifications. CSS at its core is the style of a website, how it looks. It is generally not used for adding additional items (this is html or structure) or robust actions (historically this is javascript, which we generally cannot add to the platform safely.) Yes, modern CSS does allow for some common actions, and you can build quite complex ones within it, so this one is not a dealbreaker, but unlike in scripting, the structure still needs to exist on the page already in order to leverage these, so unless you ar

1541
Bfarkas
Hero III
rogergreenlee
Contributor II
rogergreenleeContributor II
asked in HTML & CSS
Stumped on a button issue and the word "assessment" disappearing

Hi all,When I create Docebo tests in courses and users are resuming the test, the “RESUME THE ASSESSMENT” button is cut off, if I use the translation tools I can change to “RESUME THE TEST” and then it will show up, but I want it to say “RESUME THE ASSESSMENT”, any ideas with CSS that can fix this?Thanks in advance! 

372
Bfarkas
Hero III
sfrost
Helper II
sfrostHelper II
asked in HTML & CSS
Hide a completed learning plan

We have a page where we want our users to be able to see only the learning plan that they are currently on (status either not started or in progress). No other learning plans.  Is there a way to set this up?  I tried using a my courses and learning plan widget set to all courses and then tried this CSS which I modified from another one I saw elsewhere in this community… it didn’t work.   /** Hide completed items from learning plan widget **/#doc-page-25 ui-cards-grid:has(.ui-card-status-done) {display: none;} Then I tried creating channel that had the possible learning plans and to hide that way using the code I found on the page linked above. But that didn’t work either… /** Hide completed items from the channel **//** Oh - and remove the gap while at it **/ #doc-page-25 ui-carousel-item:has(.ui-card-status-done) {display: none;} Is there a way to make this happen?  

651
lrnlab
Hero III
S
Novice III
StephSchulteNovice III
asked in HTML & CSS
Hide Next Recommended Content

Hello Friends,I would like to hide “Next Recommended Content” on this screen below:Is it possible to hide this using CSS? And if so, would you be so kind to share the code? Many thanks-Steph

1123
hwolfehall
Helper I
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
Hide Shareable Links

Wow almost a little more than a year in to just catch on to this one…I first posted this:And completely missed that there is another shareable link to hide for the user experience.Um - anyone try hiding that puppy in the task widget?

330
dklinger
Hero III
C
Guide I
Chelsy KoshyGuide I
posted in HTML & CSS
HTML Widget and Code Issue

I'm trying to add a clickable card with an image and text below in a Docebo page. Tried it in editor and browser it worked fine. Here is the code://///////<style>.tcolumn {  float: left;  width: 18.68%;  margin-bottom: 16px;  padding: 0 8px;}@media screen and (max-width: 650px) {  .tcolumn {    width: 100%;    display: block;  }}.tcard {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);      border: 2px solid #1e5b67;}.tcontainer {  padding: 0 16px;  text-align: center;    background: #ffffff;    margin-top: -25px;}.tcontainer::after, .row::after {  content: "";  clear: both;  display: table;}</style><div class="row"><a style="display: inline-block;" href="https://picsum.photos/images"><div class="tcolumn"><div class="tcard"><img src="https://picsum.photos/id/1/222/148"/><div class="tcontainer"><div style="padding-top:30px;height:175px;font-family:Arial;"><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Conte

3297
C
Guide I
Bouben
Influencer II
BoubenInfluencer II
asked in HTML & CSS
CSS change course tag (not started, in progress, completed) in List mode

 Dear CSS gurusI was able to change my course/LP tiles tags colors looking in the various messages 💪🏼But I’m stuck on doing the same while displaying courses in List mode (instead of Cards). I’ve tried to go through with my console… no results 😭And I would simply match my colors: Not stated = light blue, In progress = Orange and Completed = Green.Can you help me ?Thanks a lot in advance

3044
Bfarkas
Hero III
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS
Does anyone enter branding colors with CSS and then use them on pages?

I was thinking of entering branding colors in CSS and then using them on pages, to make my life easier with EE clients. Then I could set all my pages to automatically use branding colors (with various other tweaks obviously) with EE variations. Has anyone tried anything like this? Any known pitfalls to declaring color variables in the CSS and then using them in CSS and pages? 

804
rich.schmick
Contributor II
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Can Adobe XD export to html somehow?

I guess copy paste to dreamweaver and pray? I figured XD can probably export things other than graphics.I made a new homepage with image buttons as a temp fix but want to remake the same thing with html for speed and to add hover effects without adding more kbs.Any suggestions, or does anyone have a working “3 across buttons html flow” codeset?  

340
lrodman
Guide II
R
Novice III
rwatkinsNovice III
posted in HTML & CSS
CSS Code Library

Hi,We just launched Docebo to our company and are now turning our mind to customizing the interface and menus to suit our culture and needs. I have found many CSS code chunks in various threads to do wonderful things like remove the multiple Start Now buttons and hide the Remove from Team feature. All of these have been accomplished using user-submitted CSS code. I’m curious if there is a library of user generated CSS tweaks anywhere we can access instead of trying to find code fixes through community searches.Thanks!

3104
Bfarkas
Hero III
M
mmumfordNewcomer
asked in HTML & CSS
CSS to hide calendar button on ILT course player

Does anyone have any CSS to hide the “Add to calendar” button on the course player page for ILT courses? Thus far we’ve only been able to hide all three buttons (Calendar, Add to Playlist and Related Sections) wheras we only want to hide the first button.

891
Bfarkas
Hero III
L
Helper II
LSPHelper II
asked in HTML & CSS
How to keep comments in HTML training material code editor?

I only just started out using some HTML for HTML training material by copying some code from somewhere else and playing around with it. I made some <!-- … --> comments to mark what was what, but they disappear once I save the code. Any way to change keep them in there?Is there anything else that gets stripped?

795
Bfarkas
Hero III
A
Novice I
acdNovice I
asked in HTML & CSS
Change 'Back' icon SVG color in CSS without changing 'Magnifying Glass' icon color

Hi, Could anyone enlighten me as to how I can change the ‘Back’ icon fill (circled in red) without changing the fill color of the ‘Magnifying glass’ icon (also circled in red)?I can’t seem to change one in my CSS without the other also changing. Thanks!  

6108
Bfarkas
Hero III
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
How do links work in an iframed comslider

Hello, If we iframe a comslider in as an html widget on our homepage, and a user clicks a link in that comslider, can we make it navigate the whole “master” docebo page? Or do all comslider links have to be “new window” or “in iframe”. Here is an example of where the comslider would go - replacing that “limitless” banner. 

738
Bfarkas
Hero III
brandonq
Contributor II
brandonqContributor II
asked in HTML & CSS
Hiding the "NEW" and "IN PROGRESS" buttons on Course Thumbnails

I previously used the localization tool to switch the confusing NEW button on any course that hasn’t been accessed to NOT STARTED, but what I’m realizing is it’s still an unnecessary and obtrusive feature (see below).Is there CSS to hide it entirely? When you do a list view it completely covers the thumnail. 

1412
brandonq
Contributor II
Lola Fernandez
Novice I
Lola FernandezNovice I
asked in HTML & CSS
Widget layout

Hello Docebo Community! 🤙🏼I'm writing this afternoon, because I'm in the process of creating our catalog page… And I'm very admiring the layout of the Go1 marketplace ⬇Go1 marketplaceIdeally, I'd like to be able to get something similar: to have these five category “boxes/maps” side by side, instead of the three widgets proposed when organizing the widgets. Do you know if this is possible? And if so, by what means? Thanks in advance for your insights! 🎯Lola

1641
Bfarkas
Hero III
rogergreenlee
Contributor II
rogergreenleeContributor II
asked in HTML & CSS
Is it possible to customize the 403 page?

This default page is ominous, any way we can provide better information to a user, like adding our own support contact info? How do I overhaul this 403 page? 

105712
lrodman
Guide II
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS
Change the color of header buttons

HiWhat is the way to set the color of the header icons/buttons (?, Gamification, Notifications etc) ?I’ve tried /*question mark menu color*/ #ui-button-icon-4{ color: #f1f1f1 !important;but although the CSS reference is right (Display:none works), the color will not change.Does anybody know a solution? (P.S about the same question for the breadcrumb bar color and text color) thanks, 

4115
Bfarkas
Hero III
raffy
raffyNewcomer
posted in HTML & CSS
Hide Total Badges and Points from the Badges widget

Hello community,I am trying to look for the right ID or class the past hour to no avail. Basically, what we want is to hide the bottom tab that says My Awarded Badges and My Total Points. This way, only the badges will show up in the widget. If they need to dive deeper, they can always click the Trophy Icon on the top bar or the dedicated Badges and Points link we have on the homepage. Hopefully someone in here encountered this use case and was able to find the right id/class to modify.I appreciate any help regarding this  

541
raffy
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
Using a SCORM wrapper to insert webpages/scripts/mini-sites into courses

This has come up a few times, so I thought I’d share my lightweight wrapper to solve this.Issue: Building small webpages, scripts, webapps to bring into a course, but because regular html pages cannot be directly uploaded you must host it somewhere else and then iframe into the course.Workaround: Move the files into a lightweight SCORM wrapper, zip all the files into a package and load into a course as a SCORM package. How: Download and unzip the attachment (SCORM_WRAPPER_HACK.zip) Open the file ‘imsmanifest.xml’ and update the two title tags that currently have ‘Example SCORM Package Hack Update the Title!’ in them. These will show in a few places so use a good logical name. Copy your files into the base of the folder (you can bring in subfolders as long as you have referenced them correctly. The main page that will load needs to be an index.html file and should reference everything you loaded into the directory. Zip all contents of the folder into a single directory. Be careful not t

137715
Bfarkas
Hero III

Badge winners

  • Community 4th Birthday
    awinterhas earned the badge Community 4th Birthday
  • Community 4th Birthday
    Zivhas earned the badge Community 4th Birthday
  • Community 4th Birthday
    sebashas earned the badge Community 4th Birthday
  • Community 4th Birthday
    Ianhas earned the badge Community 4th Birthday
  • Community 4th Birthday
    Sébastien Arbourhas earned the badge Community 4th Birthday
Show all badges
Terms & ConditionsCookie settings