This page lists and provides descriptions for all the CSS classes and IDs that you would require to style your login element with, in the Embedded Authentication type. Catalyst provides individual CSS files for the Conventional Login form, Social-Login Only form, and Password Reset form, with individual CSS IDs and classes for them.
These CSS IDs and classes are pre-defined by Catalyst for your ease. You can simply incorporate them into your style-sheet as per your need, and customize the design and branding of the login elements. You must import the CSS file you configure into your login form scripts of this authentication.
Before you begin styling your iFrame, download the required CSS file.
Note: After you download the style-sheet, begin styling your login element after the last line of code. We strongly recommend that you do not alter the code that is already present. Modifying it any way might not render the iFrame correctly. Refer to this sheet for more detailed information on how each of the form mentioned above would appear to the end-users.
Section where the end-user inputs their email address
Section 1
CSS IDs & Classes
Description
#headtitle
The ID that handles the styling elements present in the title of the iFrame
Section 2
CSS IDs & Classes
Description
#login_id
The ID that handles the styling of the input field
.fielderror
The class that handles the size of the error text
.errorlabel
The class that handles the color scheme of the error message
.errorborder
The class that handles the border color that appears in the event of an error, around the input field
Section 3
CSS IDs & Classes
Description
#nextbtn
The ID that handles the styling of the "NEXT" button
Section 4
CSS IDs & Classes
Description
#forgotpassword
The ID that handles the styling of the "Forgot Password" literal
Section 5
CSS IDs & Classes
Description
.fed_div
The class that handles the size, height, cursor and overflow of the social login option as a whole
.zoho_fed_box
The class that handles the color scheme of the Zoho social login
.fed_icon
The class that handles the size of the logos of all social logins
..zoho_icon
The class that handles the logo icon of the Zoho social login
Section where the end-user inputs their password
Section 1
CSS IDs & Classes
Description
.username
The class that handles the email address field
Section 2
CSS IDs & Classes
Description
.Notyou
The class that handles the font size of the "Change literal
.bluetext
The class that handles the color and other properties of the "Change" literal
Section 3
CSS IDs & Classes
Description
#password
The ID that handles the various properties of the input field
.fielderror
The class that handles the size of the error text
.errorborder
The class that handles the border color that appears in the event of an error around the input field
.errorlabel
The class that handles the color scheme of the error text
.show_hide_password
The class that handles the properties of the visibility-icon
.icon_hide
The class that handles the properties of the hidden-icon
.icon_show
The class that handles the properties of the visibility-icon when clicked
Section 4
CSS IDs & Classes
Description
.blue_text_action
The class that handles the color scheme, font size and other properties of both the literals
Section 5
CSS IDs & Classes
Description
.blue
The class that handles the color scheme of the Sign In button and box
.btn
The class that handles the size of the button
Section where the end-user confirms their password
Section 1
CSS IDs & Classes
Description
.confirmtitle
The class that handles the styling elements present in the title.
.confirmdesc
This is the notification/description element which is notify to create a strong and unique password at the bottom of the title element.
.confirm_head
The class that handles the styling of the Background of the confirmation form.
Section 2
CSS IDs & Classes
Description
.username
The class that handles the email address field.
.icon-profile
The class that handles the profile in that email address field.
Section 3
CSS IDs & Classes
Description
#password
The ID that handles the styling elements present in the password input field.
.icon-hide
The class that handles the properties of the hidden-icon
.show_hide_password
The class that handles the properties of the visibility of the icon
.fielderror
The class that handles the size of the error text.
.passwordpolicy
The class that handles the pop which contains the password policy.
Section 4
CSS IDs & Classes
Description
#cpassword
The ID that handles the input field for confirm password.
Section 5
CSS IDs & Classes
Description
#nextbtn
The ID that handles the confirm button.
Section where the end-user inputs the CAPTCHA
Section 1
CSS IDs & Classes
Description
#headtitle
The ID that handles the styling elements present in the title of the iFrame
Section 2
CSS IDs & Classes
Description
.user_info
The class that handles styling elements of the box's border
.menutext
The class that handles the styling of the user's email ID
Section 3
CSS IDs & Classes
Description
.changeuser
The class that handles the styling elements present in the "Change" literal
Section 4
CSS IDs & Classes
Description
#captcha_container
The ID that handles the styling of the box surrounding the Captcha control box
.reload_captcha ::before
The class that handles the styling of the reload button, before it is clicked
.text_box
The class that handles the properties of the input field
Section 5
CSS IDs & Classes
Description
.blue
The class that handles the color scheme of the button and box
