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.

  • 437 Posts
  • 2,338 Replies
437 Posts
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Themed header, titlebar and breadcrumb bar

before and after (I have a few other tweaks in there too) /***************header and titlebar ***************************//* fancy header bar*/header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-header.png) repeat-x center; background-size: contain; background-color: transparent;}/* fancy breadcrumb bar*/doc-layout-breadcrumbs div.breadcrumbs { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding.png) repeat-x center; background-size: contain;}doc-layout-breadcrumbs div.breadcrumbs div.hierarchical-breadcrumbs ul li{ visibility: hidden;} /* hide breadcrumb text*/ doc-layout-breadcrumbs div.breadcrumbs div.navigation-history a { color: black;} /* black navigation-back text*//* fancy page title bar */doc-layout-title-bar div#page-title__wrapper { background: url(https://docebo-institute.s3.us-eas

7379
lrnlab
Hero III
11 months ago
J
Novice III
jenhanNovice III
asked in HTML & CSS
Title/subtitle for catalog widget

I want to be able to add a title/subtitle between the catalog widget (highlighted) and search bar. The widget setting itself only allows titles and it will show above the search bar. Does anyone know what I can do? 

865
lrnlab
Hero III
1 year ago
L
Guide I
LNewGuide I
asked in HTML & CSS
Badging - Is it possible to hide the point value?

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!

1785
dkraige
Helper I
1 year ago
K
KristyNewcomer
asked in HTML & CSS
Remove Rank/Star/Points on Contest Chart

Does anyone know how to remove the text Points on the Contest Chart? I figured out how to remove the Rank and Star. But stumped on the Points or text displayed. I’m not sure if removing the whole column is an option. 

212
K
1 year ago
kferguson
Contributor III
kfergusonContributor III
asked in HTML & CSS
HTML Widget Padding

Hello, I am trying to add padding within the HTML/WYSIWYG widget and for some reason no matter what I do it will not work.  Anyone run into a similar issue?  Anyone have some code that I can drop in to reflect some space between the words and border?  

3715
A
Novice II
1 year ago
sjennings78
Guide I
sjennings78Guide I
posted in HTML & CSS
Adding GIF images to your pages

Docebo may not currently have a built-in way to add GIFs to your pages, but with a few extra resources, you can add them to your pages.  I’ll share here what we have done on our LMS to use GIFs.We have a webserver where we are able to host images outside of Docebo - but there may be other storage options out there that will also work.  As for creating the GIFs, we have been using mostly Canva lately to create them (it’s super easy to use and inexpensive for a PRO account).Sometimes we’ll do a single GIF image and place on the page to draw more attention to a topic.  Other times, we do a set of “slides” to scroll additional information on the page.  Once we have the slide(s) created, we export them as a GIF in Canva.  We then upload that GIF to our webserver (please comment below if you have found other hosting solutions for images) and place it on a page using an HTML widget.In the HTML widget, we just use a simple <img> tag to display the GIF.  Here’s a sample code snippet and G

69010
Bfarkas
Hero III
1 year ago
E
Novice II
e.pivaNovice II
asked in HTML & CSS
Using E-mail Templates for Notifications

Good morning everyone,We would like to use a team email (we use Outlook) that we created as a "template" for all the notifications we send from Docebo. I've tried doing a simple copy and paste and also pasting the HTML code of the email but we can't visualize all the elements of the original communication (e.g. sources, external links, images, etc.).Does anyone know how to do in such cases to "convert" an outlook email into a template that can be used on Docebo?Thank you very much in advance.Edo

2572
lrnlab
Hero III
1 year ago
apt.gg
Novice I
apt.gg
asked in HTML & CSS
Changing description bar colour only

Hey Docebo friends! Is there a way to only change the background colour of the description toolbar or even the icon colours? My manager insists on having it grey but I can’t read / see the icons. Below is what it currently looks like.  Appreciate any help - my eyes are so sore! Thank you 

575
apt.gg
Novice I
1 year ago
C
Novice I
CrysGNovice I
asked in HTML & CSS
Using Superscripts / subscripts for Test Training Materials

One of the choices in our test question has a superscript, and I thought using the tag <sup> could do the trick. It looks ok within the Question Bank, but when it’s being viewed on the test, the actual tags are shown as well:  I’m not very familiar with CSS or HTML coding, so I’m sure there must be a step I’m missing. Does anyone have a recommendation on how to fix this? Thanks in advance!  

195
lrnlab
Hero III
1 year ago
S
seanpfmNewcomer
asked in HTML & CSS
How can I change the color of the hamburger menu?

