Correct dimensions for custom login icon

[johnbillion]

Description

I'm attempting to implement a custom icon on the login screen, via the Icon URL field on the Auth0 -> Settings -> Appearance screen in the WordPress admin area.

This field recommends a size "less than 120px tall", but I'm struggling to find the correct icon dimensions and ratio. It appears that the icon's height is forced to 58px and its width is forced to auto, which results in strange behaviour when uploading an image that's too wide for the container.

Can you advise on the exact dimensions for the custom icon please? And can you consider an option to hide this icon and the Form Title value so that neither appear? That way, custom of the standard WordPress login screen icon can simply be used.

Environment

• WP-Auth0 version: 3.8.0
• WordPress version: 4.9.8

[joshcanhelp]

Hi @johnbillion, nice to see a familiar name using the plugin!

The embedded form that's there is built completely in JS and can be styled with either an external CSS sheet loaded on the login page (recommended) or using the "Login Page CSS" field under wp-admin > Auth0 > Settings > Appearance. Here's what worked for me:

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

Regardless of the CSS you use, make sure to turn off "Enable Gravatar Integration" on that same settings page or you get some interesting behavior.

The icon image description is unhelpful, I agree. I would stick with something square, that seems to work the best. Any size is fine, smaller the better ... I would recommend just using double what's enforced in the CSS, 116px square, to account for higher pixel density screens.

Let me know if there's anything else I can help with or if you have any feedback!

[johnbillion]

We went with full-on customisation in the end :-)

Thanks for the pointers about the custom icon. Some improvements to the helper text there would help a lot I think. Cheers!

[joshcanhelp]

Looks great! Thanks for the suggestion and checking back in.