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.

  • 214 Posts
  • 1,217 Replies

214 Posts

dr.reinhardt
Contributor I
dr.reinhardtContributor I
asked in HTML & CSS

Changing the "whoops" page image via CSS

Hello Community!Does someone know how to change this picture? Thanks! 

22
lrodman
Helper III
4 months ago
Bfarkas
Hero I
BfarkasHero I
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
4 months ago
S
Contributor II
Scott FosterContributor II
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
S
Contributor II
4 months ago
74plymouth
Novice I
74plymouthNovice I
asked in HTML & CSS

Remove Record Your Screen using CSS

We would like to remove the Record Your Screen from the Share Content section. Can someone post the CSS for me? Thank you!

8
Bfarkas
Hero I
5 months ago
sabine.deliveroo
Contributor III
sabine.deliverooContributor III
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
5 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

The Search for a Better Accordion

Warning - Long geeky post ahead!!Lots of questions have come up surrounding accordions.I’ve toyed around with these and shared a relatively simple example in my animation series.I have since put together an FAQ accordion that I believe looks and functions well - at least in my environment. I have taken the CSS and heavily commented it for your ease of application to your own environments should you wish to make use of it. I’ve also added a short gif and some pictures so you can sort of see it in action.The code provided is for exactly what you see in this post.You’ll want to adjust as desired and test as usual for your environments.Here is a picture in full, 2/3, and 1/3 size widgets. Here is the CSS for your Branding and Look section/** Sticky Accordion **//** Removes the little icon and positions your title for the box **/#accord ul { list-style: none; padding: 0px; margin: 0px;}/** Set background color as desired for the overall box and popout border **//** Set box-shadow as desi

41
S
Contributor II
5 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

2007
captainzelda
Helper I
5 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
5 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 I
5 months ago
Annarose.Peterson
Hero II
Annarose.PetersonHero II
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 II
5 months ago
K
Contributor II
karilynnrussellContributor II
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 I
5 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 I
5 months ago
Johfra
Influencer I
JohfraInfluencer I
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
Helper III
5 months 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 I
5 months 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
5 months 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
5 months ago
Johfra
Influencer I
JohfraInfluencer I
asked in HTML & CSS

Hide Completed courses within a channel widget (display stream)

Hi,we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..I tried to do this with CSS but then I have an empty spot on the list I used the following CSS Code:#doc-page-97 .ui-card-status-done {display: none !important;}We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).Does anybody have an idea how we can hide completed courses from the channel widget?

21
Bfarkas
Hero I
5 months 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
6 months ago
lrodman
Helper III
lrodmanHelper III
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
Helper III
6 months 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
6 months ago
Jason Kocur
Novice III
Jason KocurNovice III
asked in HTML & CSS

ILT - Use CSS to keep session information dropdown open

Hi Community, I’m wondering if anyone is currently using CSS to keep the ILT Session information dropdowns open when a user opens the course? One of the biggest issues we see with ILTs is that user’s cant find the “Join the Webinar” button and will often miss trainings because of this. I’ve started looking into the CSS code to see what can be applied, but figured I would ask incase anyone has already attempted/solved this. Thank You! -Jason

7
Bfarkas
Hero I
6 months ago
lrodman
Helper III
lrodmanHelper III
posted in HTML & CSS

How can I add a fake Catalog icon on homepage?

Trying to replicate those channel iconsng-component#doc-page-21 div.course-catalog-content-wrapper div.ui-carousel-info::before {}/*icon for all LP's catalog*/

1
gstager
Hero III
6 months ago
E
Novice II
elliotmiNovice II
asked in HTML & CSS

Central Repository Preview URL resetting

Hi,  I’m trying to iFrame a piece of xAPI content hosted within the central repository into a piece of learning.  At first it works, however, after approximately 12 hours I then receive a ‘401’ error message.  It appears that the preview link I’m using is a temporary url which refreshes every 12 hours.  Is there a way to get the preview url link to be static so the xAPI content remains available within the learning content?

7
E
Novice II
6 months ago
A
Novice I
anna.zhangNovice I
asked in HTML & CSS

CSS Code to change the check circle icon colors

How to use the CSS code to only change the two check circle icon colors of the training materials status (Activity in Progress and Activity Completed)?  

2
A
Novice I
6 months ago
I
Novice II
idalissesNovice II
asked in HTML & CSS

How to format subtitles in a widget

Hi! I’m trying to make the text smaller and the weight lighter in the font of these custom widgets. Could anyone share the CSS for this? Thanks! 

15
gstager
Hero III
6 months ago

Badge winners

Show all badges
Terms & ConditionsCookie settings