Hi,I’ve made a few attempts to target the hamburger icon and change it to flat white with no success. Looking for code to do so. Thank you!

741
Bfarkas
Hero III
1 year ago
ktbadham
Helper I
ktbadhamHelper I
asked in HTML & CSS
Hiding Menu Items on New Course Player

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!

871
Bfarkas
Hero III
1 year ago
JeanetteMcVeigh
Hero II
JeanetteMcVeighHero II
asked in HTML & CSS
We have custom CSS and it's messing with the information displayed when the Gamification icon is clicked

OK, so all you CSS peeps out there...I have custom CSS that was created by people that are not me.  😀 Working on turning on Gamification and the layout when a user clicks on the trophy icon is not working. I know it’s my custom CSS because if I remove all of it, it display correctly.Can anyone help me determine what ‘stuff’ controls the Gamification displays? Image below is showing the issue… Thanks. 

281
Bfarkas
Hero III
1 year ago
andym
Novice I
andymNovice I
posted in HTML & CSS
Hide ability to invite all channel users to view asset

Like a few others here, I’ve been concerned about the ability of users to invite an entire channel’s user base to view an asset, but seem to have found a CSS fix.ProblemI’ve altered our language pack to remove any reference to inviting a channel, but the search box still returns channel results, e.g. if searching for someone called ‘Sofia’, typing ‘sof’ will autocomplete to our global ‘Soft Skills’ channels with thousands of users…BEFORE Solution /* AM - Prevent invitations to all channel users */.inviting-search-multiselect .text-basic-size:has(.additional-info){display: none!important;}.inviting-search-multiselect being the search bar on the Invite pop-out .text-basic-size being the individual search results :has specifying only search results which also include the number of channel users (.additional-info)This results in users still being selectable, but channels not! AFTER 

613
AnneG
Contributor II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Three column hamburger menu as a "mega menu"

Hello, We didn’t end up using this code, but I thought it might be helpful to others. It turns your hamburger menu into a 3 column “mega menu” top center using CSS-flexbox columns. It also makes the topbar “fat” plus a few other tweaks. Enjoy! Before:After: 

2624
Bfarkas
Hero III
1 year ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS
how to remove course ID from player

HI can anybody advise on removing the ID code from the course player?Ive tried using  subtitle-block ng-star-inserted {    display: none !important;But it did not work. any help?

2047
J
Influencer III
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Can I create hover-over popups for the full-width calendar (my-calendar OR catalog-calendar) with CSS?

Hello, Could I use CSS to create hoverovers for the calendar, so users wouldn’t have to click an event to see details? I assume not but figured I’d try. See below. 

602
jckemv
Helper I
1 year ago
Paul_Diniakos
Contributor II
Paul_DiniakosContributor II
asked in HTML & CSS
Notifications - Code to track user interest

I hope to ask this question as clearly as possible:We want to send an email notification to a group of users, and in that email we are asking if they are interested (yes/no) in attending an upcoming vILT. Is there any code out of the box or code that would capture the yes/no button responses in a single place for us to track?Thanks in advance.

261
lrnlab
Hero III
1 year ago
L
Contributor III
lyndagutmanContributor III
asked in HTML & CSS
Using CSS with Extended Enterprise

Hi Community.  We are currently implementing EE and i can’t get a straight answer from Docebo about using CSS iwithin the sub-domains. If within the sub-domain, i turn on “enable custom settings for this client”, does it use the root CSS along with the client-specific CSS i add, OR do i have to copy the root CSS into the client CSS area to have it all apply?The latter seems to be an administrative nightmare, but i’d like to better understand how the CSS updates work within EE.Thanks for any guidance you can provide.Lynda

833
mateojones
Novice III
1 year ago
J
Novice I
jonvNovice I
asked in HTML & CSS
Identical code from existing HTML/WYSIWYG page widget creates a different result in new page widget

I created a new page for my site and copied an HTML/WYSIWYG widget from an existing page. However, the new page widget, using the identical code copied from the existing page widget, looks different from the original. If anyone has any suggestions of how to troubleshoot, it would be much appreciated. Thanks!Here’s the code:<h4>Manager Dashboard</h4><p><a href="/manage/users">My Staff</a></p><p><a href="/course/manage">Course Enrollments</a></p><p><a href="/learn/admin/reports">Reports</a></p>Here’s the existing page widget desktop view: Here’s the new page widget desktop view: 

1208
gstager
Hero III
1 year ago