White button on Universal template?

Help
,
1

We use a primary color of #5680f5 in the universal template to style our Auth0 login form. However, the Auth0 UI renders dark type on our blue button.

To solve this, we tried using a custom CSS rule targeting button[type=submit], but this inadvertently makes other non-button text white as well.

Most of the examples on the Auth0 website show the main login button with white text. How do we configure this with our primary color?

Thanks,
-Nate

3

Hi @nrutman ,

Welcome to the Auth0 Community!

I tested this query on my end and the color on the Application match what’s showing here.

Here is the snippet of my script.

 <button
          type="button"
          id="btn-signup"
          class="btn btn-default btn-block" style="background-color:#5680f5">
            Sign Up
        </button>

Could you please provide your scripts in the universal template?

BTW, which web browser are you using?

Thanks!

1 Like
4

@lihua.zhang, thanks for the response.

As I mentioned, we’re using the Universal Login pages, so we only have access to an embed tag that looks like:

{%- auth0:widget -%}

I don’t think we have access to the button specifically, right? If we could either target only that button, or somehow wrap it with a custom identifier, that would make this very possible.

Do you have any suggestions for me?

Thanks,
-Nate

6

Thank you for the updates.

I see that you were trying to customize the New Universal Login page. I did some research. It looks like we cannot update the color of a submit button in this case.

My scripts are for the Classic Universal Login page. By selecting “Custom Login Form” you can update the color of the submit button. And the Preview tab shows what it looks like with the change.

image
image1632Ă—486 80.5 KB

1 Like