How to edit authentication element styles
In this tutorial, you’ll learn how to customize the styles of the authentication element.
Note regarding state:
This element can have multiple states, which are controlled from the bottom section of the corresponding editor.
The states refer to:
whether the user is logged in or not
the visibility of the dropdown menu
Step 1 - Open Authentication Element Settings
To open the Authentication Element Settings menu, you have two options:
Hover over the Auth-icon element and click the "Edit Auth-icon" button;
Double-click on the Auth-icon element.
Step 2 - Look & Feel Tab
In the Authentication Element Settings editor, you’ll find two tabs: General and Look & Feel.
The settings we’re interested in are under the Look & Feel tab.
The settings we’re interested in are under the Look & Feel tab.
Step 3 - Change Element's State
At the bottom of the Authentication Element Settings menu, you’ll find the options related to element's state.
To preview your style changes, make sure "Logged In" and "Visible" are selected.
Step 4 - Styling Authentication Element's Box
To style the main box of the Auth-icon element, open the "Choose Element Box Style" dropdown.
You can select one of the existent styles, or click "Edit Style" to create your own custom design.
You can select one of the existent styles, or click "Edit Style" to create your own custom design.
Step 5 - Styling Authentication Element's Dropdown
To style the dropdown that appears from the Auth-icon, use the "Choose Dropdown Box Style" dropdown.
As before, you can either choose an existent style or click "Edit Style" to customize it.
As before, you can either choose an existent style or click "Edit Style" to customize it.
Step 6 - Choose a Text Style
To style the text in both the Auth-icon and its dropdown, use the "Choose Text Style" dropdown.
Select from existing styles or click "Edit Style" to define your own.
Select from existing styles or click "Edit Style" to define your own.
Tip: Each dropdown menu in the Authentication Element Settings includes a search input. If you have a long list of styles, use the search function to quickly find the one you need.Step 7 - Changing the Icon Color
To change the color of the icon in the Auth-icon element, click the "Icon Color" button.
You’ll see two color options:
Brand Color
Custom Color
Option one: Brand Color
Choose a color from your pre-configured brand palette, ensuring it aligns with the design and theme of your website.
Option two: Custom Colors
Select any color from the palette to apply a custom color.