Auth0 Home Blog Docs

Embedded Lock remove grey box

auth0-lock
embedded-lock
ui

#1

I have lock embedded into my login page, I’ve disabled all the images and logo words but still keep getting this grey box at the top of my login DIV.
Any ideas how I can remove this?

var options = {
  languageDictionary: {
    title: ""
  },
  container: 'hiw-login-container',
  theme: {
    labeledSubmitButton: false,
    logo: "",
    primaryColor: "green",
    authButtons: {
      connectionName: {
        displayName: "...",
        primaryColor: "...",
        foregroundColor: "...",
        icon: ""
      }
    }
  }
};

![alt text][1]


#2

That would likely be a container that is a part of Lock, in order to accommodate the logo. You have the option to override css to get rid of that, however that isn’t recommended as future versions of Lock may not be compatible with your overrides.

https://auth0.com/docs/libraries/lock/v10/ui-customization#overriding-css

If you wish to have a customized UI that isn’t supported by Lock, I suggest using the UI-less Auth0.js library to implement your custom UI.

https://auth0.com/docs/libraries/auth0js/v8


#3