Skip to main content

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.

  • 441 Posts
  • 2,348 Replies
441 Posts
J
Contributor I
JavierPuertasContributor I
asked in HTML & CSS
Footer overlapping widget

Hello everyone, I am organising one of the pages I am working on by using CSS. The problem comes since the footer stands in the middle of the page after doing some changes. It is actually quite weird because it is behind the calendar widget but on top of a catalog widget. I have tried to use the code that you can find below but the footer remains still there:/*Code to put the footer at the bottom of the page*/#doc-page-32 div.doc-layout-common-footer {  position: fixed;  bottom: -500}Has anyone had a similar problem? You can see a pic below:Thank you all in advance for your help. 

1598
gstager
Hero III
2 years ago
caycocho
Influencer I
caycochoInfluencer I
asked in HTML & CSS
Help needed! Looking for a CSS script

Hello,Can anyone share the CSS script to change the login box background to semi-transparent?I tried looking for it in the community but no success.Thank you for the attention.Kind regards,Caesar

863
caycocho
Influencer I
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Animation Idea Series

As I have shared before - I have been more of a JavaScript guy and would have gladly put those skills to work in Docebo. Since that is not possible - it meant trying to make some things a bit more interesting with the use of CSS.So that’s what I set out to do. I started out by sharing the blinking dot idea which caused me to sort of inspire myself - LOL - to put together a little series of ideas that hopefully helps lessen the learning curve and inspires some of you to dig in as well. I am an advocate of lifelong learning so don’t be surprised to hear me attempt to encourage you all to keep pushing that envelope. This would be one such attempt. If I can do it - so can you!These ideas are not polished products but basically just ideas in their raw form to help others see some possibilities. The exact code I used is provided in every example for both the CSS and HTML portions of the ideas. Take them and tweak them. Mix them together. Make them your own. I did not do extensive testing in

7643
pmo
Docebian
2 years ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS
Use CSS to hide Not yet awarded Badges

Hi EverybodyIs there a way to use CSS to hide this section of the widget?I am aware of the unique widget number and refer to it, can’t find a way to refer to this object.Anybody tried and succeeded? Thanks 

702
gstager
Hero III
2 years ago
J
Novice III
Jenny EngNovice III
asked in HTML & CSS
Window notification pop-up for newly created pages

Window notification pop-up for users’ first-time visit/access to a newly created page - is this possible? anyone have done this before and/or have suggestions?

430
J
Novice III
2 years ago
Katie C
Katie CNewcomer
asked in HTML & CSS
Changing Catalog Image Aspect Ratio via CSS?

Hey there! Upper management would like us to make Docebo look more like our new AEM-built websites...their main focus is to have the Docebo catalog images have the same look and feel as carousel images being used on our websites.  Docebo’s catalog images are 2:1, while our AEM website carousels support 1:1. Is there a way to adjust how Docebo’s catalog images are displayed so we can accommodate management's request? The vertical, rectangular catalog cards are fine, we’d just need to make the card images square versus elongated horizontally.  Thank you in advance for your insights and expertise! 

592
Katie C
2 years ago
Lucy.blake
Helper II
Lucy.blakeHelper II
asked in HTML & CSS
Polls in notifications

Has anyone tried to embed a poll in a html email notification. I don’t just mean a link to a poll but an actual poll embedded. I want to make the poll as easy to answer as it’s for people who are not engaging with Docebo as much as others. Anyone got any ideas of how to do this?

504
Lucy.blake
Helper II
2 years ago
C
cferreraNewcomer
asked in HTML & CSS
CSS Coding to Remove Registration Code on Extended Enterprise

Hello -Does anyone know what CSS coding to use to remove the registration code requirement on an extended enterprise?

1376
sigamoline
Helper II
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Scared To Try CSS? --> Start By Dipping Your Toe In The Water

Are you worried that if you so much as even touch the Custom CSS box that you’ll have some explaining to do? It would only take a single keystroke to drastically change the look and feel of your Docebo platform.I totally get why you don’t want to be that person. #gulp #shiftyEyesCSS tells the HTML how to look so don’t forget that there is another half to this equation and they must be in agreement or things will not turn out as planned.It is pretty normal to want to test the water before getting in the pool so here are a few tips for you to help make it a little easier to get in the CSS water. Remember to Separate Things For the same reason we keep milk in a different jug than our Diet Coke or our orange juice, we should try to keep our blocks of custom CSS separated from other blocks as well. If we don’t  - bad things can happen. One way to go about this is to provide a container for your code and be sure to give it a name not likely to be found elsewhere in Docebo. Our container is o

