Customizing the login box in the Frontegg Portal

You can fully customize the appearance and layout of your login box directly from the Frontegg Portal using the visual configuration panel. To access these options:

1. Navigate to the Frontegg Portal.
2. Go to the Login Box section.
3. Use the Styles Panel on the right-hand side to adjust design settings.

Available customization options

Theme

• Choose from pre-set themes:
  • modern
  • classic
  • vivid
  • dark

Colors

• Adjust the following color types:
  • Primary
  • Secondary
  • Error

Social buttons

• Position: Define the location of the social login buttons.
• Style States: Customize for different UI states:
  • base, hover, focus, active, disabled
• Style Attributes per State:
  • Font size
  • Font weight
  • Font color
  • Background color
  • Border color
  • Border radius
  • Border width

Layout

• Format: Choose a split layout that separates sign-in elements from additional content.
• Content Box:
  • Set the position and width
  • Define the content type (e.g., image, text, video)
• Background:
  • Set a background image or background color
  • Add an optional background link

Logo image

• Upload and select a custom logo
• Define placement and alignment

Browser attributes

• Set the favicon
• Customize the URL
• Set the browser title

Login box

• Customize the main container:
  • Background color
  • Border radius
  • Shadow

Input fields

• Define visual properties for input fields in all UI states:
  • default, hover, focus, active, disabled
• Customizable attributes include:
  • Fill color
  • Text color
  • Placeholder text color
  • Text size and width
  • Border color, radius, and width
  • Label color, size, and width

Submit button

• Define styles per state:
  • default, hover, focus, active, disabled
• Customize:
  • Font size and weight
  • Font color
  • Background color
  • Border color, radius, and width

Typography

• Select the global font family to match your brand guidelines

Advanced customization

Depending on whether you are using the hosted or the embedded method, if you wish to use styles or localizations that are not part of the Frontegg Builder, you will need to serve the themeOptions and localizations objects from your application's code or a CDN as described in the advanced setup.