Style Configuration

Branding · Appearance Configuration

Through the Appearance Configuration, you can customize the visual style and copy for all authentication pages of your application (Login, Sign-Up, Forgot Password, and Password Reset Success pages). The configuration is divided into two parts:

• Global Styles: Uniformly set global styles such as background, theme color, and language switcher, affecting all authentication pages.

• Page-Level Configuration: Set titles, descriptions, and other copy for the Login, Sign-Up, Forgot Password, and Password Reset Success pages respectively, and manage quick-access entries for third-party login and agreements.

Path: Console → Enter a specific application → Top navigation「Configuration」→ 「Branding」→ 「Global Login」→ Select “Appearance” tab

 

1. Global Styles

Global Styles are applied uniformly to all authentication pages (Login, Sign-Up, Forgot Password, Password Reset Success) to ensure brand consistency.

1.1 Page Layout

• Left Preview Area: Displays the real-time effect of the current configuration (Login page by default).

• Right Configuration Area: Contains three modules — Custom Background, Custom Colors, and Language Switcher.

1.2 Custom Background

You can choose a solid color or upload an image background. The two options are mutually exclusive (selecting an image overrides the solid color setting).

Solid Color Background

• Control: Color picker

• Default Value: #F7F7F7 (light gray)

• Interaction: Click the color picker to select a color, or enter a hexadecimal color value (e.g., #FFFFFF). The preview background updates immediately.

Image Background

• Upload Area: Supports click-to-add or drag-and-drop files.

• File Requirements:

  • Formats: JPG, JPEG, PNG, WebP

  • Size: Max 2MB

  • Recommended dimensions: 16:9 (for optimal display)

• Interaction Rules:

  • After successful upload, the preview background immediately displays the image, overriding any solid color setting.

  • The image is displayed with “center cover, maintain aspect ratio” to ensure proper page adaptation.

  • After upload, “Delete” and “Re-upload” buttons appear below the image:

    • Delete: After a confirmation dialog, removes the image background and automatically reverts to the solid color (using the last saved solid color value).

    • Re-upload: Allows you to select a new image to replace the current one.

1.3 Custom Colors

You can customize three key color elements. Changes are reflected in real-time in the preview area.

• Each color item comes with a color picker, allowing you to select a color or enter a hexadecimal value.

• The system automatically applies the primary button background color to the page tags; no additional configuration is needed.

1.4 Language Switcher

Controls whether the language switcher (e.g., “简体中文 / English”) appears at the bottom of authentication pages.

• Default Language Definition: The application's default language is determined by the language you set in your RootAuth personal center.

• When the language switcher is disabled, all authentication pages will use this default language, regardless of the user's browser language.

1.5 Save and Apply

• After modifying any global styles, click the “Save” button at the bottom of the page for the changes to take effect.

• Upon successful saving, the configuration is immediately updated to the application's live environment, and the preview page refreshes accordingly.

 

2. Login & Sign-Up Page Configuration

In the Appearance tab, use the “Login/Sign-Up” sub-tab at the top to configure the Login and Sign-Up pages separately. The right configuration area changes when you switch between these sub-pages.

2.1 Authentication Providers (Global Configuration)

This area displays the third-party login methods (e.g., Google) currently enabled for your application and provides a quick management entry.

• Enabled: Shows the name of the enabled provider (e.g., “Google”). If no provider is enabled, it displays “No third-party login enabled”.

• Manage / Configure Button: Clicking this button takes you to the “Authentication Configuration → Providers” page, where you can enable, disable, or configure third-party logins (e.g., Google OAuth). After completing the configuration and returning, the status here will automatically refresh.

This area is independent of sub-page (Login/Sign-Up) and language selection, always showing the global status.

 

2.2 Login/Sign-Up Agreement (Page-Level Configuration)

• Status Display:

  • If any agreement for the current page type and language has been created in “Feature Configuration”, it shows “Enabled” and a “Manage” button.

  • If no agreement is configured, it shows “No agreement configured” and a “Configure” button.

• Click Action: Takes you to the “Feature Configuration” page, automatically filtering to the agreements list for the corresponding page type and language, making it easy to create or edit an agreement. The status will automatically refresh upon return.

 

2.3 Homepage Link

Set a quick return-to-homepage entry for the Login and Sign-Up pages, including the “Back to Home” text link in the top-left corner and the clickable Logo at the top of the page.

• Input Field: Enter a full URL (must start with http:// or https://). Leave blank to hide both return entries.

• Language Independent: When switching languages, the input field value switches to the URL saved for that language, allowing you to set different homepage addresses for different languages.

• Real-Time Preview:

  • When a valid URL is entered, the “Back to Home” text immediately appears in the top-left corner of the preview area, and the Logo becomes clickable (mouse cursor changes to a hand).

  • When the field is empty, the text link is hidden, and the Logo reverts to a static image.

• The homepage link only affects the Login and Sign-Up pages; it does not apply to the Forgot Password or Password Reset Success pages.

 

2.4 Page Copy Customization

You can customize the title and description for the Login and Sign-Up pages.

Login Page Default Copy

Sign-Up Page Default Copy

• You can directly modify the text in the input fields; the preview area on the left will update in real-time.

• Title max length: 100 characters; Description max length: 200 characters.

 

3. Forgot Password Page Configuration

Click the “Forgot Password” sub-tab in the Appearance tab to set the title and description for this page.

Language switching and character limits (title 100, description 200) also apply here.

4. Password Reset Success Page Configuration

Click the “Password Reset Success” sub-tab in the Appearance tab to set the title and description for this page.

Language switching and character limits (title 100, description 200) also apply here.

5. Save and Preview

• After making any configuration changes (including global styles and page-level copy), click the “Save” button at the bottom of the page for them to take effect.

• You can click the “Preview Registration/Login” button in the top-right corner at any time to open a new tab and see the final effect of all authentication pages, verifying that the configuration meets your expectations.

Global styles and page-level copy are saved independently and do not override each other. Global styles affect all pages, while page-level copy only affects the corresponding page.