Lock: Hide logo and title

Created on 20 Oct 2016  路  4Comments  路  Source: auth0/lock

Thanks for providing auth0-lock, I've been able to integrate it in a login flow 馃槉

I'm displaying the form inline (using the container property), and now for better integration I'd like to get rid of the logo and title which are redundant with the website header as show below. I.e in this current form, only the Facebook button should be visible. How can this be done? I tried things like setting languageDictionary: { title: null } and theme: { logo: null }, but that didn't help.

Lock version: 10.4.0.

screen shot 2016-10-20 at 15 56 43

Most helpful comment

Thanks! I got it working in React-boilerplate with a :global pseudo selector in front (although I don't know much about CSS and pseudo selectors, it works).

All 4 comments

you can hide it with CSS if you need.

something like

.auth0-lock-header{
  display:none;
}

should do the trick. Note that the HTML structure and classnames might change in the future (nothing in the backlog but it is a possibility) so have it in mind to check for any mayor release.

Thanks! I got it working in React-boilerplate with a :global pseudo selector in front (although I don't know much about CSS and pseudo selectors, it works).

There's one problem with that. If you hide the entire header, then if you click on "Forgot password" - there won't be a "back" button (which is inside the header). Any thoughts on how to fix it?

@ecdeveloper the logo has a class as well, so you could decide to only hide that using display: none

Was this page helpful?
0 / 5 - 0 ratings