Hosted Login v2 CSS Class Locator

Last Modified on 03/24/2021 2:36 pm PDT

One of the (many) great things about Hosted Login is the flexibility it gives you; for example, you can easily override Hosted Login's default CSS stylesheet and, as a result, give your screens a custom look and feel. Want to add your own branding to Hosted Login's default screens? Have at it.

However, and before you start overriding the default CSS, it's important to note that many of Hosted Login's CSS classes are used on multiple screens; in fact. some classes, such screen  and footer-container, are used on all your Hosted Login screens. Does that matter to you? It might. For example, suppose you decide to use CSS to hide the default footer-container on the visitingMessage screen:

.footer-container {
    display: none
}

That little CSS snippet will definitely hide the footer-container class on the visitingMessage screen; however, it will also hide the footer-container class on every other screen where that class appears. Which just happens to be all of them.

Whether that's a good thing or a bad thing is irrelevant: that's just the way Hosted Login works. What this does do, however, is emphasize hat, before you start making CSS changes on a screen, you should verify whether or not the classes you're about to modify are used anywhere else. That way, you can better predict the domino effect that could potentially occur if you change a given class.

To help you do that, we've created a simple little table that lets you o filter for a given CSS class and then see which screens that class appears on. To see how this works, start typing the name of a Hosted Login CSS class (e.g., footer-container) in the field below, and watch what happens.

Note. Incidentally, you rarely have to type the entire class name: the table starts filtering the minute you start typing. And you don't have to start at the beginning of the class name, either. For example, you can find the registration-acceptance class just by typing acce. Try it and see.
 


CSS Class Finder

ClassDefaultUsed on ...

action-card

.action-card {
   flex-grow: 1;
   flex-basis: 0;
   margin: 8px;
   background-color: #f2f2f2;
   padding:0 20px 20px 20px
}

  • manageProfile_privacy
  • manageProfile_security

action-description


  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_security

action-description existing-value


  • manageProfile_security

add edit


  • manageProfile_security

additional-actions-container