2853
gstager
Hero III
2 years ago
S
sdespiritoNewcomer
asked in HTML & CSS
CSS for My Activities tabs

The Certifications tab on the My Activities page was renamed in our environment through the Localization Tool.  For a domain we’d like to rename it.  Does anyone have the CSS code to change it?  TIA

1071
S
2 years ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
LottieFiles and you

Anyone figure out how to leverage these neat little animations coming out of the lottiefiles space?I have figured out how to add subtle animated gifs….but that is not the same….

170
dklinger
Hero III
2 years ago
S
SasikumaarNewcomer
asked in HTML & CSS
Hide upload option for Avatar image in My Profile

Dear Team,Our platform is used by internals and externals. Is there possible to hide the “Avatar image upload” on my profile page? If yes, it could be better option for us.

1023
gstager
Hero III
2 years ago
abaumgard
Influencer II
abaumgardInfluencer II
asked in HTML & CSS
Learners cannot view beyond the first page of a PDF document via HTML pages when using an iPad

We have several users that do not have their own laptops, so we provide iPads for them to use to access Docebo.In several courses, we have policies that we require the learners to read, which consist of PDF links provided via iFrame using an HTML page activity. However, we have found that if the PDF consists of multiple pages, the learners can only view the first page via the iFrame when viewing it on the iPads.Does anyone know of a solution that would allow the learners to scroll through all of the pages of the PDF via the HTML page using an iPad?Thank you

9731
lrnlab
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Accordion Effect - Animation Idea #9

In this example, we have a set of five divs arranged horizontally. When you click on a colored div and hold, it will reveal the “rest of the box”.This is perhaps an “expansion” of the click to reveal box in Idea #8.Someone more fluent than I am may have an easier way to pull this off but I’ve been having a good time playing around with these ideas and thought many of you might benefit from that as well.This is what I ended up with.CSS Accordion EffectHere is the code for you to play with./* Accordion *//* This is the CSS for the Branding and Look section */.accBox { width: 25px; height: 175px; margin: 25px; padding: 10px; position: absolute; white-space: nowrap; top: 0px; color: #ffffff;}#one { left: 0px; background-color: #000000;}#two { left: 45px; background-color: #ff0000;}#three { left: 90px; background-color: #00ff00;}#four { left: 135px; background-color: #0000ff;}#five { left: 180px; background-color: #5f6369;}#one:active { width: 250px;}#one:active ~ #two

6472
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Card Cycle Effect - Animation Idea #7

In this example, I tried to do something a little bit more complicated and come up with an effect that might resemble cycling through a set of flash cards.The tricky part of this was that using the z-index - which was my first idea - was not cooperating well. So I ended up working with the opacity instead. I figured it did the job well enough.This animation is set to allow you a full 5 seconds to view each of 5 cards.CSS Card Cycle EffectDue to the timing nature of this particular effect - it is only meant to cycle once through the deck. The animated gif above simply captures it once through and repeats it for you.Here is the CSS for this one…/* Card Shuffle *//* This CSS goes in the Branding and Look Section */.cards { width: 250px; height: 170px; margin: 40px; padding: 20px; color: white; font-size: large; position: absolute; box-shadow: 2px 2px 5px grey;}#card1 { background-color: green;}#card2 { background-color: blue; animation-name: shuffle; animation-duration: 2s; a

11391
S
Helper II
2 years ago
C
clare.barberNewcomer
asked in HTML & CSS
External HTML and CSS writers

We are a very small charity and none of us overly good with IT systems. We have set up and have been using Docebo for a number of years now, but there are issues we have with the system that i am sure could be easily resolved with some coding and re-design, non of us however are competent to do this ourselves. Has anyone used an external body to do this that they could recommend? Unsure if Docebo offers this service itself?

1396
eleonora.maggioni
Novice II
2 years ago
janina.zielecki
Influencer III
janina.zieleckiInfluencer III
asked in HTML & CSS
Shortening the list of elements shown in the "Courses and Learning Plans" widget

Hi everybody,has anyone ever tried to shorten the number of list items shown in the “Courses and Learning Plans” widget? I would like to have the button “Load More” already appear after one row of list items. 

1936
P
Novice III
2 years ago
K
Keith BalaberdaNewcomer
asked in HTML & CSS
Remove Expiration Date from Courses

Can any provide assistance with CSS code to remove the “Expiration Date” column from Courses, within Activities? During data migration this field was populated with the end enrollment date in our past LMS. Being a new LMS, users are confused by this column and think the course is expired and needs to be renewed.

1274
K
2 years ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS
Hiding catalog item count with CSS?

We have discovered that our catalogs when filtered show the incorrect number.  When I filter the catalog the item count will update to a new number, for example, 18 items, but when I scroll down the catalog, there are waaaay more than 18 items.I have a ticket open to figure out this issue, but curious, would anyone know if it is possible to just hide this item count with CSS?  

1888
S
Contributor II
2 years ago
agilleland
Novice III
agillelandNovice III
asked in HTML & CSS
How to Remove "Click Here" box and have entire image as the click box

We are looking to get ride of the click box to access a different page from an icon.  We realize we would need to use HTML or CSS to do it.  Does anyone know what code we could use?  We aren’t super versed in HTML or CSS. 

411
lrnlab
Hero III
2 years ago
N
Novice II
natticattNovice II
asked in HTML & CSS
Safari Not Reading Custom CSS

I’m testing my custom layouts/code in different browsers. One of the issues I’ve run into is that Safari doesn’t use certain pieces of my custom code. Specifically, the code concerning styling of specific pages (example: #doc-page-209) is skipped/ignored. However, all other custom CSS is applying correctly.Is this a known bug? is there are work around or some additional code I need to apply just for Safari?

12897
gstager
Hero III
2 years ago
J
Novice III
Jenny EngNovice III
asked in HTML & CSS
Where to find existing HTML & CSS code lines?

Hi there,Brand new here in the community, new to the possibility of using HTML & CSS to customize page, HTML/WYSIWYG widget, as well as look & feel for the platform as well as for courses. Currently learning CSS on the go, have basic knowledge of HTML. My questions are very foundational.Where/how can I write/change a page’s HTML/CSS line? I’ve created the page and would like to customize further. For HTML/WYSIWYG widgets, is it possible to remove the “box” for the particular widget?Thank you!

86812
N
Novice II
2 years ago
N
Novice II
natticattNovice II
posted in HTML & CSS
HTML/CSS Limitations

Hello!I recently began working with Docebo as a designer for my company. The goal was to do a custom design for different “hub” pages underneath a fairly typical landing page/dashboard and utilizing Docebo’s content assignment and management features. The problem I’m running into is that it seems as though certain types of CSS do not work within the HTML/WSIWYG widgets which will make or break the design. For example:Any attempt to center divs (not just text), within a widget seems to ignore whatever CSS class or ID I set. The best I can tell is that it seems to be related to site wide styles for divs and/or the clearfix styles. While there are more numerical, and less responsive, ways of centering I worry about the maintenance time this creates going forward.Position:Sticky also seems to be ignored regardless of how I try to implement it. This is a much bigger issue than centering.

1612
gstager
Hero III
2 years ago
lrnlab
Hero III
lrnlabHero III
posted in HTML & CSS
How to Center Widget Titles

Copying this original post to this group:Thanks again @gstager 

490
lrnlab
Hero III
2 years ago
K
Novice III
kjo133Novice III
asked in HTML & CSS
Can this course layout be achieved?

Hello all! I am new to Docebo and am looking to put together a site similar to the design attached.  I’m looking to have the five main categories at the top.  When you click on a category like ‘Technology’ for example, it would then take you to a page where you would be able to select from ‘Technology’ topics, and then clicking on a topic would take you to a page with the actual courses.  So the route a user could take would be Course Page→ Technology Page → Technology Topic Page → Technology Course. Based off the screen shot of my mockup, would this be do-able and if so what would be the best route?  I was playing around with the Categories widget, but it would just show the courses within that Category.  Is there a widget that would display the five categories in a row like I have here, or would that be best handled with custom html and css? Thanks for any advice! Kevin 

1603
Bfarkas
Hero III
2 years ago

Badge winners

  • Product Q&A Influencer
    Cindy Moorehas earned the badge Product Q&A Influencer
  • Let's Talk Shop Genius
    gstagerhas earned the badge Let's Talk Shop Genius
  • Product Q&A Genius
    JKolodnerhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    kjandersonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings