Customize Sign in Page

Hi ​@ponnammal.sundaram, 

Yes, it's possible to add a solid color, an image, or even a video to the login page. The article below can help you with that:

https://help.docebo.com/hc/en-us/articles/360020125479-Configuring-the-branding-look-and-feel-of-your-platform#subtitle-4

And through CSS on that same page, you can create code to move the login box and even add a login image or manipulate the blocks. We developed this for two of our clients here in Brazil.
 

We offer this type of service/development for our clients here in Brazil, if you are interested.

I hope this helps.

Before diving into code to hide the hero banner, have you looked at the native layout options? Under Admin Menu (gear icon) > Configure branding and look > Sign In Page Background, you can switch away from the image/video layout to a solid color or the Basic page layout. This gives a minimal, clean layout natively and might remove the banner element you are trying to hide.

For your other question—moving the actual login information box—there isn't a native drag-and-drop setting for this. You will need to use Custom CSS. You can target the login container (typically the .login-wrap class) and use CSS properties like transform: translate() to shift its position horizontally or vertically.

When I've deployed custom login screens for organizations with specific branding requirements, we often use CSS to reposition the login box so it sits perfectly over a custom background image. The gotcha that catches everyone here is mobile responsiveness: if you force the box 400px to the right, it will likely fly off the screen on a smartphone. Always make sure to wrap your positioning CSS in @media queries so it only applies to desktop screens.

You can read up on the native background and layout settings here: Configuring the branding, look and feel of your platform

Let me know if you want to dig deeper into the specific CSS needed for this.

​@lhilario and ​@Moshe.Machlav - Thanks for the suggestion. I did check Docebo KB article and tried the solid color background, which looks very minimal and neat. But it is hiding the hero banner on the sign in page. I will explore further the CSS option. Responsive design is the catch here - I found that the sign in box doesn't fit properly in a mobile view

If your learners are primarily internal company employees, you might not need a login page at all. Instead of wrestling with custom CSS to hide the banner and fix mobile views, you can set up Single Sign-On (SSO) and enable the Automatic redirect to identity provider setting. This bypasses the Docebo login page entirely and takes users straight into the platform using their corporate credentials.

When I configure Docebo for corporate teams, we often start by trying to perfectly brand the login screen, only to realize the best user experience is skipping that page completely via SSO. It instantly eliminates all mobile layout headaches.

You can check out how the automatic redirect works in the documentation here: General guidance for SSO configuration

Are your users internal employees, or do you have external customers/partners who specifically need to see the native login form?