.additional-actions-container {
    padding: 25px;
    text-align:center
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • mergeAccounts
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequestSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail

aic_checkbox


  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode

aic_checkbox_label


  • authRule_secondFactorLoginCode

aic_form_item


  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode

aic-control

.aic-control {
    cursor:pointer
}

  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_security
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • signIn
  • traditionalRegistration

aic-control aic-error

.aic-control {
    cursor:pointer
}

.aic-error {
    color:# fa5151

}

  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_security

aic-control cancel-link

.aic-control {
   cursor:pointer
}

.cancel-link {
   display: block;
   margin-bottom:10px
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • mergeAccounts
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail

aic-control logout

.aic-control {
  cursor:pointer
}

.logout {
   position: absolute;
   top: 25px;
   right:50px
}

  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

aic-error

.aic-error {
    color:# fa5151
}

  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_security

aic-icon icon-add


  • manageProfile_security

aic-icon icon-edit



  • manageProfile_security

aic-icon icon-subtract


  • manageProfile_security

aic-input


  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_security

aic-input

.aic-input {
    border:1px solid # 979797;
    margin - bottom: 15 px;
    color: #444;
    padding:7px;
    border-radius:2px;
    width:100%;
    box-sizing:border-box
}


aic-site-name


  • signIn

aic-success


  • manageProfile_security

alternate-credentials

.alternative-credentials {
    display: block;
    font-weight: bold;
    margin-bottom:15px
}

  1. signIn

auth-screen content-wrapper

.auth-screen.content-wrapper {
   max-width:500px
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • mergeAccounts
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

auth-success-screen content-wrapper

auth-success-screen.content-wrapper {
   max-width: 275px;
   margin: 0 auto 20px;
   padding:25px 0 25px 75px
}

  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • registrationSuccess
  • requestDataSucess

capture_signin


  • traditionalAuthenticateMerge

card-body

.card-body {
  padding:15px 25px
}

  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

card-heading

.card-heading {
   border-bottom: 1px solid #f2f2f2;
   position:relative
}

  • manageProfile

card-heading aic-control

.card-heading {
   border-bottom: 1px solid #f2f2f2;
   position:relative
}

.aic-control {
    cursor:pointer
}

  • manageProfile_privacy
  • manageProfile_security
  • manageProfile_data

chevron left

.chevron::before {
   border-style: solid;
   border-width: .12em .12em 0 0;
   content: "";
   display: inline-block;
   height: .65em;
   left: .15em;
   position: relative;
   top: .32em;
   transform: rotate(-45deg);
   vertical-align: top;
   width: .65em;
   border-color:#979797
}

.chevron.left:before, .lang-rtl .chevron.right:before {
   left: .25em;
   transform:rotate(-135deg)
}

  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

chevron right

.chevron::before {
   border-style: solid;
   border-width: .12em .12em 0 0;
   content: "";
   display: inline-block;
   height: .65em;
   left: .15em;
   position: relative;
   top: .32em;
   transform: rotate(-45deg);
   vertical-align: top;
   width: .65em;
   border-color:#979797
}

.chevron.right:before, .lang-rtl .chevron.left:before {
   left: 0;
   transform:rotate(45deg)
}

  • manageProfile

codesentto-tel-flag

.codesentto-tel-flag {
    display:none

}

  • manageProfile_security

content-wrapper

content-wrapper {
   background-color: #fff;
   box-shadow:1px 1px 5px 2px rgba(0, 0, 0, .1)
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

danger aic-control

.aic-control {
   cursor:pointer
}

button.danger {
    background - color: #fa5151;
    border: 1 px solid #de0606
}

  • manageProfile_privacy

delete


  • manageProfile_security

edit add


  • manageProfile_security

flex-quad body


  • manageProfile_security

flex-quad-header


  • manageProfile_security

flex-row

.flex-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin:0 -8px
}

  • manageProfile_privacy

footer-container

.footer-container {
   padding: 25px;
   border-top: 1px solid #f2f2f2;
   text-align:center
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

footer-extra-text


  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

footer-text


  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

forgot-password-link aic-control

.aic-control {
   cursor:pointer
}

 .forgot-password-link {
   position: absolute;
   right: 8px;
   bottom:0
}

  • signIn

form-action-buttons

.form-action-buttons {
   margin:0 -10px
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • manageProfile_data
  • manageProfile_privacy
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail

form-action-buttonsflex

.form-action-buttons {
    margin:0 -10px
}

  • manageProfile_security
  • mergeAccounts

help-link


  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

help-text


  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • mergeAccounts
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail

integration-card


  • manageProfile_security

integrations


  • manageProfile_security

linked-accounts


  • manageProfile_security

logout-container


  • manageProfile
  • manageProfile_privacy
  • manageProfile_security

manage-screen content-wrapper

.manage-screen.content-wrapper {
   position:relative
}

  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

phone-group

.phone-group {
    white-space:nowrap;
    margin-left:2px
}

  • manageProfile_security

profile


  • manageProfile_security

profile-account-photo

.profile-account-photo {
   display: inline-block;
   vertical-align:middle
}

 .profile-account-photo img {
   height: 39px;
   width:39px
}

  • mergeAccounts

profile-action-icons

.profile-action-icons {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
   margin-bottom:13px
}

  • manageProfile_security

profile-actions


manageProfile_security

profile-card


manageProfile_security

profile-data card-icon

.card-heading .card-icon {
   background-size: 25px 25px;
   height: 25px;
   width: 25px;
   display: inline-block;
   margin: 0 15px;
   position: relative;
   top:3px
}

  • manageProfile
  • manageProfile_data

profile-header

.profile-header {
   display: flex;
   flex-direction: row;
   flex-wrap:wrap
}

  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

profile-header-actions

.profile-header-actions {
    display: flex;
    flex-direction: row;
    justify - content: space - between

}

  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

profile-header-image user-photo-container

.profile-header-image {
   text-align:right
}

.profile-header-image .profile-image {
   margin-right: 20px;
   border-radius: 50%;
   max-height: 100px;
   max-width:100px
}

  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

profile-header-text


  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

profile-management-card aic-control

.profile-management-card {
   background-color: #fff;
   box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .1);
   min-width: 270px;
   max-width: 915px;
   margin-top: 15px;
   overflow:auto
}

.aic-control {
   cursor:pointer
}

  • manageProfile

profile-management-card large


manageProfile_data

  • manageProfile_privacy
  • manageProfile_security


profile-management-container


  • manageProfile

profile-management-container profile-data


  • manageProfile_data

profile-management-container profile-policy


  • manageProfile_privacy

profile-management-container profile-security


  • manageProfile_security

profile-preferences card-icon


  • manageProfile_security

profile-privacy card-icon

.card-heading .card-icon.profile-privacy {
   background-image: url("/gizmo/static/privacy_settings_icon.png")
}

  • manageProfile
  • manageProfile_privacy

profile-security card-icon

.card-heading .card-icon.profile-security {
   background-image: url("/gizmo/static/account_security_icon.png")
}

  • manageProfile

profile-show


  • manageProfile_security

provider-identiy-box


  • mergeAccounts

provider-name

.social-login-buttons .provider-name {
    font-size: 18px;
    color:#fff
}

  • traditionalRegistration

register-button


  • socialRegistration
  • traditionalRegistration

registration-acceptance


  • socialRegistration
  • traditionalRegistration

return-to-app-container



  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security

screen

.screen {
   min-width:460px
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

screen-description


  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactor
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess
  • visitingMessage

screen-heading

.screen-heading {
   margin-top:0
}

  • authRule_acceptLegal
  • authRule_consents
  • authRule_reqAttrs
  • authRule_secondFactorLoginCode
  • authRule_secondFactorRegistrationCode
  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • manageProfile
  • manageProfile_data
  • manageProfile_privacy
  • manageProfile_security
  • mergeAccounts
  • registrationSuccess
  • requestDataSucess
  • resendVerificationSuccess
  • resetPassword
  • resetPasswordCodeExchange
  • resetPasswordRequest
  • resetPasswordRequestSuccess
  • resetPasswordSuccess
  • signIn
  • socialRegistration
  • traditionalAuthenticateMerge
  • traditionalRegistration
  • verifyEmail
  • verifyEmailSuccess

secondary aic-control

.aic-control {
   cursor:pointer
}

 button.secondary {
   background-color: #fff;
   color:#5f80c5
}

 button.secondary:hover {
   background-color:#ecf2ff
}

  • manageProfile_data
  • manageProfile_privacy

sign-in-button


  • signIn
  • traditionalAuthenticateMerge

social-login-buttons


  • signIn
  • traditionalRegistration

social-login-buttons link-account

.social-login-buttons button {
    margin: 5px 0;
    padding: 0;
    width:100%
}

  • manageProfile_security

social-signin


  • signIn
  • traditionalRegistration

success-check

.success-check {
    display:inline-block;
    height:80px;
    width:80px;
    min-width:80px;
    border-radius:50px;
    background-color:# 57d38f;
    border: 1 px solid #31b06a
}

  • deleteAccountSuccess
  • loginSuccess
  • logoutSuccess
  • registrationSuccess
  • requestDataSucess

traditional-registration


  • traditionalRegistration

traditional-signin

.traditional-signin {
   position:relative
}

  • signIn

verified-identifier

.verified-identifier {
    color:green;
    font-weight:bold;
    float:right;
    margin-right:40px
}

  • manageProfile_security


Rate this Article

How would you rate this article?
Thank you for your feedback!
Copyright © 2015 – 2016 Your Company, LLC. All rights reserved.