Skip to main content
Design & Layout

A Brave New World - the ultimate customization for your Docebo login experience.

  • November 13, 2024
  • 28 replies
  • 3130 views
Show first post

28 replies

ana.sorensen
Docebian

​@IanMonk ​@JZenker ​@lrnlab 

Disregard that reply to Ian above – I can’t delete the comment, but I realized that we made a few tweaks to the original CSS in the Custom CSS to Push Your Custom Page to the Front section that I didn’t catch when I first read through both snippets. (Sorry, need to be better about finishing my coffee before I dive into the CSS fray.)

Would you all mind testing this new snippet out? It has a couple of adjusted CSS selectors that play better with the new admin center UX. You should just be able to delete the old CSS from that Custom CSS to Push Your Custom Page to the Front section above and replace it with this:

/*External Catalog Adjustments*/
/*External Catalog Adjustments*/
/*External Catalog Adjustments*/
/*Force Public Catalog Pages to show without click*/
/*Hides Tabs on External Login Page*/
doc-layout-external-ecommerce .tabs-manager .tabs-labels {
  display: none;
}
/*Hides the content of the first page (catalog page)*/
doc-layout-external-ecommerce .tabs-manager .tabs-content > tab:first-child .tab {
  left: -100px;
  z-index: 1;
  opacity: 0;
}
/*Reveals content of last custom page*/
doc-layout-external-ecommerce  .tabs-manager .tabs-content > tab:last-child .tab {
  left: 0;
  z-index: 2;
  opacity: 1;
  position: fixed;
  visibility: visible;
}
/*Change the container space of the tab to fill the height of the browser.*/
doc-layout-external-ecommerce  .tabs-manager .webpage-content {
  min-height: 100vh;
  height: -webkit-fill-available;
}
/*Ensures the custom page content is displayed correctly. Can be adjusted to your needs*/
doc-layout-external-ecommerce .tabs-manager .webpage-content iframe {
  position: fixed;
  top: 0;
  left: -1px;
  width: calc(100vw + 2px);
  height: 100vh;
  overflow: scroll;
  padding: 0px;
}
/*Hides Docebo Footer - not required to work*/
doc-layout-external-ecommerce #doc-layout-footer {
  display: none !important;
}
/*Small structural change for browsers using languages that read right to left*/
[dir=rtl]doc-layout-external-ecommerce .doc-layout-external-header {
  width: auto;
} 
/*End External Catalog Adjustments*/
/*End External Catalog Adjustments*/
/*End External Catalog Adjustments*/

 

Let me know if that works! I’ll tap Patrick to update the original guide as well. If there’s any issues with this new snippet, give me a yell and we’ll do our best to help figure out an alternate solution.

lrnlab
Hero III
Forum|alt.badge.img+10
  • lrnlab
  • Hero III
  • June 25, 2026

Hi ​@ana.sorensen thanks for the update. It’s almost there. I can now see the public page first without having to click however the page renders behind the top built-in banner where you see the logo on the left and the sign in button on the right. Are you able to figure that part out?

Tried playing around with z axis settings but had no luck. Feles like we need to adjust the HTML to include some padding at the top.

Thank you.

ana.sorensen
Docebian

Hi ​@ana.sorensen thanks for the update. It’s almost there. I can now see the public page first without having to click however the page renders behind the top built-in banner where you see the logo on the left and the sign in button on the right. Are you able to figure that part out?

Tried playing around with z axis settings but had no luck. Feles like we need to adjust the HTML to include some padding at the top.

Thank you.

 

Hm! That’s an interesting one. Is there any chance you could send a screenshot of what you’re seeing?

Terms & ConditionsAccessibility statement