After setting and verifying a custom domain, i am trying to customize my login page.
Following the documentation (Customize Universal Login Page Templates), i added the simplest example given by the doc.
<!DOCTYPE html><html>
<head>
{%- auth0:head -%}
</head>
<body>
{%- auth0:widget -%}
</body></html>
But when i preview, the liquid cod acts like as a string
How can i fix this?
Hi @rafael4
Welcome to the Auth0 Community!
Thank you for posting your question. The provided code snippet and documentation link refer to the Universal Login Page Templates, which can be updated only via Management API. To use this feature, you’ll need to add a custom domain.
The screenshot you’ve provided is from the Classic Universal Login Page → Customize Classic Login Pages
They do not use liquid syntax and entirely rely on JS customization.
I hope this will help you!
Dawid
Thank you for your reply @dawid.matuszczyk.
One other question… is there any way to check a preview for the Universal Login Page templates, as it is just updated via management API?
If you will use Auth0 CLI, you can use a code editor and storybook to edit and live preview the page → https://auth0.com/docs/customize/login-pages/universal-login/customize-templates#using-the-auth0-cli-
I dont know if i am doing the right way, but the preview image does not look like what happens when i actually enter the login page in the browser
The widget should not be on center… should looks like in the first screen
<!DOCTYPE html>
<html lang="{{locale}}">
<head>
{%- auth0:head -%}
<style>
html, body {
height: 100%; /* Make sure html and body are full height */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
overflow: hidden; /* Prevent scrollbars */
}
body {
background-image: url("https://imagizer.imageshack.com/img923/5390/cfBpur.jpg");
background-size: cover;
background-position: center center; /* Center the background image */
background-repeat: no-repeat;
}
.prompt-wrapper {
position: absolute;
top: 50%;
right: 0%; /* Adjust this to align with the white background in your image */
transform: translate(0, -50%); /* Center the div on the page vertically */
width: 480px; /* Width of the login form */
background-color: rgba(255, 255, 255); /* Semi-transparent white background */
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 8px;
}
@media (max-width: 768px) {
.prompt-wrapper {
right: 5%; /* Less space from the right on smaller screens */
left: 5%; /* Prevent the prompt from sticking to the edges on smaller screens */
width: auto; /* Adjust width for smaller screens */
margin: 0; /* Remove margin for smaller screens */
}
}
</style>
<title>{{ prompt.screen.texts.pageTitle }}</title>
</head>
<body class="_widget-auto-layout">
{% if prompt.name == "login" or prompt.name == "signup" %}
<div class="prompt-wrapper">
{%- auth0:widget -%}
</div>
{% else %}
{%- auth0:widget -%}
{% endif %}
</body>
</html>
