Skip to main content

Login UI Customization

You have created the application. Here will show you how to customize the login page UI of the application. In this guide we will create the following application login page:


Let's start!

Part1: Add a background image

First, let's add a background image. The default background is white. It looks very simple.


  • Background URL The background image url.

Choose the background image you like and fill the Background URL. The preview area will display the image, if you fill the valid url.


Part2: Customize the login panel

Here's where you were at the end of the 1st part:


Now you need to add some css to make the panel look nice. You can copy the code below and paste it in the field Form CSS.

padding: 40px 30px 0 30px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);



When you edit the form CSS, if the value is empty, the editor will show the default value. But it is not fill in the field. You need to copy the content and paste.

After filling the form CSS, don't forget to save the config at the bottom. Ok, let's see the effect.


Part3: Select the Panel position

Now the login page is much prettier than it did at the beginning. We also provide three buttons for you to decide the position of the panel.


For example, select the Right button:


Part4: Enable the side panel

You will see now how you can enable a side panel and customize the style.

First, select the button. In enable side panel mode, the panel will be in center.


Then edit the Side panel HTML, it decides what content will show in the side panel. Same as the Form CSS, we provide a default template. Just copy and paste.

text-align: center;
padding: 30px;
background-color: #8ca0ed;
position: absolute;
transform: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
.side-logo span {
font-family: Montserrat, sans-serif;
font-weight: 900;
font-size: 2.4rem;
line-height: 1.3;
margin-left: 16px;
color: #404040;
max-width: none;
margin: 41px 0 13px;
<div class="left-model">
<span class="side-logo"> <img src="" alt="Casdoor" style="width: 120px">
<div class="img">
<img src="" alt="Casdoor"/>

Let's see the effect. The side panel with a logo and image is shown, but the result was not satisfactory.


You need to modify and add some css in form CSS.


The final code is as follows.

border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);
.login-form {
padding: 30px;

.login-panel, .login-form are the class names of div. They correspond to different areas of the page. For more details, you can check them through developer tools. After making sure the class names, you can customize the login page more flexibly by writing CSS here.

Finally, we get a beautiful login page.



OK, so let's sum it up: we have added a background image, customized the login panel style and enabled the side panel.

More introduction about application in Casdoor:

Thanks for reading!