Auth0 Home Blog Docs

Login Page Lock Template: Customize Color in Top Section?

hosted-pages
lock-11

#1

Is there a way to customize the color of the top section of the lock template (where the logo and title is) for the login screen? I read through the documentation - I’ve adjusted the primary color, the logo, the title, etc., but unsure if, or how, it’s possible to customize the color of the top section. Any help would be appreciated. Thanks!

image


#2

You can add custom CSS to your template. If you add your CSS to the bottom of the page above the tag it will take precedence over the standard CSS.
You are exposed to your template breaking if Auth0 update their template layout but it is a work around

@media (min-width: 481px){ .auth0-lock.auth0-lock .auth0-lock-header-bg { background: green; } }

#3

Dont forget to add the “style” tags around this css line. They were removed from my previous post