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.

  • 219 Posts
  • 1,231 Replies

219 Posts

lrodman
Helper III
lrodmanHelper III
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. 

1
Bfarkas
Hero II
28 days ago
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. 

2
brandonq
Contributor II
30 days ago
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

1
Bfarkas
Hero II
1 month ago
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. 

9
dandrews
Contributor III
1 month ago
lrodman
Helper III
lrodmanHelper III
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

5
C
Novice III
1 month ago
sjennings78
Helper I
sjennings78Helper 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

5
H
Novice II
1 month ago
rogergreenlee
Contributor I
rogergreenleeContributor I
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? 

11
lrodman
Helper III
1 month ago
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, 

5
Bfarkas
Hero II
1 month ago
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  

1
raffy
1 month ago
Bfarkas
Hero II
BfarkasHero II
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

15
Bfarkas
Hero II
1 month ago
K
Novice I
kelseycoffeyNovice I
asked in HTML & CSS

CSS to remove "shared content" from the playlist

Hello! Does anyone have css to remove the shared content from the playlist screen? any help would be appreciated. I would love to use this feature but the but the user experience is confusing with the shared content so visible and the actual content hidden at the bottom.

0
K
Novice I
1 month ago
A
adam-gutsNewcomer
asked in HTML & CSS

limiting the activity stream

im looking for a way to limit the amount of posts shown in the activity stream, similar to the QA widget 

2
achess23
Novice III
1 month ago
check
checkNewcomer
asked in HTML & CSS

Rounding widget corners on two-thirds widgets

We’re currently running some custom code to round the corners of widgets. It’s working for all full-size widgets and one-third sized widgets. However, it’s not working for two-thirds widgets -- I’m trying to upload a two-thirds banner and the sharp corners starkly contrast with all the rounded corners. Here’s the CSS we’re currently using to round the corners:/* Make all widgets border rounded*/.pages-widget-page .single-widget *:not(.title):not(.ui-carousel-title):not(.ui-text-link):not(.ui-card-title):not(.ui-typography-heading-5):not(.subtitle) { border-radius: 10px;}Any thoughts? 

3
N
Novice II
1 month ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Course Catalog --> Card Styling

