> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Describes how to use the no-code editor to customize themes for Universal Login pages.

# Customize Universal Login Page Themes

You can create a consistently branded login experience for your users by styling your <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip> prompts. With the Universal Login no-code editor, you can easily customize the colors, fonts, borders, and backgrounds of the prompts displayed to users throughout the login flow.

The no-code editor allows you to customize your Universal Login branding theme. To customize the text included in each prompt, review [Customize Universal Login Text Elements](/docs/customize/login-pages/universal-login/customize-text-elements). For expanded customization capabilities, review [Customize Universal Login Page Templates](/docs/customize/login-pages/universal-login/customize-templates).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  To leverage the no-code editor, you must have [Universal Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) enabled. The Classic Login experience does not support this editor.
</Callout>

## Universal Login no-code editor

To customize your Universal Login theme, follow the steps below:

1. On the Auth0 Dashboard, navigate to [Branding > Universal Login > Customization Options](https://manage.auth0.com/#/universal-login/customizations/colors).
2. Select a [theme component](#theme-components) (e.g., Colors) from the Styles menu. Then, customize the options listed to the right.
3. After customizing your theme, select **Save and Publish**.

After you save your theme, you can access a live preview of your login experience to review and test your screens. To launch the preview in a new tab, select **Try** above the no-code editor.

<Frame>
  <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/I3gNYw4Uo9lArprN/docs/images/cdy7uua7fh8z/01nmAYzRb5U8xOpUWEClH9/de60b97b42c6de04bea69914d36e6984/branding-customize-NUL-Nocode-fullscreen0.png?fit=max&auto=format&n=I3gNYw4Uo9lArprN&q=85&s=140e714bb0f678f149dc163262de90e8" alt="" width="900" height="420" data-path="docs/images/cdy7uua7fh8z/01nmAYzRb5U8xOpUWEClH9/de60b97b42c6de04bea69914d36e6984/branding-customize-NUL-Nocode-fullscreen0.png" />
</Frame>

### Theme components

To create your desired Universal Login theme, the Styles menu contains the following components:

<AccordionGroup>
  <Accordion title="Color">
    Select an input field to change the color of the element. To choose specific colors, you can:

    * Use the color picker.
    * Input the Hex code or RGB value.
    * Select the eyedropper tool to choose a color from your screen for the available elements.

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/8yG0sorggbq9bIbi/docs/images/cdy7uua7fh8z/4a2iEFD4dPvxHHFueQ7rnD/ce09850794e10176aa489aaff03e67b8/2022-05-12_11-24-33.png?fit=max&auto=format&n=8yG0sorggbq9bIbi&q=85&s=be48ae368d536058966aa9b2315e1809" alt="" width="247" height="315" data-path="docs/images/cdy7uua7fh8z/4a2iEFD4dPvxHHFueQ7rnD/ce09850794e10176aa489aaff03e67b8/2022-05-12_11-24-33.png" />
    </Frame>

    | Element                       | Description                                                                                                                           |
    | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
    | Primary button                | Fills primary button, or button that triggers the next action, with color choice.                                                     |
    | Primary button label          | Changes color of text within primary button.                                                                                          |
    | Secondary button border       | Changes border on input fields.                                                                                                       |
    | Secondary button label        | Changes text within clickable secondary fields.                                                                                       |
    | Links and focused components  | Changes text color of links that lead users to trigger another workflow, such as reset password or try another authentication method. |
    | Base focus color              | Changes the color of buttons when the mouse hovers over the button before selection.                                                  |
    | Base hover color              | Changes the color of a button when user clicks on it.                                                                                 |
    | Header                        | Changes the text color of the title in the header.                                                                                    |
    | Body text                     | Changes the text color of body text.                                                                                                  |
    | Widget background             | Changes the background color of widgets.                                                                                              |
    | Widget border                 | Changes the border color of the widgets.                                                                                              |
    | Input labels and placeholders | Changes the text of input field labels and placeholder text.                                                                          |
    | Input filled text             | Changes text color users type in input fields. For example, username and password fields.                                             |
    | Input border                  | Changes border color of input fields.                                                                                                 |
    | Input background              | Changes background color of input fields.                                                                                             |
    | Icons                         | Changes color of icons inside input fields.                                                                                           |
    | Error                         | Changes color of error messages within widgets.                                                                                       |
    | Success                       | Changes color of success message within widgets.                                                                                      |

    Once you make a change, the preview window displays several examples of the widgets with your specified changes.

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/pJYW9vLPIqzUNcly/docs/images/cdy7uua7fh8z/4BLBu39lD1SLi7lbjwpf5n/655a46aa8fed8415e7eb4595c09a1ea8/2022-05-12_11-23-39.png?fit=max&auto=format&n=pJYW9vLPIqzUNcly&q=85&s=67aaccbacd06a345beb082a962a86610" alt="" width="902" height="359" data-path="docs/images/cdy7uua7fh8z/4BLBu39lD1SLi7lbjwpf5n/655a46aa8fed8415e7eb4595c09a1ea8/2022-05-12_11-23-39.png" />
    </Frame>
  </Accordion>

  <Accordion title="Fonts">
    To change the default font, enter the URL to any WOFF (Web Open Font Format) file in the input field. Your WOFF files need to be hosted using a CDN with CORS enabled or a hosting site with Access-Control-Allow-Origin header.

    Under the font URL panel, adjust the general text size under the **Reference text size** pixel option. You should note the rest of the options do not change when the reference text is changed.

    Change the following elements individually:

    * Title
    * Subtitle
    * Body Text
    * Button Text
    * Input Labels
    * Links

    When you select an option to configure, the preview pane displays the location of the element on the widget and adjusts to the specified size.

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/M4e_wjkc6eywZ_wO/docs/images/cdy7uua7fh8z/1dHa6nIrEGy2hGV4LyKXmE/13efef14d4725c524f76e84f06444b2b/2022-05-12_11-18-38.png?fit=max&auto=format&n=M4e_wjkc6eywZ_wO&q=85&s=7ee5f27c3f63e1006d368f9769cc0a05" alt="" width="233" height="500" data-path="docs/images/cdy7uua7fh8z/1dHa6nIrEGy2hGV4LyKXmE/13efef14d4725c524f76e84f06444b2b/2022-05-12_11-18-38.png" />
    </Frame>
  </Accordion>

  <Accordion title="Borders">
    To customize the borders, buttons styles, input fields, and widget corners adjust the slider or choose from the available options.

    | Option               | Description                                                                                                                      |
    | -------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
    | Button border weight | Adjusts width of border around input fields inside login prompts.                                                                |
    | Buttons style        | Changes shape of clickable buttons inside widgets. Available options are: sharp corners, rounded corners, or pill-shaped style.  |
    | Button border radius | Adjusts corners of clickable buttons when you select rounded corners.                                                            |
    | Input border weight  | Adjusts width of borders of input fields and clickable buttons inside login prompts.                                             |
    | Inputs style         | Changes shape of input fields inside login prompts. Available options are: sharp corners, rounded corners, or pill-shaped style. |
    | Input border radius  | Adjusts corners of input fields when you select rounded corners.                                                                 |
    | Widget corner radius | Changes shape of the widget from sharp to rounded corners.                                                                       |
    | Widget border weight | Adjusts width of widget border.                                                                                                  |
    | Shadow               | Checkbox to allow widgets to have a shadow.                                                                                      |

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/I3gNYw4Uo9lArprN/docs/images/cdy7uua7fh8z/19TZeRWGWrYQWQ8ebRELXz/76ccd288acdec4ceb96d6c8402d48518/2022-05-10_13-44-25.png?fit=max&auto=format&n=I3gNYw4Uo9lArprN&q=85&s=b8442928dd08748231826ac133db3319" alt="" width="224" height="580" data-path="docs/images/cdy7uua7fh8z/19TZeRWGWrYQWQ8ebRELXz/76ccd288acdec4ceb96d6c8402d48518/2022-05-10_13-44-25.png" />
    </Frame>
  </Accordion>

  <Accordion title="Widget">
    Add the URL of your logo to configure the position, height, text alignment, and social login location.

    | Element               | Description                                                                                                              |
    | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
    | Logo position         | Choose the location of the widget to be on the left, right, or center of the page. You can also choose to hide the logo. |
    | Logo URL              | Enter the URL location of your custom logo. Auth0 recommends SVG files.                                                  |
    | Logo Height           | Adjust the size of your logo at the top of the widget.                                                                   |
    | Header Text Alignment | Choose if text within the header should be left, right, or center justified.                                             |
    | Social Buttons Layout | Choose if text should be at the top or bottom of the button.                                                             |

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/I3gNYw4Uo9lArprN/docs/images/cdy7uua7fh8z/1AJksBqHefFzOmt31XlqxP/b0ac004a03681370d724b4c0d06a8351/2022-05-31_09-39-26.png?fit=max&auto=format&n=I3gNYw4Uo9lArprN&q=85&s=b3e89c299554afe674f89f98bd3679a5" alt="" width="220" height="402" data-path="docs/images/cdy7uua7fh8z/1AJksBqHefFzOmt31XlqxP/b0ac004a03681370d724b4c0d06a8351/2022-05-31_09-39-26.png" />
    </Frame>
  </Accordion>

  <Accordion title="Page backgrounds">
    Add a background image URL to choose a background to display in the prompt widget. The No-Code Editor supports other image formats such as PNGs and JPEGs.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Auth0 recommends you use a JPEG image format at least 2000px wide.
    </Callout>

    Then, choose if the widget aligns center, left, or right on the screen.

    <Frame>
      <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/4MaQENhfcY-1egb6/docs/images/cdy7uua7fh8z/6WQqdGCv972KnyKMwoYeyO/61dc83d2ce507e92bde7f41df044d79b/2022-05-31_09-41-21.png?fit=max&auto=format&n=4MaQENhfcY-1egb6&q=85&s=2832ef3671efc953835edfb5fef2ec9d" alt="" width="230" height="327" data-path="docs/images/cdy7uua7fh8z/6WQqdGCv972KnyKMwoYeyO/61dc83d2ce507e92bde7f41df044d79b/2022-05-31_09-41-21.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

## Management API

You can also customize your Universal Login theme with the [Management API](https://auth0.com/docs/api/management/v2). Specifically, you can use the Branding endpoints to:

* [Create a new branding theme](https://auth0.com/docs/api/management/v2/branding/post-branding-theme)
* [Retrieve the default branding theme](https://auth0.com/docs/api/management/v2/branding/get-default-branding-theme)
* [Retrieve a specific branding theme](https://auth0.com/docs/api/management/v2/branding/get-branding-theme)
* [Delete a branding theme](https://auth0.com/docs/api/management/v2/branding/delete-branding-theme)
* [Update the current theme](https://auth0.com/docs/api/management/v2/branding/patch-branding-theme)