Customize Logo Height when Using a Custom Logo in New UL Pages

Knowledge Solutions
, ,
1

Problem statement

When using a custom logo for one of our applications, as explained in the Auth0 documentation Customize New Univeral Login Pages - CSS Customization, there are issues with the height of the logo.

Once the custom logo is specified by adding class=“_use-custom-prompt-logo” in the element, the height that is set in the No-code customization options in the Dashboard is not applied anymore. The height appears to be hardcoded to 60px.

Troubleshooting

Here’s the HTML from the element with id=“custom-prompt-logo”:

<div title="My Test Tenant" id="custom-prompt-logo" style="width: auto !important; height: 60px !important; position: static !important; margin: auto !important; padding: 0 !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important"></div>

Because of the !important tags, it’s not possible to set the height for that element id.

Cause

Due to the !important tags, within the HTML for the element, it is not possible to set the height for that element id. There is a backlog item to fix this.

Solution

We recommend using the max-height to set a smaller height or min-height to set a height above 60px, like in this example:

#custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png';);
      min-height: 80px;
      }