So I was tinkering around with the cards in the course catalog trying to find a slightly different look and found that the CSS adjustment  was not real drastic. I thought some others may be interested in this small adjustment.Here was the starting point.You’ll notice I had chosen an image and used the Localization Tool to change the wording on the bottom already.I was looking to pull out the icons on the bottom as well. Here is the after I got the icon out but then the text needed a small padding adjustment.Then I wanted to try changing some colors on the bottom for the background and text color. Here is the code for the above changes./** Make padding adjustment and background color change for catalog cards **/ui-card-footer { padding-left: 5px; background-color: #000000;}/** Remove icons from bottom of course catalog cards **/ui-card-footer ui-icon { display: none;}/** Change text color for bottom of catalog cards **/ui-card-footer span { color: white;} Hopefully this helps some

20
C
Novice III
1 month ago
Claire Barnard
Novice II
Claire BarnardNovice II
asked in HTML & CSS

Hiding the Question Bank from the admin menu with CSS

Would any CSS experts know the code to remove a tab from the admin menu (specifically the Question Bank)? Our power users need permission to create courses but this enables the Question Bank which we cannot have them access. We would apply the CSS only to Extended Enterprise domains so it would not impact our main platform. Thank you in advance!

0
Claire Barnard
Novice II
1 month ago
M
Novice II
MHelmeNovice II
asked in HTML & CSS

In Progress Courses Background Color

Currently “in progress” courses show as having a black background, which matches the background of “completed” courses.  Could this be a different color so it’s more eye-catching to the user?  Or stay green until it’s completed?  

3
hwolfehall
Helper I
2 months ago
lrodman
Helper III
lrodmanHelper III
posted in HTML & CSS

Free CSS: Improved learning plan bottom panel

Everyone is failing to notice the bottom of screen learning plan panel so I animated it! Enjoy. #doc-layout-page-content div.slideup-panel__wrapper { background-color: black;}#doc-layout-page-content div.slideup-panel__header { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/learning-plan-widget-animation.gif) no-repeat !important; background-size: contain !important;}/*better learning plan bottom slideup - animated gif*/Feel free to steal my gif, though note it’s designed for black background.

1
lrodman
Helper III
2 months ago
B
Novice III
B0LTNovice III
asked in HTML & CSS

Column Width Customization for Learning Paths Page

Has anyone figured out a way to customize the columns on the learning paths page. Ours currently looks like this   And I would really like to extend the name column so we can see the name. I found a page that has the CSS tags for the course management page but not for learning paths. Does anyone have any experience with the CSS for learning paths ?  

1
B
Novice III
2 months ago
Bfarkas
Hero II
BfarkasHero II
asked in HTML & CSS

Brainstorm: What are the most common items you need to modify with CSS that you wish was easier?

I am working on a side project to share to do two things:Make it easier to develop/track your custom CSS changes Create CSS changes for those not comfortable with typical formatting or creating of those CSS changes.Obviously these will start at a more basic level to try it out, and the pro’s on here, sorry this is not aimed at you. I have searched around and picked a couple of nice ones to start with that seem to be fairly common instances of like show/hide/change color items, but want to see if I’m missing anything major or big gaps to consider.Help me out by adding what you find to be the more common modifications (don’t have to share the code, but if you can describe the change and its impact, before/after images welcome!)Thanks! 

36
Bfarkas
Hero II
2 months ago
Daniel
Guide I
DanielGuide I
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 

3
lrodman
Helper III
2 months ago
lrodman
Helper III
lrodmanHelper III
posted in HTML & CSS

Has anyone done font replacement with CSS?

One of our clients wants to use an open webfont platform-wide via CSS (for their EE instance). Has anyone done any font replacement? I told them it might cause spacing issues...

0
lrodman
Helper III
2 months ago
danwinter
Contributor I
danwinterContributor I
asked in HTML & CSS

Permanently turn off "Contextual Help" tooltips

It would be great not to have to close the contextual tool tips each time I open a new tab or window - very distracting and frustrating.

18
A
Novice II
2 months ago
W
williamradford14Newcomer
asked in HTML & CSS

Hiding My Team - Users-Certifications report with CSS

Hi team -We are rolling the My Team feature out to thousands of users. The problem is, under Reports, we have no need for the Users - Certifications report and would consider it confusing because our certifications are not provided by Docebo but are actual proctored exams issued by another vendor. Therefore, we want to hide it! Is this possible via CSS? 

3
W
2 months ago
R
racheleinhornNewcomer
asked in HTML & CSS

Options to embed Instagram in Docebo Learn

Has anyone successfully embedded Instagram on their default page using the iFrame widget? If so, how? We did this years ago (in version 6.0 of Docebo) but now I can’t figure it out again. 

4
cnii808
Contributor II
2 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Remove From My Team 2 --> The Sequel

This post is a continuation of the first post found at the following link.Information found at that link is still valid but there is a new twist in the plot and so I decided to start a new thread to cover that scenario.Highlights From First EpisodeManagers have a team and they have an option to give team members the boot both individually, and when multiple folks are selected, en masse. We removed those options with CSS. HR is happy.Second Episode TeaserAs the manager - you find out that your boss, can still give your team members the boot even though you cannot. You inform HR and the tension in the room becomes palpable.DiscussionInformation at the link above works fine when your organizational structure is only one manager deep. This is due to the fact that Direct Managers have a few more options with their teams than the Functional Manager one level up does. This results in the “Remove From Team” option appearing at different positions in the pop-up menu.Two Level Management Structu

5
J
Novice II
2 months ago

Badge winners

Show all badges
Terms & ConditionsCookie settings