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.

  • 392 Posts
  • 2,056 Replies
392 Posts
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
My Team - Real life story - Assist Request

I just got this message from a manager trying to understand.So, for example, xxxx and xxxx need to log into the learning center and complete NH Training even though they show as Looks Good?What do I tell the person??? They are right.So a question for you - does anyone know if you can hide the KPI “Looks Good” tag via CSS? Because the training is given a deadline? Albeit a soft-deadline - and the KPI tag isnt helping - it is confusing people on my end. 

10
K
Helper II
7 months ago
B
Contributor II
Ben BaumanContributor II
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

3
B
Contributor II
7 months ago
cschmelzer
Helper II
cschmelzerHelper II
asked in HTML & CSS
Localization - translations

When changing text in the localization tool, is it possible to add a bold attribute?  For example, I want to emphasize the word IMPORTANT, but html code does not work.Appreicate any feedback.Regards,Cheryl

7
jckemv
Helper I
7 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
Trying the profile widget

Anyone catch the CSS needed to adjust the color of the profile widget?

14
A
Novice II
7 months ago
K
Novice III
KellyNovice III
asked in HTML & CSS
HTML image editing

Hello, I have used a GIF instead of an image on a widget but i dont know how to remove the white space at the bottom and also the scroll panel at the side. I have tried resizing but no luck, any ideas?  

8
N
Novice III
7 months ago
L
Contributor I
lisa.schneerContributor I
asked in HTML & CSS
How to Hide Pop Up: COURSE has been added to your learning activity!

We are trying to reduce the number of START buttons and this particular pop up it just an additional click we don’t need.   I’ve been digging on the HTML/CSS pages but haven’t quite found any code that shows how to eliminate/block this pop up.   Our external users don’t care about their “learner activity”  they just want to register and start a course.   So it would be a huge win if there were code to block this box. 

8
G
Influencer I
7 months ago
Ian
Guide I
IanGuide I
asked in HTML & CSS
Can I *host* custom fonts with Docebo?

I’m running into a spot of bother with some custom CSS. All I want to do is replace the default Open Sans with a different web font. The CSS itself is fine (it’s managing to replace Open Sans with my fallback font, Arial). However, where the preferred web font is concerned, I’m running into issues with CORS:"Access to font at 'https://example.com/font.woff2' from origin 'https://example.docebosaas.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."I’ve seen posts here illustrating that you can host images in Docebo (tried uploading the woff2 file as an image; it was unsurprisingly rejected as invalid). I also tried uploading it as a file (as part of a course’s training materials); that seemed to be working, but then it said: File does not existSo, I’m wondering if anyone knows of a way to host web fonts in Docebo. If not, I guess I need to find another place to host it, where I can control the CORS policy, or simply ask t

1
Ian
Guide I
7 months ago
kfortenb
Influencer I
kfortenbInfluencer I
asked in HTML & CSS
CSS to hide asset uploader in channels?

Hello! Is there a way to hide the “asset uploaded by” field within channels, using CSS? If so, can it apply globally, and/or to just to specific domains within Extended Enterprise? The rationale is that we use channels for content presentation and functionality, but the uploaders are not considered to be experts/contacts for the content.Example: I’d like to hide the names of all uploaders from all assets, such as this one: 

5
I
Novice III
7 months ago
K
Novice III
KellyNovice III
asked in HTML & CSS
CSS it increase button size?

Hi, Im trying to find code to increase the size of the button on a custom content box - any ideas?  Thanks in advance :) 

6
Betsysentamu
Novice I
7 months ago
malicm
Contributor II
malicmContributor II
asked in HTML & CSS
Remove Fields

Hi! I am looking to remove these two fields from My Activities > External Training > New Activity.  I tried a couple ways, but not successful. Was wondering if anyone here would be faster at this. 

6
malicm
Contributor II
7 months ago
C
Contributor I
ChristineWContributor I
asked in HTML & CSS
Course card status

Hi I’m quite new to the Docebo platform and would to change the rectangle label colour on the course cards for the status of the courses. We currently have blue for not started, which changes to black for courses In Progress or Completed, but we would like to have this as the following:Red - Not StartedAmber - In ProgressGreen - CompletedAny help on this would be very much appreciated. Thanks

3
Bfarkas
Hero III
7 months ago
G
Novice III
gusNovice III
asked in HTML & CSS
Set Minimum Character Length on Enrollment Additional Field

Hey community. Hopefully I’m not repeating anything here, but I couldn’t find anything similar. I’m hoping some smart cookie might know if there’s a way to set a minimum character length on an enrollment additional field. We have a purchase order field as a mandatory requirement for self-enrollment to our ILT sessions, but you can circumvent it by entering a single character or even a space.

3
Bfarkas
Hero III
7 months ago
I
Novice III
inessaNovice III
asked in HTML & CSS
Hide the sharing option "Only me" in the channel with CSS codes

Hey ,We have Discover Coach & Share on our platform and we would like to Hide the sharing option "Only me" in the channel.Has anyone been able to hide the option “ only me “ in the channel  . 

4
I
Novice III
7 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Rotating Text Barrel - Animation Idea #11

