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.

  • 269 Posts
  • 1,473 Replies

269 Posts

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
10 months 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
10 months 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
10 months 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
10 months 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
10 months 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 II
10 months 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
10 months ago
elamast
Guide III
elamastGuide III
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
10 months 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 II
10 months 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
10 months 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
10 months ago
Nicole
Helper I
NicoleHelper I
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
10 months 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 II
11 months ago
Bfarkas
Hero II
BfarkasHero II
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
11 months ago
Scott Foster
Contributor III
Scott FosterContributor III
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
Contributor III
11 months ago
sabine.deliveroo
Influencer I
sabine.deliverooInfluencer I
posted in HTML & CSS

Carousel Style 'My Courses and Learning Plans' display

Hi Community members, Does anyone have experience on creating a ‘Carousel Style’ My courses and Learning plans display? The easiest way to describe this would be the ‘Netflix look’.Currently this widget only allows ‘Card’ and ‘List’.Would be happy to learn from you or create this as an idea if that’s something you see as useful as well.

5
JeanetteMcVeigh
Helper III
11 months ago
Marco.T
Docebian
Marco.TDocebian
published in HTML & CSS

CSS to hide Follow Channel functionality

We've heard a lot of excitement from many of you about the new Follow Channels functionality. The two new notifications, New Content in Followed Channel and Digest: New Content in Followed Channels will not be configured or activated by default in your platform. Choosing not to configure these notifications will result in minimal impact of the feature on your learners. They'd only see a new Followed tab on the All Channels page (see the Following Channels section of the Managing Channels and Their Content knowledge article). Additionally, if you'd like to turn on notifications, your learners still have the ability to disable notifications for channels they follow as shown in the July 2022 release webinar (see 15:00 in the Release Webinar recording). If you'd like to hide the ability for your learners to follow channels in Docebo Learn altogether, you can use the following CSS to do so:ui-carousel .dcb-ui-carousel-additional { display: none!important;}ui-carousel .ui-carousel-header.dcb

2497
captainzelda
Helper I
11 months ago
M
Novice I
MerejayNovice I
asked in HTML & CSS

HTML: Adding Table to questions in a test

The table cells do not show up when you are actually taken the test?  Is there anyway to have the table cells show? This is now it displays when taking the assessment 

5
D
Influencer II
11 months ago
K
Novice I
kristirebs12Novice I
posted in HTML & CSS

CSS for completed courses

I am not seeing this specific thing posted anywhere so I do apologize if it is - But is there a way to apply CSS to sort ‘completed’ from ‘in progress’ and ‘not started?’ Looking specifically for the “My Courses and Learning Plans” page so that it shows up in the three groupings instead of just showing the courses all together.

13
Bfarkas
Hero II
11 months ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS

CSS to keep font format when text is linked in HTML?

So I was pointed to the super awesome post where we can use CSS to have specific fonts.  I was able to apply the CSS to an HTML widget and it worked fabulously! Here is the post: But when I linked the text, the font style totally changed!  See example:Top is unlinked text, and the bottom is the linked text.  I want the linked text to have at least the same font family as the top text.Is there CSS formatting that I can use to keep the format even if it is linked?

2
Annarose.Peterson
Hero III
11 months ago
K
Helper I
karilynnrussellHelper I
posted in HTML & CSS

Training question: Should I learn CSS to take our experience to the next level?

My team is looking to take Docebo to the next level in the next year or so. Currently we use Docebo features mostly out of the box, with some small customizations based on what I’ve learned here. To utilize more advanced customizations/features would it be helpful for me to learn CSS specifically or coding in general? I’d love to hear what other people have done with more advanced features. 

4
Bfarkas
Hero II
11 months ago
Salvo
Influencer III
SalvoInfluencer III
asked in HTML & CSS

HTML menu bar

 Hi, I’m trying to get this menu bar to work. I have this HTML code <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body { font-family: Arial, Helvetica, sans-serif;}.navbar { overflow: hidden; background-color: #333;}.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}.dropdown { float: left; overflow: hidden;}.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0;}.navbar a:hover, .dropdown:hover .dropbtn { background-color: green;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}.

22
Bfarkas
Hero II
1 year ago
Johfra
Influencer II
JohfraInfluencer II
posted in HTML & CSS

Replace "Powered by Docebo" with a custom footer on legacy pages

Hiwe use a custom footer but on legacy pages the “Powered by Docebo” is still shown. After checking with Docebo Support, this is the expected behavior and can we hide the “Powered by Docebo” by using the following css code:/*Hide footer in legacy pages*/#footer > p > a {display:none !important;}The code itself works but now within legacy pages the footer is empty and we want to have the custom footer, because we have a link the Imprint and Privacy Policy.Does anybody know how we can force the custom footer on the legacy pages? 

5
lrodman
Guide II
1 year ago
cathyp
Influencer II
cathypInfluencer II
asked in HTML & CSS

Course Rating Stars

Is there CSS code to hide the course rating stars for the extended enterprise? We want to turn on course rating for our employees but not our customers.

8
Bfarkas
Hero II
1 year ago
K
KristyNewcomer
asked in HTML & CSS

HIde My Points on a page

We are not using points in gamification, is there a way to hide the “My Points” reference? 

4
gstager
Hero III
1 year ago

Badge winners

Show all badges
Terms & ConditionsCookie settings