Create a Custom Sign-In Dialog

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

Employee App
Staffbase 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, navigate to Settings > App and Intranet.

  2. Under Custom CSS, click and hold Show Editor until the editor opens.

  3. 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 Save.

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