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.

  • 455 Posts
  • 2,390 Replies
455 Posts
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? 

925
lrnlab
Hero III
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!

1875
dkraige
Helper I
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. 

222
K
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?  

3865
A
Novice II
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

3002
lrnlab
Hero III
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 

585
apt.gg
Novice I
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
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!

771
Bfarkas
Hero III
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!

931
Bfarkas
Hero III
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
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 

633
AnneG
Contributor II
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: 

2964
Bfarkas
Hero III
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?

2077
J
Influencer III
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. 

632
jckemv
Helper I
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.

281
lrnlab
Hero III
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

883
mateojones
Novice III
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: 

1268
gstager
Hero III
R
rashminayak25Newcomer
asked in HTML & CSS
HTML Widget, HTML Widget link

Hi, Does anyone know how to link HTML widgets to internal pages? 

1143
lrnlab
Hero III
A
Novice III
amwilliamsNovice III
asked in HTML & CSS
Test navigation buttons contrast color in light mode

I’ve put my platform into light mode in the new course player according to the forums here (thanks!), but I have one additional style issue. The “Previous” button and some of the icons in a test are showing white text over the grey background. I’m not sure which color to modify, but it definitely isn’t any color I have set to white or grey currently. Here’s what I have in Branding:/* Light Theme */lrn-course-player-play-area { --ui-color-layout-contrast: #f5f5f5; --ui-color-typography-negative: rgb(0, 0, 0); --ui-color-border-accessibility-default: rgba(65, 64, 66, 0.507); --ui-color-layout-overlay-dark: rgb(255, 255, 255);}lrn-training-material-header,.lrn-course-player-table-of-contents-header,.lrn-course-player-training-material-idle-view-content { --ui-color-icon-negative: rgb(73, 43, 43); --ui-color-icon-neutral: rgb(255, 255, 255);}lrn-training-material-header button,.lrn-course-player-table-of-contents-header button,dcb-ui-list-item-training-material-content,.lrn-course-pl

843
Bfarkas
Hero III