Refrence Style-sheet for Embedded Authentication
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.
CSS style-sheet for:
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 |
| .btn |
The class that handles the size of the button |