Skip to main content

Customize Your Authentication Page

Configuration​

  • Background Image: Choose an image to serve as the background for your authentication page.
  • Container Background Color: Define the background color of the authentication page container.
  • Container Border Width: Specify the border width of the authentication page container in pixels.
  • Container Border Color: Set the border color of the authentication page container.
  • Container Header Color: Define the color of the header text within the authentication page container.
  • Container Text Color: Specify the color of the text displayed within the authentication page container.

Text​

Customize the appearance of the text elements on your authentication pages:

  • Sign-up Title: Define the title of the sign-up box.
  • Sign-up Subtitle: Specify the sub-title of the sign-up box.
  • Sign-in Title: Define the title of the sign-in box.

Action Buttons​

Adjust the style of your authentication buttons to enhance the user experience:

  • Button Color: Set the color of the authentication buttons.
  • Button Text Color: Define the color of the text displayed on the authentication buttons.
  • Button Hover Color: Specify the color of the authentication buttons when hovered over.
  • Button Hover Text Color: Define the color of the text displayed on the authentication buttons when hovered over.
  • Button Transition Time: Set the duration of the transition animation for the authentication buttons in seconds.
  • Button Transition Timing: Define the timing function of the transition animation for the authentication buttons.

Customize the style of your authentication links for a cohesive visual experience:

  • Color: Customize the color of your links using RGB, HSL, or HEX values.
  • Link Weight: Adjust the thickness of the link's underline in pixels.
  • Opacity: Set the opacity of the authentication links from 0 (no transparency) to 1 (fully transparent).
  • Decoration: Define the decoration of the authentication links.
  • Decoration Color: Set the color of the decoration applied to the authentication links.
  • Decoration Thickness: Specify the thickness of the decoration applied to the authentication links in pixels.
  • Transition Timing: Define the timing function of the transition animation for the authentication links.
  • Hover Color: Specify the color of the authentication links when hovered over.
  • Hover Opacity: Set the opacity of the authentication links when hovered over from 0(no transparency) to 1(fully transparent).
  • Hover Decoration: Define the decoration of the authentication links when hovered over.
  • Hover Decoration Color: Set the color of the decoration applied to the authentication links when hovered over.

Disconnect Wallet Button​

Customize the style of your "Connect Wallet" button to provide a seamless user experience:

  • Button Color: Set the color of the "Connect Wallet" button.
  • Button Text Color: Define the color of the text displayed on the "Connect Wallet" button.
  • Button Hover Color: Specify the color of the "Connect Wallet" button when hovered over.
  • Button Hover Text Color: Define the color of the text on the "Connect wallet" button when hovered over.
  • Button Transition Time: Set the duration of the transition animation for the "Connect Wallet" button in seconds.
  • Button Transition Timing: Define the timing function of the transition animation for the "Connect Wallet" button.