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.

  • 383 Posts
  • 2,016 Replies

383 Posts

dklinger
Hero III
dklingerHero III
posted in HTML & CSS

Here is one for thinking outside the box - getting a PODCAST feed from a non-profitable source

We have been enjoying the Next Big Ideas eLearning freebies that were put out by Articulate in cooperation with The Next Big Ideas. The company/site runs a weekly free podcast...and you can pick it up from like 12 sources. When I look into it? You can actually get a url to play an embed onto your site.Honestly though, I would rather work with one of those freebie Podcast spaces and avoid the Apple or other page embeds that not only suggest listen, but to also buy from us to listen...(PS - to all you web crawlers and bots out there? I am a longtime Apple consumer 🤣).Let me show you what happens when I bring in the embed code into an HTML widget.Not bad - but still that pesky apple logo.So for folks that serve up podcasts as part of your content - do you have a non-profit that can do the same?????

2
Bfarkas
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

Please help me remove the ... (ellipsis) from content cards

Thank you! I have increased the size of the text box to be longer, as seen, and I want to hide the ellipses (...’s) - but can’t find them!  

3
Bfarkas
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

Help! Can someone show me how to add an item to the admin gear menu with CSS?

Hello and happy new year! In order to let power users create courses AND run reports on my courses without being able to edit them, I have to use my-teams based reporting now for my power-users (unless someone has a workaround) I would like to add https://in.leadingre.com/manage/my-team/reports to the admin gear menu, since my users keep looing for this “admin task” under the admin gear. Almost all users who have managees will be power users of some kind. Can anyone help? Probably @bfarkas

4
Bfarkas
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

Has anyone written CSS to reduce the margins on the video upload page (or training materials page)?

 I tried the following which did not work. div.course-edit_main #legacy-wrapper-iframe body > div.container {    margin-left: 50px;    margin-right: 50px;}  It is in an iframe, but the following edits, also in the same iframe, worked fine as you can see:#player-uploader-wrapper > div:nth-child(8) > div.controls {    height: 100px!important;}#mceu_22, #mceu_22-body {    height: 98px!important;}#mceu_33, #mceu_33 #file-description_ifr {    height: 33px !important;}.docebo-progress {    transform: scaleY(4.0);} 

6
lrodman
Guide II
1 year ago
dkraige
Helper I
dkraigeHelper I
asked in HTML & CSS

Permanent, linkable URL of Video Objects in CLOR

Is it possible to get a URL of a video object in CLOR that can then be called via HTML video player, for instance to be shown on the public catalog page?  I want to be able to show some of our videos that are in our platform on a public catalog page, so people can get a taste of what they will see once they log in.  It seems stupid to have to host those videos somewhere else, like on our company website or other paid hosting site, when they are already hosted in Docebo.  We can get a URL for objects in the CLOR via API call, but that address, or token, or something seems to time out after some time, so users who are not logged in (which again, is the whole point), can’t see it.  The URL works long enough to download it once, but not to have it posted on a website permanently.  How can I get a permanent URL for it that will work permanently for a user who is not logged into Docebo?

3
dkraige
Helper I
1 year ago
S
ShovalNewcomer
asked in HTML & CSS

Hiding Enrollment button on a specific learning plan

Hi, Is it possible to hide the enrollment button on a specific learning plan using CSS? Thanks,  

2
vegard.ofstaas
Influencer I
1 year ago
eric.trudeau
Novice II
eric.trudeauNovice II
asked in HTML & CSS

Changing or hiding SCORM Package Icon via CSS

Has anyone discovered a way to change or hide the SCORM package icon using CSS?Iconography is so important for UX and the zip file means absolutely nothing to our learners, and even confuses many of them. 

16
gstager
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: a bunch of blankslate (no ___ found) image reskins

