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.