HI I have changed the logo and colors on the universal login but the changes are not showing when logging in

[sellochrismodise]

HI I have changed the logo and colors on the universal login but the changes are not showing when logging in, the changes are not showing on preview either. Here are the images of the changes that I have made:

Note: My App is a regular web app

that i am connecting to using lock.js

[rueben.tiow]

Hi @sellochrismodise,

To change the Classic Universal Login experience logo and colors, you will need to make changes to the custom HTML.

Specifically on lines 57-59 of the default template.

References:

• Lock Configuration Options - logo
• Lock Configuration Options - primaryColor
• Customize Classic Universal Login Pages with Lock or SDK

Also, please note that the Preview section may display old updates. So, in some cases, you might need to perform a hard refresh (cmd + shift + R) or click on another application on the drop-down menu.

Let me know how this goes for you.

Thanks,
Rueben

[sellochrismodise]

Hi I did make the changes suggested and the previews do have the correct output but when loading the login from my app it still doesn’t show.

Here is part of the code that initiates the log in I have //Omitted sensitive data:

Auth0 Login

<script>
var lock = new Auth0Lock('ipfcPErtSISw4■■■■2kN1GHBQTzt5m3Q', 'dev-w454lsi7gn4g0jtx.us.auth0.com', {
    auth: {
        responseType: 'token id_token',
        redirectUrl: //Omitted ,
        audience: //Omitted ,
    }
});

function login() {
    lock.show();
}
</script>

  <tr>
  <td width="20%">&nbsp;</td>
  <td width="60%" align="center"><img src="https://selbypro.co.za/SELBY-2024-full-logo.png" width="250" style="margin-top:20px;"><br><br>
  <td width="20%">&nbsp;</td>
</tr>
  
<tr>
  <td width="20%">&nbsp;</td>
  <td width="60%" align="center">
<br><br>	
<button style="background-color: rgb(9, 202, 217); border-radius: 10px; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; text-transform: uppercase;" onclick="logout()">Logout</button></td>
  <td width="20%">&nbsp;</td>
</tr>

<script>
function logout() {
    // Clear any user session data or tokens
    // Redirect to the Auth0 logout endpoint
    lock.logout({
        returnTo: //Omitted 
        client_id: //Omitted 
    });
}

[rueben.tiow]

Hi @sellochrismodise,

Thanks for the reply.

Could you clarify what you see on your application that differs from the preview?

Can you share a screenshot of what you see?