Hosted Pages Styling

Help
1

Hello,
I’m trying to customize the hosted pages: Login and Password. I’m trying to use our logo. It seems that no matter its natural size, Lock tries to resize it to height 55px. So our 233x42 logo is cutoff because it’s too wide. If we create a taller logo, it will be even more cut off (because the ratio is kept). If we decrease the height, Lock will resize it to 55px anyway.

I tried to add .auth0-lock-header-logo as embedded style, but it doesn’t seem to take effect. https://auth0.com/docs/libraries/lock/v10/ui-customization suggests it’s possible to customize the CSS, but doesn’t say how.

What’s the recommended way to use a wide logo? Thank you.

2

You could adjust the required height and width of the logo by modifying the lock classes to what you need. Make sure to add !important rule for the CSS effect to supersede what Lock does.

Try the following:

 .auth0-lock-header-logo {
        height:  40px !important;
      }
3

Thank you, Menon. The !important was the key.