div.users-list blankslate div.blankslate div.header-icon img{ visibility: hidden;}div.users-list blankslate div.blankslate div.header-icon{ background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-courses.png) no-repeat center; background-size: contain; position: relative;}/*reskin user search tab blankslate*/enrollments-list-deprecated blankslate div.blank-slate-image img{ visibility: hidden;}enrollments-list-deprecated blankslate div.blank-slate-image{ background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-courses.png) no-repeat center; background-size: contain; position: relative;}/*reskin no enrollments blankslate*/ilt-sessions-list blankslate div.blank-slate-image img, session-management-events-list blankslate div.blank-slate-image img{ visibility: hidden;}ilt-sessions-list blankslate div.blank-slate-image, session-management-events-list blankslate div.blank-slate-image { background: url(https://docebo

1
lrodman
Guide II
1 year ago
Neil Patterson
Guide I
Neil PattersonGuide I
asked in HTML & CSS

Hide the catalog search/filter/sort bar

Hi everyone,I am designing a page that has 3 areas on it depending on what a learner wants to do (attend an ILT, sit on demand eLearning or browse resources).  I am wondering if there is a way to hide the search / filter / sort bar so that there’s not a huge gap between the custom image and the courses appearing:Is this even possible?

19
Bfarkas
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Fat progress bars

I generally walk around while uploading 700mb videos and a fat progress bar helps a lot!.docebo-progress {    transform: scaleY(4.0);} 

1
lrodman
Guide II
1 year ago
J
Novice I
jshipleyNovice I
asked in HTML & CSS

Hide Catalog Search and Filter Bar

This other post was helpful but I still couldn’t get it to work. Maybe someone can look at my specific scenario to let me know what CSS code to use.I identified the Catalog Widget as doc-widget-14. I have tried using numerous CSS suggestions and none of them have worked. #doc-widget-14 .ui-data-browser-controls-bar shadowed ng-star-inserted ui-media-xs {    display:none !important}#doc-widget-14 .ui-data-browser-controls-bar{display:none!important}#doc-widget-14 div.ui-data-browser-controls-bar {display:none!important}#doc-widget-14 > doc-widget-course-catalog > ui-data-browser > div > div.ui-data-browser-controls-bar.shadowed.ng-star-inserted.ui-media-xs {display:none !important}#doc-widget-14 > doc-widget-course-catalog {    display:none !important}Any suggestions?

4
L
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Bigger, colorized calendar "dots"

span.cal-event-balloon {    background-color: var(--ui-color-button-label-error) !important;    transform: scale(1.5);}/*bigger red dots*/before:after: 

10
lrodman
Guide II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Compactify impersonation bar

  BeforeAfterui-notification-banner.ui-notification-banner-color-alert { height:32px!important;}div.ui-notification-banner-actions { padding-bottom:0px!important;}/*compactify impersonation*/ 

0
lrodman
Guide II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Docebo CSS Var colors - let's make a list!

In CSS, docebo uses variables for colors to represent your branding-and-look colors.As we migrate to extended enterprise, I am cleaning up my CSS and trying to use more variable colors - so that companies with different branding colors won’t have their colors overwritten by my CSS.Here’s all the variables I found so far. The only one I know that corresponds to the branding-and-look colors is the first one: --ui-color-layout-background. Some are presumably predictable like error and alert vars. var(--ui-color-layout-background)var(--ui-color-layout-shadow)var(--ui-color-layout-dark)var(--ui-color-layout-overlay-dark)var(--ui-color-layout-surface)var(--ui-color-button-background-primary)var(--ui-color-button-background-secondary)var(--ui-color-button-label-neutral)var(--ui-color-button-label-primary)var(--ui-color-button-label-accent)var(--ui-color-button-label-accent-secondary)var(--ui-color-button-label-negative)var(--ui-color-button-label-error)var(--ui-color-button-label-dark)var(--u

1
lrodman
Guide II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Themed progress spinner

ui-spinner > div > div.ui-spinner-layer { /*border-style: hidden !important;*/ border-color:#133D8D !important; height: 105%; width: 105%; background-image: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/logo22px.png);}/*colorize and theme spinner*/I can’t seem to get the size right. I’ve also tried making it bigger but this makes the spinning look like a spirograph since I’m not sizing some of the transformations used, I guess. In any case, relatively successful theming of most (but not all) spinners. Not sure if I broke anything but it seems fine. I can’t seem to hide the spinning wheel thingy. The admin dashboard is a good testing page since it is so slow for me :) finally got a chance to have at that spinner!  Updated CSS/*#doc-layout-page-content > doc-layout-legacy-wrapper > div > */ ui-spinner > div > div.ui-spinner-layer, div.hyd-spinner-layer {     /*border-style: hidden !important;*/     border-color: transparent !i

8
lrodman
Guide II
1 year ago
James A
Novice III
James ANovice III
posted in HTML & CSS

Creating a Horizontal Navigation Menu for Novices

Hi. I was wondering if anyone had more of a step-by-step guide on creating a simple horizontal navigation menu (with drop-down/cascading links) for people with a very basic understanding of html/css (i.e, myself)?  I’m assuming all code has to sit within the CSS Custom Styles section of the branding page? In which case, does the page that will have the menu need to contain a widget (such as a full-width row) at the top in order to ‘house’ the navigation menu within? If so, how do you ID the widget itself? A full, working example, clearly labelling any widget or page referencing would be greatly appreciated as I’d like to condense using boxes/images as quicklinks to other pages on the platform. Thanks in advance to any responses!

13
Bfarkas
Hero III
1 year ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS

Help - Resizing in an HTML widget that is using CSS

I am very much a novice in the CSS area, so any help will be greatly appreciated! I am trying to create an effect similar to the one below using CSS, where each image (or face as in the example below) is a clickable element:The problem I am finding is the widget won’t automatically resize when the window is minimized.  I would like to avoid having scroll bars appear when the window is minimized a little bit and I am wondering if there is some attribute in the CSS that I can apply to allow the image to be resized when expanding and minimizing my browser window?Here is the css and example html that I am using:@charset "utf-8";/*circle image*/.circle-container { position: relative; /* 1 */ width: 30em; height: 30em; padding: 0; border-radius: 50%; list-style: none; /* 2 */ box-sizing: content-box; /* 3 */ margin: 0em auto 0; border: dashed 0px #ffffff;}.circle-container > * { /* 4 */ display: block; position: absolute; top: 50%; left: 50%; width: 6em; height: 6em; m

10
gstager
Hero III
1 year ago
elamast
Hero I
elamastHero I
posted in HTML & CSS

Hide "Enroll" button for Power Users on ecommerce courses via CSS

We had a need to make the “Enroll” button disappear for Power Users.  We wanted to give customers the ability to manage their own user enrollments in the system, but not to be able to get free classes for the Power User (bypassing the shopping cart).  Here was the initial solution in CSS:/*hide course enroll button*/[aria-label="Enroll"] {display:none;} However, we also offer some free online tests to the public, and the solution above affected *all* enrollment buttons.  The solution to make the “enroll” button selectively disappear was based on CSS siblings:ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;}/*hide course enroll button under shopping cart*/ui-button-raised-primary + ui-button-raised-primary [aria-label="Enroll"] {display:none;} This CSS allows you to essentially make the “display:none” conditional upon the appearance of the “add to cart” button being above the “enroll” button.  I hope this helps someone else!

6
kimngo_ac
Novice II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Get rid of mandatory uppercase on most buttons

.mdl-button {    text-transform: none;}/*get rid of mandatory uppercase for all buttons*/  

1
Bfarkas
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Help - best practices for a quicklinks html widget

 Dreamweaver rewrite:<!doctype html><html><head><meta charset="utf-8"><title>Quick Links</title></head><body><p><strong><em>Institute Quick Links</em></strong></p><ul> <li><a href="https://in.leadingre.com/pages/28/help-and-faq">Help and Support Page</a></li> <li><a href="https://in.leadingre.com/legacy/lms/index.php%3Fr%3DmyActivities/index">My Activities</a></li> <li><a href="https://in.leadingre.com/pages/30/my-profile-and-calendar">My Profile and Calendar</a></li> <li><a href="https://in.leadingre.com/pages/56/syllabi-learning-journeys">Syllabi (Learning Journeys)</a></li> <li><a href="https://in.leadingre.com/learn/course/11/institute-forums">Forums</a></li> <li><a href="https://in.leadingre.com/pages/36/contests-and-events">Contests and Events</a&gt

9
lrodman
Guide II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Help! My certificate html is resulting in blank certificates

<table style="background-image: url('https://in.leadingre.com/admin/certificate.png');" border="0" width="1810px"><tbody><tr><td width="100" height="1104"> </td><td width="1610"> </td><td width="100"> </td></tr><tr><td height="200"> </td><td style="font-size: 40pt; text-align: center;">[firstname] [lastname]</td><td> </td></tr><tr><td height="68"> </td><td> </td><td> </td></tr><tr><td height="134"> </td><td style="font-size: 18pt; text-align: center;">[course_name]</td><td> </td></tr><tr><td height="320"> </td><td style="text-align: center;">[course_description]</td><td> </td></tr><tr><td height="78"> </td><td s

5
thuyck
1 year ago
Nicole
Helper II
NicoleHelper II
asked in HTML & CSS

CSS to hide GMT's city/location

Happy Friday!I’m hoping that someone has CSS code to hide the GMT city? Please and thank you? 

10
gstager
Hero III
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Change spinner color (and make it bigger)

#doc-layout-page-content > doc-layout-legacy-wrapper > div > ui-spinner > div > div.ui-spinner-layer { border-color:#133D8D; height: 200%; width: 200%;}/*colorize spinner*/this also makes it bigger with mixed results I would love to replace it with my logo but I don’t think I know enough about how it works

1
Bfarkas
Hero III
1 year ago
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS

Common CSS Stuff Tackled in an old Inspire session

I was browsing the Docebo University site yesterday looking for a course to send to someone, and came across this old presentation: ”Take Platform Design to the Next Level”https://university.docebo.com/share/asset/view/69It has resource files and many common requests. I know this has been mentioned in a few threads around, but thought it deserved a proper thread dedicated to it so it doesn’t get overlooked as much! 

1
H
Novice II
1 year ago
Scott Foster
Influencer I
Scott FosterInfluencer I
asked in HTML & CSS

Sign in page background video

Hi everyone,We have created a beautiful video we want to use for our background on the sign in page.The video contains audio but when I upload it and then go to the sign in page, there is no audio.Does anyone know if audio is possible for this? Is it a CSS issue?Thanks in advance for any and all help.

3
Scott Foster
Influencer I
1 year ago

Badge winners

  • Product Tips & Tricks Genius
    nick.tostohas earned the badge Product Tips & Tricks Genius
  • Product Q&A Influencer
    ErorrMsghas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Katzenhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    JasonQhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    smallchas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings