Skip to main content

Custom Appearance

note

This document is applicable to LI PASS client V1.10 and later versions, and the LI PASS Web client.

LI PASS provides standard UI templates for quick integration, and also supports custom appearances to align components with your game's style.

Follow the steps in this article to customize the appearance of either the Client or Web client.

Client Custom Appearance​

Before starting client customization, you need to understand that current custom appearance consists of basic customization and advanced customization:

  • Basic Customization: Modify common element colors on most interfaces, suitable for light modifications.Such as theme colors, button colors, text colors, etc.

  • Advanced Customization: Allows high-level interface customization including images, logos, decoration graphics, etc.Since most LevelInfinite Pass interactive controls use images for display, replacing images with the same size ratio can achieve a skin-changing effect.

No matter which customization plan you choose, you need to go through three stages: LI PASS UI Editor to prepare resources, deliver LI PASS updates, and self-verification.

Step 1: Prepare UI Resources​

Use the LI PASS UI Editor developed by Player Network to prepare UI resources and achieve basic customization for LI PASS login components. See Basic customization for the customization scope.

After finalizing modifications in the LI PASS UI Editor, you can directly export the client UI resources.

Advanced custom UI is supported starting from LI PASS V1.16, see Advanced Customization.

Step 2: Replace Resources​

Provide the downloaded UI resources to the business contact. The business contact will return a customized AssetBundle. Place the AssetBundle in StreamingAssets/LevelInfinite.

Step 3: Resource Acceptance​

Run the game in the editor or on a real device, open the LI PASS interface, and observe if the interface style changes as expected.

For example, the default dark LI PASS UI has changed to light mode.

Dark mode:

Light mode:

Web Client Custom Appearance​

Step 1: Acquire Configuration Parameters​

  1. Open the LI PASS UI Editor and select Web Client. Image

  2. Debug configurations on the right for previewing Login & Registration Page, Compliance Page, and Popup scenes.Default provides dark and light configurations.

  3. After debugging, click Copy Configuration Parameters.

    Example:

    {
     token: {
     colorPrimary: "#7064FF",
     colorSecondary: "#89839B",
     colorPrimaryBg: "#17131D",
     colorSecondaryBg: "#231C30",
     colorIcon: "#FFFFFF",
     colorInput: "#4D465A",
     fontSize: "MD",
     colorPrimaryText: "#ff6666",
     colorTextBase: "#FFFFFF",
     colorTextButton: "#FFFFFF",
     colorError: "#FC725A",
     },
     algorithm: "dark"
    }

  4. [Optional] After copying the parameters, go to Component example for testing.

    1. Paste the parameters into the theme attribute's input box.
    2. Click start to begin the preview.

    Image

Step 2: Configure Component Parameters​

Configure the parameters under the theme attribute of the component config.

Example:

// Import component resources
<script src="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.css" />

// Fill in the related configuration and theme parameters
const newPass = new PassFactory.Pass({
 env: 'test',
 gameID: 11,
 appID: '0afef39eb02d069107db6e02efd71a2c',
 config: {
 langType: 'en',
 theme: {
 token: {
 colorPrimary: "#7064FF",
 colorSecondary: "#89839B",
 colorPrimaryBg: "#17131D",
 colorSecondaryBg: "#231C30",
 colorIcon: "#FFFFFF",
 colorInput: "#4D465A",
 fontSize: "MD",
 colorPrimaryText: "#ff6666",
 colorTextBase: "#FFFFFF",
 colorTextButton: "#FFFFFF",
 colorError: "#FC725A",
 },
 algorithm: "dark"
 },
 },
});

// Mount pass component
newPass.start('#infinite-pass-component');

Image

Basic Customization​

note

Basic customization is applicable to LI PASS client V1.10 and later versions, and the LI PASS Web client.

Basic customization includes modifications to graphic colors, text size, and text color.

Graphic Color​

Image: loginPanel

Image: accountSettingPanel

  1. Theme Color
  2. Secondary Theme Color
  3. Primary Background Color
  4. Secondary Background Color
  5. Icon Color
  6. Input Box Color

Text Color​

Image: loginPanel2

Image: regionTermPanel

  1. Base Copy
  2. Text Button
  3. Graphic Button
  4. Error Message

Advanced Customization​

note

Advanced customization is applicable to LI PASS client V1.16 and later versions; Web client only supports basic customization.

If basic customization does not meet your game's style requirements, you can manually replace some graphic resources to achieve advanced custom UI.
Due to differences in graphic resources across versions, contact your business contact for specific graphic specification requirements.

Below demonstrates replaceable graphic style examples.Refer to Graphic Handling Method for understanding different graphic handling methods.

Login Panel​

Image: MainBG

  1. Main Background: Recommended to maintain consistency with popup's main background, but size can differ.Supports patterns, stretched proportionally.
  2. Title Bar Background: Supports patterns, stretched in a nine-square grid.
  3. External Pattern Area: Stretched in a nine-square grid.

Example

Main Background (Standard Example):
Image: MainBG2

Main Background Pattern:
Image: MainBG3

Title Bar Background:
Image: TitleBG

Title Bar Pattern:
Image: TitleBG2

External Pattern (Main Background):
Image: MainBG4

External Pattern (Title Bar):
Image: TitleBG3 Image: TitleBG4 Image: TitleBG5

Image: PopUp

  1. Main Background: Recommended to maintain consistency with the login panel's main background, but size can differ.Supports patterns, stretched proportionally.
  2. External Pattern Area: Stretched in a nine-square grid.

Example

Main Background (Standard Example):
Image: PopUpMainBG

Main Background Pattern:
Image: PopUpMainBG2

External Pattern:
Image: PopUpMainBG3

Account Center​

Mobile account center is displayed full-screen, while the PC account center is displayed as a popup.

Image: accountSettingBG

  1. Main Background: Supports patterns, stretched proportionally.
  2. Title Bar Background: Recommended to maintain consistency with the login panel's title bar background, supports patterns, stretched in a nine-square grid.
  3. Tab Background: Composed of Tab 1 and Tab 2, Tab 1 (selected Tab) is spliced with the content area background above and below.Supports adjusting background color, corner angle, replaced in equal size.
  4. Content Area Background: Supports adjusting background color and corner angle, when adjusting corner angle pay attention to tab background corner connection.Stretched in a nine-square grid.
  5. Card Background: Supports adjusting background color and corner angle, stretched in a nine-square grid.

Example

Main Background (Standard Example):
Image: ASMainBG

Main Background Pattern:
Image: ASMainBG2

Title Bar Background:
Image: ASTitleBG

Title Bar Pattern:
Image: ASTitleBG2

Tab Background:
Image: ASTabBG

Tab Background (Right Angle):
Image: ASTabBG2

Content Area Background:
Image: ASContentBG

Content Area Background (Right Angle):
Image: ASContentBG2

Card Background:
Image: Channel1

Card Background (Right Angle):
Image: Channel2

Global​

Input Box - Support adjusting internal color and border style, border stretched in a nine-square grid.

  • Standard Example:
    Image: Inputbox
  • Border Example:
    Image: Inputbox2

Filter Box - Support adjusting internal color and border style, border stretched in a nine-square grid.

  • Standard Example:
    Image: checkBox
  • Border Example:
    Image: checkBox2

Filter Box Panel - Support adjusting background color and corner angle, pay attention to corner connection with filter box when adjusting.Stretched in a nine-square grid.

  • Standard Example:
    Image: RegionBox
  • Right Angle Example:
    Image: RegionBox2

Checkbox: Replaceable without style constraints, provide sizes as needed.
Image: checkBox3

Graphical Button - Stretched using a nine-grid.There are many scenarios for applying graphical buttons where an image needs to be stretched to different widths. If the image has a pattern, it becomes unstable.It is recommended to use solid colors or vertical gradients.

  • Standard example:
    Image: button
  • Vertical gradient example:
    Image: button2

Decorative icon - Replace with equal size without style restrictions, just provide by size.
Image: Icon

Functional icon - Replace with equal size without style restrictions, just provide by size.
Image: Icon2

Toast - Stretched horizontally, it is recommended to use solid colors or horizontal gradients, just provide by size.

  • Standard example:
    Image: Toast
  • Other style example:
    Image: Toast2

Channel card - Refers to third-party channel buttons on the login interface, supporting corner angle adjustment, background images are replaced with equal sizes.

caution

Since each channel has its own design guidelines, to avoid affecting the product's normal launch, it is strongly recommended to use the default color.If further style adjustments are needed, please follow the design guidelines of each channel.

  • Standard example:
    Image: thirdChannel2
  • Right angle example:
    Image: thirdChannel3

Image: thirdChannel

Image Processing Method​

To control the size of the texture atlas, we have adopted differentiated image processing methods. The following introduction to the processing methods can help designers output more suitable image assets:

  • Equal size replacement: Replace according to the actual size of the graphic, suitable for small graphics such as decorative icons and functional icons.

  • Proportional stretching: Stretch the graphics proportionally to different sizes to ensure the image style is not deformed.
    Suitable for simple styles and uniform size ratio graphics, such as main background patterns.

  • Nine-grid stretching: Divide the graphic into a nine-grid and then apply different scaling strategies to the nine areas to automatically adapt the graphic size to different scenarios.
    Suitable for graphics with complex external styles (with borders, icons) and simple internal styles (solid colors, vertical gradients) that need to be stretched to different sizes, such as title bars and graphical buttons.

    • The patterns on the four corners must not intersect.
    • A single pattern must not exceed the midline.
    • There should be at least a 1px gap between two adjacent patterns for stretching.

    Image: Nine-gridStretch Image: Nine-gridStretch2

Privacy PolicyTerms of ServiceDPAOpen Source Licenses
©2025 Proxima Beta Pte. Ltd. All rights reserved.