New universal login customize text and border colors

Help
,
1

Hi,
I am trying to customize the colors of the new universal login.
I am able to modify the color of the button, but i can’t find a way to modify the
color of the link and of the input borders.

Screenshot from 2021-02-08 13-40-50

I don’t want to make custom template.

Thanks!

1 Like
3

Hi @oli-xentraffic,

Welcome to the Community!

At this time, customization for the New Universal Login Experienced is limited. You can change the background color and the color of the submit buttons, and the text displayed, but you cannot add your own CSS for things like the input borders.

If you’d like more customization, you can switch to the Classic Login Experience. Go to the “Login” tab and toggle on “Customize Login Page”.

Select “Lock” from the default templates dropdown.

You can then add a style tag to add your own CSS without needing to build an entire login page.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>
<body>
  <style>
    .auth0-lock.auth0-lock .auth0-lock-input-wrap.auth0-lock-input-wrap-with-icon {
      border-color: red;
    }
  </style>
...
1 Like
4

Thanks!
But i don’t like the look of the classic login experience!

3 Likes
5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.