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.
- You have the role of an administrator in the Staffbase Studio.
-
In the Studio, click the gear wheel to open the settings.
-
Under Customization, click Branding.
The Branding page opens. -
Under Custom Styling, click Adjust the styling of your app.
The Custom Styling editor opens. -
In the editor, copy and paste the CSS snippet.
1.signin .logo {2 margin: 0px auto;3 display: block;4 background: url('######') no-repeat center center;5 background-color: #ffffff;6 background-size: cover;7}89.dialog.signin .logo{10 width: 100% !important;11}1213.dialog.signin .dialog-inner,14.signin .page-content{15 background-color: #ffffff;16}1718.page.signin .logo{19 width: 100%;20 margin: 0 auto;21}2223@media screen and (min-width: 515px){24 .page.signin .logo {25 margin: 70px auto 0 auto;26 width: 400px;27 }28}
-
Click Preview to test your CSS customizations.
-
Save the changes.
You have customized the sign-in dialog of your Staffbase platform.