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.

  • 438 Posts
  • 2,339 Replies
438 Posts
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Translucent help balloons

/*translucent balloons*/div.bg-main.color-white.docebo-balloon {    opacity: 75% !important;} 

888
Bfarkas
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Adjust Logo Header

We wanted to make some changes to the main header where the logo resides. We felt the logo was a bit too small and wanted to make it slightly more prominent but not too extreme. We also canned the global search altogether.We’ve run with this for a few months now without finding anything that negatively impacts our platform but as always - if you implement this for your own environment - be sure to be on the lookout for glitches it may cause on your platform.Here is what we did if there is anyone else out there looking for a similar adjustment.This allowed us to go to a rendered size of 150w x 70h logo vs the default which says max: 380x72 but the rendered size seems to be a bit less than that so we made this adjustment./** Change Site Header Height and Logo Adjustment **//** Again - not too much bigger **//** This refers to logo itself **/doc-layout-internal-header .internal-header-logo a img { height: auto; max-height: none !important; width: 150px; }/** Removal of the global sea

1533
Bfarkas
Hero III
2 years ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Compactify / opacify login screen

/*compactify cookie popup*/gdpr-policy-banner.bg-white.open { padding-top: 5px; padding-bottom: 5px; opacity: 0.8;}/*transparent sign-in popup*/div.external-simple-signin { opacity: 0.8;}/*transparent sign-in top bar - not working div#doc-layout-header-fixed.doc-layout-header-fixed */div#doc-layout.doc-layout.doc-layout-external-simple header#doc-layout-header.doc-layout-header { opacity: 0.8;} 

560
lrodman
Guide II
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Modifying the Numeric Rating Position

I have often been annoyed by how tight this is to the stars.This is at the end.Annoyingly Tight ValueIf you are as well, I offer two solutions.Solution 1 is to simply hide the value./** Hide the numeric course rating value **/.shown-rating-value { display: none;}Hidden ValueThe second is to move it over a little if you would prefer to keep it./** Move the numeric rating value over **/.shown-rating-value { margin-left: 10px;}Shifted ValueAs always, test for any conflicts in your platform.Hope this helps someone today.

312
Bfarkas
Hero III
2 years ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Replace course completion image

/*fancier course completion screen*/div.complete-course-icons { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/course-completion-banner.png) no-repeat; margin-left: 20%; margin-right: 20%; margin-top: 8%; height: 300px;}div.complete-course-icons em.fa.fa-trophy.gm-yellow { visibility: hidden !important;}div.bg-white.chapter-viewer__body.tile-background div.course-completed-ready.ng-star-inserted { margin-top: 0px; } 

1313
Bfarkas
Hero III
2 years ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Hide the Folders on the Training Materials page

Do you find folders unnecessary on this page / do they mess up your mobile phone access to this page?/*hide folders in course creation -> training materials tab*/div.player-arena-overall-container div.row-fluid div.span4 { visibility: hidden !important; width: 1px !important;}div#player-lo-manage-panel.player-arena-board div.row-fluid.player-lo-manage-header div.span4 { visibility: hidden !important;} 

643
Bfarkas
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Animated Border

This is the promised write-up based on the following post. @dklinger @Adam Ballhaussen Here is the look based on some additional tweaking. I chose to thicken the border and added my previous barrel text into the div. I also chose to change the color of the barrel text on hover with the border animation.As expected, there was some tweaking to be done in order to make this work in Docebo. For starters, Docebo did not like the use of the ampersands  &:hover::before, &:hover::after  and I have found that sometimes it will choke on the code when declaring multiple selectors so I separated them and typed it all out.The other main modification I made is the creation of the magicBorder class. I did this so that I could isolate this particular div and not have magic borders all over my platform. Here is how the CSS looked in the end./** Test Border Magic **/div.magicBorder { position: relative; width: 90%; height:90%; margin-left: auto; margin-right: auto; margin-top:

1244
Bfarkas
Hero III
2 years ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Slimmer, opaque cookie banner

/*shrink down cookie banner*/gdpr-policy-banner.bg-white.open {    padding-top: 5px;    padding-bottom: 5px;    opacity: 0.7;}

630
lrodman
Guide II
2 years ago
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

1016
gstager
Hero III
2 years ago
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

944
Bfarkas
Hero III
2 years ago
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
2 years ago
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;}

1072
lrodman
Guide II
2 years ago
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 ;)

491
gstager
Hero III
2 years ago
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;}

780
lrodman
Guide II
2 years ago
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?  

832
lrodman
Guide II
2 years ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS
CSS: Is it possible to replace the skills illustration?

Thanks!

260
lrodman
Guide II
2 years ago
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
2 years ago
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….

1666
Annarose.Peterson
Hero III
2 years ago
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!

857
gstager
Hero III
2 years ago
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

2175
Annarose.Peterson
Hero III
2 years ago
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;}*/ 

47424
gstager
Hero III
2 years ago
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.

2038
pmo
Docebian
2 years ago
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

Badge winners

  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    kschweigerhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Sarahhhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    anna.messnerhas earned the badge Product Q&A Influencer
  • Product Tips & Tricks Influencer
    elamasthas earned the badge Product Tips & Tricks Influencer
Show all badges
Terms & ConditionsCookie settings