Create a Custom Sign-In Dialog

Learn how to customize the sign-in dialog of your Staffbase platform with advanced custom CSS.

Employee App
Front Door Intranet

The sign-in dialog is the main door to your Staffbase platform. With custom CSS, you can give this crucial entry point to your Staffbase platform a custom touch to align with your corporate identity. In this tutorial, we take you through how to customize the sign-in dialog of your Staffbase platform with CSS.

On completing this tutorial, you will be familiar with the CSS selectors required to customize the sign-in dialog.

Using custom CSS can result in undesired formatting or styling. Use custom CSS only if you have experience working with CSS, and always double-check what your app looks like after applying your styles.

  • You have the role of an administrator in the Staffbase Studio.

  1. In the Studio, click the gear wheel to open the settings.

  2. Under Customization, click Branding.
    The Branding page opens.

  3. Under Custom Styling, click Adjust the styling of your app.
    The Custom Styling editor opens.

  4. In the editor, copy and paste the CSS snippet.

.signin .logo {
    margin: 0px auto;
    display: block;
    background: url('######') no-repeat center center;
    background-color: #ffffff;
    background-size: cover;
}


.dialog.signin .logo{
    width: 100% !important;
}


.dialog.signin .dialog-inner,
.signin .page-content{
    background-color: #ffffff;
}


.page.signin .logo{
    width: 100%;
    margin: 0 auto;
}


@media screen and (min-width: 515px){
    .page.signin .logo {
         margin: 70px auto 0 auto;
         width: 400px;
    }
}

  1. Click Preview to test your CSS customizations.

  2. Save the changes.

You have customized the sign-in dialog of your Staffbase platform.