Branding of Universal Login

Help
1

Hi!

We’re using Universal Login from Auth0 (the new one, not classic). We’de like to change the primary color of the Login Button to blue including the text color will be white instead of dark grey.

We’vechanged it:

branding
branding739×388 19.8 KB

The preview via the auth0 cli looks promising as well:

auth0-template
auth0-template693×504 16.8 KB

auth0 branding templates update --tenant …

But navigating to our login page looks the following:

universal-login

→ The text color differs from the preview. Do we have to change anything else to get a white text color for the Button?

Thanks!

4

Hi @urbanisierung ,

Thank you for raising this topic on Auth0 Community!

I tested this issue on my end and could not repeat the same.

If you have customized your New ULP branding page template with Management API , could you please share the details of the template?

Maybe it worth trying to use the default template. To do so, use the delete endpoint.

curl --request DELETE \
  --url 'https://YOUR_DOMAIN/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN'

Please keep us updated on how it goes. Thanks!

2 Likes
5

Hi @lihua.zhang,

Thanks for your response! Here’s the custom template we’re using:

<html>
  <head>
    <link
      rel="shortcut icon"
      href="https://.../favicon.ico"
    />
    {%- auth0:head -%}
    <title>Log in</title>
    <style>
      @font-face {
        ...
      }
      body {
        font-family: 'IBM Plex Sans', sans-serif;
        box-sizing: border-box;
      }
      .footer {
        background-color: rgb(120, 120, 120);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px 0;
        width: 100%;
        color: white;
        /* Use a high z-index for future-proofing */
        z-index: 10;
      }
      .footer ul {
        text-align: center;
      }
      .footer ul li {
        display: inline-block;
        margin: 0 4px;
      }
      .footer ul li:not(:first-of-type) {
        margin-left: 0;
      }
      .footer ul li:not(:first-of-type)::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 4px;
        height: 4px;
        margin-right: 4px;
        background-color: white;
        border-radius: 50%;
      }
      .footer a {
        color: white;
      }
    </style>
  </head>
  <body class="_widget-auto-layout">
    {%- auth0:widget -%}
    <footer class="footer">
      <ul>
        <li><a href="...">Privacy Policy</a></li>
        <li>
          <a href="...">Terms of Service</a>
        </li>
        <li><a href="...">Signup</a></li>
      </ul>
    </footer>
  </body>
</html>

It’s basically just a custom Font and an additional footer. The CLI preview looks correct, but using the regular Login Page is not behaving like the preview (at least for us).

Any idea what could be wrong?

Adam