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:

1. Hover over the Auth-icon element and click the "Edit Auth-icon" button;

2. 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.

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.

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.

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.

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.

Next steps

1. how to edit authentication element texts
   
2. how to show / hide authentication element
   

• Related Articles

• How to edit authentication element texts

  In this tutorial, you’ll learn how to edit the texts 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 ...

• How to edit form styles

  In this guide, you will learn how to style the Form element to match your website’s design. Step 1 - open editor Open the "Form Settings" editor. Click "Edit Form" on the hover menu or double-click on the "Form" element you want to customize. In the ...

• How to show or hide the authentication element

  In this tutorial, you'll learn how to manage the visibility of the authentication element. Step 1 - Open Website Settings Click on the "Website Settings" button. Step 2 - Open Authentication Settings In the Website Settings menu, select ...

• How to set up google authentication

  Introduction Google authentication is configured by navigating to Website Settings → Authentication → Google Login, and filling in the two fields: Client ID and Client Secret. In the following section, we’ll guide you through the process of obtaining ...

• How to edit an element

  There are two ways you can edit an element. 1. You can hover the element you want to edit and use the small toolbar that allows you to edit or delete the element. 2. Double click the element to open its editor. We recommend that before you start ...