Here is another fun little HTML/CSS idea for all of you.A rotating text barrel.OK - maybe there is another name for this but I am going with the barrel.Here is the code needed to pull this off.As always - test with your platform for conflicts and let me know about any bugs with thisCSS for Branding and Look area /** Rotating Text Barrel **//** This block will help set the color and dimensions of your widget **/#barrel { background: #000000; height: 100px; width:100%; position: absolute;}/** This block will allow you to adjust **//** your positioning of the barrel **//** Set all values as desired **/#barrelBox { width: 50%; margin-left: auto; margin-right: auto; margin-top: 35px;}/** This block will set parameters on the static text **/.flipSign h3 { height: 30px; float: left; margin-right: 5px; color: #ffffff;}/** This block has general settings for the moving text **/.barrelText { float: left; overflow: hidden; position: relative; height: 25px; top: 0px;}/** T

5
gstager
Hero III
7 months ago
S
Influencer III
simone.yaghiInfluencer III
asked in HTML & CSS
Hide/Unhide Password Button from Login Page

Hi all, does anyone know if it’s possible to remove the unhide password field from the log in page? I have been looking into knowledge articles but can’t find the answer or the setting in advanced settings. 

3
S
Helper II
7 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Compactify homepage and other screens/widgets

How do you compactify?™/* compactify my profile buttons*/widget-action-button div.root.action a.mdl-button.mdl-js-button.text-main { height: 24px; line-height: 24px;}/********************compactify***********************//*compactify "my home page" bar*/div#page-title__wrapper { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 50px !important;}/*compactify homepage widgets - make all UI boxes closer together*/.single-widget.ng-star-inserted { margin-bottom: 10px;}/*compactify homepage channels widget*/channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 { padding-top: 0px; /*top padding overall*/}channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-info.ui-color-typography-primary { padding-bottom: 2px; /*between icon and "follow" on mobile*/}channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-items-wrappe

6
N
Novice III
7 months ago
H
hschroyerNewcomer
asked in HTML & CSS
Auto-expand table of contents in courses with folders and hide down arrow

Hello All CSS experts...I have been using a CSS to auto expand but after the update, it no longer works. Any ideas?/* Auto-expand table of contents in courses with folders and hide down arrow */.chapters tree-view{    display: flex !important;}em.zmdi-chevron-down{    visibility: hidden;}/** Hide the Header Bar **/#doc-layout-title-bar {    display: none;}

0
H
8 months ago
N
Novice II
NRettNovice II
posted in HTML & CSS
Breaking the boundaries of the HTML widget

Hey hey, I couldn’t find this issue anywhere but I know it has been done by some organizations.So here goes, I want to break out of the boundaries set by the HTML widget. Specifically, I would like to get to 100% width on the page to help create clearer sections of the pages. Hopefully the screenshots below will help illustrate what I’m asking about. Anybody figured this out and I willing to share?

9
C
8 months ago
S
sunny.sandhaNewcomer
asked in HTML & CSS
User Management: Hiding the 'Manage Users via CSV' Button" using CSS

Hello Community,We are trying to hide the option “Manage Users via CSV" using CSS for admin view using CSS?Does anyone know or have CSS to hide this option on the User Management page?  

3
Annarose.Peterson
Hero III
8 months ago
G
Novice I
gataraneNovice I
asked in HTML & CSS
Is there any way to create HTML page with background image along with few hyperlinks

Trying to create an HTLM page with background image though Docebo page? I am trying to create a page through HTML / WYSIWYG wizard, but background image is not getting populated. Is there any Docebo limitation?    

2
Bfarkas
Hero III
8 months ago
M
Contributor I
meaganpContributor I
asked in HTML & CSS
CSS to hide Channel Icon

Hi everyone,  I just noticed this Channel icon appeared next to a Channel I have linked from the home page. Anyone know how to remove it? It’s the black box next to “Solutions.” Thanks!   

1
Bfarkas
Hero III
8 months ago
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

1
Bfarkas
Hero III
8 months ago
V
Vincent.LNewcomer
asked in HTML & CSS
Background color of elements in a course folder.

Hello,For some time now, I've been facing an issue, and I can't find any solution. Here is my problem: I can't seem to modify the text and background color of the elements inside a folder in my course. I'm sharing a visual of my issue along with the CSS code I've already entered.Code : Course :As you can see, I have several elements below 'Skills Obsolescence' that are not visible due to the color or a setting I am not aware of. How can I make them visible?You're welcome.

1
ejacquet
Contributor III
8 months ago
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

9
lrnlab
Hero III
8 months ago
J
Novice I
jenhanNovice I
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? 

5
lrnlab
Hero III
9 months ago

Badge winners

  • Product Q&A Genius
    StefanWhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    robrienhas earned the badge Product Q&A Influencer
  • Inspire 2023
    SarahBhas earned the badge Inspire 2023
  • Docebo Inspire 2024
    SarahBhas earned the badge Docebo Inspire 2024
  • Product Q&A Genius
    andrew.charleshas earned the badge Product Q&A Genius
Show all badges
Terms & ConditionsCookie settings