Customize basic style properties for your Frontegg components to make them look how you want.

Go to your Frontegg Portal and navigate to the Login Box page in the Builder.

Style Sidebar 🎨 🖌

In the righthand sidebar you can view and select basic style options.

Scroll down to see all the options, and toggle open each option to manage the properties.

Some of the style options are global for your application, like overall themes, colors, and logo.

Other styles you can set in the builder are more specific. For instance, you can set styles for things like the login box, inputs, submit buttons, and social login buttons.

In the Builder, click an option to see the style options available for customizing.

📘

After making changes here in the Builder, commit and publish your changes to see them live.

Examples

The style options in the Builder are mostly self-explanatory.

Select design properties, like background-color, border-radius, border-width, color, font-color, font-family, font-size, font-weight, and more.

You also can choose the layout of elements on the screen, like the location of the social login buttons and split vs fullscreen.

The examples highlight just a few of the style customizations you can do in the Builder.

Social Logins Layout

Go to the Social buttons style menu and toggle it open to customize the layout of the Social login buttons.

Choose whether the social login buttons appear above or below the authentication form. By default, the social login buttons appear below the form. You can move them above the form.

To change the layout for the social login buttons, in the righthand sidebar select the Social Buttons menu.

Use the position style property to select up to move the buttons above the form and down to move them below the form.

Split Screen

Go to the Layout style menu and toggle it open to enable and customize split screen.

By default, the Login Box contains just the form, buttons, and a few other authentication tools. It is centered within the full page width.

Add content to your Login Box and customize how it looks by choosing split screen. In split screen mode, you can add testimonials, logos, values, or a statement. The additional content appears next to the Login Box.

Split Screen

Enable split screen by selecting the page and format.

Set the other values to customize how the split screen looks. For instance, choose which side the Login Box appears on, the width, and the content you want to appear next to the Login Box.

Add content for the split screen sections.

Under Template, click the edit button for the relevant template and follow the on-screen prompts.

Default Layout

Enable the default layout by selecting the page and format.

Select the background properties that you want.