Skip to main content

Hi,

I have some code that I used to move the SSO button to the top of the login page

The issue I am running into is if I expand the width of the SSO button - it displaces the Sign in Text

I’d like to keep the Sign in Text above the SSO button because I plan to replace it

This is the code I am using

/*CSS to Flip the Login Page*/

#doc-layout-login form {
    display: flex;
    flex-wrap: wrap;
}
#doc-layout-login  h1.login-form-title.hyd-typography-heading-2 {
    order: -3;
}
#doc-layout-login p.login-form-subtitle.hyd-typography-subtitle.hyd-color-typography-secondary {
    order: -2;
    font-weight: bold;
    font-size: 15px;
}
#doc-layout-login ui-input-text.login-field-username {
    border-top: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    padding: 8px;
}
 #doc-layout-login ui-input-password {
    width: 100%;
    padding: 8px;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}
 #doc-layout-login ui-input-checkbox.login-field-remember-me {
    width: 100%;
    padding: 8px;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}
#doc-layout-login .form-button.login-button.ng-star-inserted {
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    padding: 8px;
    width: 100%;
}
#doc-layout-login .forgot-password {
    width: 100%;
    padding: 8px;
    margin-top: 0px !important ;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
#doc-layout-login  .sso-buttons {
    order: -1 !important;
    margin: 50px 0px;
}

@michelebanks

In my Docebo instance (as well as on your screenshot), classes assigned to title and subtitle have the prefix ui- and not hyd-

 

instead of:

#doc-layout-login  h1.login-form-title.hyd-typography-heading-2 {
    order: -3;
}
#doc-layout-login p.login-form-subtitle.hyd-typography-subtitle.hyd-color-typography-secondary {
    order: -2;
    font-weight: bold;
    font-size: 15px;
}

use:

#doc-layout-login  h1.login-form-title.ui-typography-heading-2 {
    order: -3;
}
#doc-layout-login p.login-form-subtitle.ui-typography-subtitle.ui-color-typography-secondary {
    order: -2;
    font-weight: bold;
    font-size: 15px;
}

 

This is the result on our system (blended with our own CSS and edits):

 

Thanks so much for all your assistance!!!!.  I was able to finally get it close to what I needed.

I never could figure out how to get line breaks on the buttons.

 

/*CSS for Login Page*/

#doc-layout-login form {

    display: flex;

    flex-wrap: wrap;

}

#doc-layout-login  h1.login-form-title.ui-typography-heading-2 {

    order: -3;

    color: #ffffff;

}

#doc-layout-login p.login-form-subtitle.ui-typography-subtitle.ui-color-typography-secondary{

    order: -2;

    font-weight: medium;

    font-size: 12px;

}

#doc-layout-login ui-input-text.login-field-username {

    border-top: 3px solid #70c35d;

    border-right: 3px solid #70c35d;

    border-left: 3px solid #70c35d;

    padding: 8px;

}

 #doc-layout-login ui-input-password {

    width: 100%;

    padding: 8px;

    border-left: 3px solid #70c35d;

    border-right: 3px solid #70c35d;

}

 #doc-layout-login ui-input-checkbox.login-field-remember-me {

    width: 100%;

    padding: 8px;

    border-left: 3px solid #70c35d;

    border-right: 3px solid #70c35d;

}

#doc-layout-login .form-button.login-button.ng-star-inserted {

    border-right: 3px solid #70c35d;

    border-left: 3px solid #70c35d;

    padding: 8px;

    width: 100%;

}

#doc-layout-login .forgot-password {

    width: 100%;

    padding: 8px;

    margin-top: 0px !important ;

    border-left: 3px solid #70c35d;

    border-right: 3px solid #70c35d;

    border-bottom: 3px solid #70c35d;

}

#doc-layout-login  .sso-buttons {

    order: -1 !important;

    margin: 50px 0px;

    width: 100%

}

 

 

Reply


Terms & ConditionsCookie settings