Learn how to customize the sign-in dialog of your Staffbase platform with advanced custom CSS.
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.
In the Studio, navigate to Settings > App and Intranet.
Under Custom CSS, click and hold Show Editor until the editor opens.
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; }}
You have customized the sign-in dialog of your Staffbase platform.