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.

  • 288 Posts
  • 1,595 Replies

288 Posts

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
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
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 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
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
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
1 year 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
Guide II
1 year 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

2707
captainzelda
Helper I
1 year 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
1 year 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 III
1 year 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
1 year 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 III
1 year 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 III
1 year ago
Johfra
Influencer III
JohfraInfluencer III
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 III
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
Jenna M.
Novice III
Jenna M.Novice III
asked in HTML & CSS

HTML image sizing

I’m trying to use HTML widgets to load images for multiple languages that will each be linked to separate catalogs. Using the WYSIWYG works great to add the image to the widget, but no matter what sizing on the image I try, I cannot get the alignment I’m looking for. The widget automatically adds <p> to the HTML which creates whitespace, I’m able to remove the whitespace but that makes the widget slightly shorter than the carousel I have next to it.Whitespace whitespace removed but widgets different sizes - both HTML/WYSIWYG widgets - both images set to 220pxAspect ratio lost when forcing the HTML widget to 220px to align with image on left. Showing with or without white the versions showing the image doesn’t size properlyI am a novice with HTML/CSS so I’m hoping I’m just missing something simple. Any best practices out there for this? We have tried many many sizes of the image but ultimately it’s the same issue over and over again. 

2
kcortave
Novice II
1 year ago
I
Novice II
idalissesNovice II
posted in HTML & CSS

How to add a button to the Sign In page

We want to add a button or link that says "Click here to login with your client credentials" or something similar. This will take you to our app for them to login via SSO. as anyone been able to add a button undee the “SIGN IN” button on the Sign in page? We want it under the current Sign In button. TIA!  

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

Has anyone tried moving the completed/inprogress etc badges downward on cards?

Basically I don’t like this icon covering the image.  I assume the change I made here in Inspector wouldn’t translate well to mobile, but has anyone tried anything like this?  

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

Hover Bullet Points --> Making it Different

Thought I would have a little more fun with some CSS ideas.I was thinking about how a bunch of bullet points can be really boring and what we could do to change that up a bit so here was something I thought of to make it a little more interesting.I used a Font Awesome icon (part of Docebo) to be the new bullet and made it so when you hover over it you can read the text when the information slides out.Of course you can modify the code however you wish for colors or the icon to suit your needs.Here is how it turned out. This has both a CSS and an HTML component.Here is the code for exactly what you see above.CSS/** Tweak your width and height as desired **//** I chose to go small to just show the bullet **//** adjust colors and duration as desired **/.hoverBox { width: 42px; height: 25px; background-color: #008aab; color: white; transition-property: width; transition-duration: 0.5s; margin: 5px; white-space: nowrap;}/** This is the new width when you hover **//**

11
M
Novice III
1 year ago

Badge winners

  • Product Q&A Influencer
    Lucy Dolphinhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    elamasthas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    JasonHailerhas earned the badge Product Q&A Influencer
  • Product Q&A Genius
    Cheneyhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    B0LThas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings