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.

  • 480 Posts
  • 2,467 Replies
482 Posts
Adam Ballhaussen
Guide III
Adam BallhaussenGuide III
posted in HTML & CSS
CSS Border Animations and Properties [Medium Repost]

 👋 Hey there Docebo Community, and happy Friday! Check out this awesome post on Medium: 🔗 Fantastic CSS border animation This post popped up in my inbox today and I found it extremely interesting. I’m not quite savvy enough with CSS to understand everything this article covers in detail, but we have some experts in this community (I’m looking at you @gstager @Bfarkas @nick.tosto) who I’m sure could do some pretty awesome things in their platforms with some of the code shared in the post. Here’s a snippet I found to be really cool: Border length changes  div { position: relative; border: 1px solid #03A9F3; &::before, &::after { content: ""; position: absolute; width: 20px; height: 20px; } &::before { top: -5px; left: -5px; border-top: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); } &::after { right: -5px; bottom: -5px; border-bottom: 1px solid

1056
gstager
Hero III
Jay.Kolbenson
Docebian
Jay.KolbensonDocebian
asked in HTML & CSS
Editing Privacy Policy Agreement Page CSS

Hello,I am trying to remove some text from a custom privacy policy acknowledgement page for a specific Extended Enterprise. I’m not a CSS expert but I think I understand the concept. As a first step I’m trying to identify the target page and I see people are doing this with the browser inspector tool. However I cannot find the page ID when I do this.I am hoping to remove, hide, or turn white so you cant see the line under the first line. It is the line that says “ you must read and agree to the Privacy Policy in order to proceed”Yes, I know you can use the localization tool however we have other Extended Enterprises that want to keep this so I was hoping to do this through custom CSS for this particular Extended Enterprise. Can anyone help get me started on how to get that page ID so I can call out that line and hide it?Thanks,Jay

994
Bfarkas
Hero III
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Recolor the gamification and virtual coach icons

I wanted to highlight these two icons more, to encourage more users to look at them. /*gold gamification icon*/.internal-header-gamification ui-button-icon button ui-icon span.color-neutral svg {fill: #d4af37 !important;}/*blue robot icon*/.internal-header-virtual-coach ui-button-icon button ui-icon span.color-neutral svg {fill: #133D8D !important;} 

801
gstager
Hero III
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Make the "My Home Page" titlebar (and other titlebars) more compact

/*shrink the "my home page" bar*/#page-title__wrapper.hyd-shadow-md.ng-star-inserted {     min-height: 50px !important;    height: 50px !important;}

1132
lrodman
Guide II
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Make the certificate html composer taller (full-page portrait editing)

/*portrait certificates full view*/#mceu_22-body.mce-container-body.mce-stack-layout { height:800px !important;}#mceu_33.mce-edit-area.mce-container {height:717px !important;}#mceu_33.mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe  {height:725px !important;} ps caught you Docebo its an iframe ;)

541
gstager
Hero III
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Make widgets closer together on homepage and other pages

/*make all UI boxes closer together*/.single-widget.ng-star-inserted {    margin-bottom: 10px !important;}

790
lrodman
Guide II
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
CSS: making the profile / avatar image larger

I’m trying to make my avatar image larger. div.avatar__image.ng-star-inserted {height: 80px important!; width: 80px important!; }div.avatar-clip.border-main.ng-star-inserted {height: 80px important!; width: 80px important!; } Not working, any idea why?  

942
lrodman
Guide II
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS
CSS: Is it possible to replace the skills illustration?

Thanks!

260
lrodman
Guide II
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS
looking to improve the "stream" view for channels and categories

There is a lot of white space and we have nice graphical assets.  I’d like to shrink down the white space and make the images bigger among other things. I can’t find a guide on this. I’m sure other users have done this too. 

360
lrodman
Guide II
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
CSS Challenge/Trickery/I maybe a little lazy and wanted to see if someone else has fought it

Hi - I genuinely feel lame asking this, but I have a catalog widget that I am using in list mode and there are three things that I would love to tighten up with the experience.make that title a little smaller cut down on the spacing if possible remove the status from the widget all togetherWith an attempt to make the widget to the left scale better with the one that is “dynamic”.If some of you have fought this and have something that can come out of your backpocket? Maybe I can answer something for you soon enough?????Any help would be appreciated….

1696
Annarose.Peterson
Hero III
H
harriskoNewcomer
asked in HTML & CSS
Always show session join (auto expanded)

Hi, Looking some previous queries, people have been asking about having accordion elements default to being open. No solution has been posted. If there’s a CSS guru out there who’s had luck setting this to default to open it would be very much appreciated. Thank you!

867
gstager
Hero III
Jennifer.Petru
Novice I
Jennifer.PetruNovice I
asked in HTML & CSS
Business Case: 'Show only SSO buttons and Hide Login Form' ....but where to log in for Admins ?

 We use deeplinking quite a bit, which takes our users to the sign-on page for Docebo.  We’ve enabled SSO, and I know you can ‘Show only SSO buttons and hide login form’ and the users just click the SSO button and move forward to the course….However, Docebo reps have told us we need separate learner and admin accounts for our admin team...if we hide the login form, how should we as Super Admins log in?Thanks in advance for what is probably a very newbie question! Jen

2465
Annarose.Peterson
Hero III
lrnlab
Hero III
lrnlabHero III
posted in HTML & CSS
How to hide "remove from my Team" option for Managers

If you are like us, we do not let managers manage and update their own teams. This is usually done by user updates by a centralized admin team, or via a connector that automatically updates user profiles. We needed a way to prevent managers from removing users from their teams as this could affect things like reporting and assignments.Here’s a quick CSS snippet you can use to hide that option:/*Hide "Remove from My Team" in My Teams*/a.action-can_remove_relation {    display: none !important;}You can add this to your “7.0 Custom CSS” block under Configure Branding and Look. This code can also be used on sub-domains only if you prefer to have a group with the option to remove and another without.TIP: if you want to the code but make it ‘inactive’, you can “comment” it out by moving the “*/” to AFTER the last bracket…..it would look like this: /*Hide "Remove from My Team" in My Teamsa.action-can_remove_relation {    display: none !important;}*/ 

50624
gstager
Hero III
N
Novice II
natticattNovice II
asked in HTML & CSS
Internal/Bookmark Links not working

I’m attempting to create a link at the top of the page that will link down the page to a course catalog at the bottom of the page. Instead the link goes back to the homepage. I can’t quite figure out why this is and I can only assume its some kind of code in Docebo that’s causing the issue. Does anyone know why the code here wouldn’t work?<a href="#cataland"><img src="https://d36spl5w3z9i0o.cloudfront.net/files/g/e/genesyssandbox_docebosaas_com/userfiles/562892/PDS/catalog_leap.png" alt="Click here to go to the catalog" width="5792" height="468" /></a><!--Other Content Here--><div id="cataland"><img src="https://d36spl5w3z9i0o.cloudfront.net/files/g/e/genesyssandbox_docebosaas_com/userfiles/562892/PDS/catalog_land.png" alt="Partner Digital Catalog" width="5792" height="468" /></div>The code appears to work in other editors.

2298
pmo
Docebian
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. 

1658
gstager
Hero III
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
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

7923
pmo
Docebian
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 

762
gstager
Hero III
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?

460
J
Novice III
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! 

612
Katie C
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?

544
Lucy.blake
Helper II
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?

1476
sigamoline
Helper II
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

3163
gstager
Hero III
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

1181
S
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

Badge winners

Show all badges
Terms & ConditionsCookie settings