Configure Different Logos And Sizes For Multiple Applications In Custom Page Templates

Last Updated: Jan 5, 2026

Overview

This article explains how to configure specific logos and logo sizes for individual applications using a custom page template in Universal Login.

Applies To

Auth0 Command Line Interface (CLI)
Universal Login
Custom Page Templates

Solution

Open the terminal.
Enter the following command to access the Universal Login customization options, using the Auth0 CLI: auth0 universal-login customize
Select the Page Template tab.

Modify the content using the following example HTML code, which utilizes logic to apply different background images and sizes based on the application ID:

<!DOCTYPE html>
<html lang="{{ locale }}">
<head>
  <title>Welcome to {{ application.name }}</title>
  {%- auth0:head -%}
  <style>
 ._use-custom-prompt-logo #custom-prompt-logo {
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      display: block !important;
    }

    {% if application.id == "Pf**********************9H" %}
      #custom-prompt-logo {
        background-image: url('https://example.com/customimage1.png');
          min-height: 40px;

      }
    {% elsif application.id == "oo**********************E5" %}
      #custom-prompt-logo {
        background-image: url('https://example.com/customimage2.png');
        min-height: 89px;

      }
    {% elsif application.id == "yS**********************Pv" %}
      #custom-prompt-logo {
        background-image: url('https://example.com/customimage3.png');
        min-height: 50px;

      }
    {% elsif application.id == "Ut**********************6W" %}
      #custom-prompt-logo {
        background-image: url('https://example.com/customimage4.png');
        min-height: 60px;

      }
    {% endif %}

  </style>
</head>
<body class="_widget-auto-layout _use-custom-prompt-logo">
  {%- auth0:widget -%}
</body>
</html>