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
susan2000
Contributor III
susan2000Contributor III
asked in HTML & CSS
Increase asset/view height to fit portrait files in C&S channel

Hello CSS peeps!I want a letter/portrait orientation channel PDF or Document to display at full height of the image instead of the top portion with a scroll bar while keeping the image at full width of the window. (without clicking full page view)I tried .slides-player__wrap {height: 100%;} and that sort of does it but overlaps the div/tile below it instead of pushing page content down.Anyone know CSS for doing this? 

12412
Bfarkas
Hero III
2 years ago
K
KristianSchneidNewcomer
asked in HTML & CSS
Putting 'Log-in as this user' button in User Personal Summary

Hi team,In the power User section of our LMS, there is a button in the top right that looks like this: “Log in as this power user”This only appears on the Power User page, and not a normal, typical user. I was wondering whether there was a way for this button to be added into the User Personal Summary section for all learners, to allow efficient user impersonation without having to back out the page I look forward to your response. Many thanks Kris

381
Bfarkas
Hero III
2 years ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Really cool login screen (floating transparent door)

/*transparent sign-in popup*/div.external-simple-signin { opacity: 0.8; background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/login-screen-glass-door.png) no-repeat center; background-color: transparent; background-size: contain;}/* transparent background password input */input#ui-input-password-0.ui-typography-body { background-color: transparent;}div.form-button.login-button button.ui-ripple.ui-typography-button { background-color: transparent; color: black}div.sso-buttons button.ui-ripple.ui-typography-button { background-color: transparent;}/*compactify cookie popup*/gdpr-policy-banner.bg-white.open { padding-top: 5px; padding-bottom: 5px; opacity: 0.8;}https://easyupload.io/7dhv9a video 

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

1363
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:

1254
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 ;)

501
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;}

790
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

2205
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;}*/ 

47624
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.

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