跳到主内容

自定义登录界面

您已创建应用程序。 Now, let me show you how to customize the login page UI of your application. In this guide, we will create a customized login page for your application.

步骤 4_result2.png

Let's get started!

Part 1: Add a background image​

首先，我们要添加背景图像。 The default background is white, which looks very simple.

步骤 1_start.png

To add a background image, fill in the Background URL with the URL of the image you like. The preview area will display the image if the URL is valid.

步骤1_backgroune_url.gif

Part 2: Customize the login panel​

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

步骤 1_end.png

To make the panel look nice, you need to add some CSS code to it. Copy the code below and paste it into the Form CSS field.

<style>
.login-panel{
    padding: 40px 30px 0 30px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);
}
</style>

步骤 2_form_css.gif

提示

When editing the Form CSS, if the value is empty, the editor will show the default value. However, you still need to copy the content and paste it into the field.

:::

After filling the Form CSS, don't forget to save the configuration at the bottom. Now, let's see the effect.

步骤 2_end.png

Part 3: Select the panel position​

Now, the login page looks much prettier than before. 我们还为您提供了三个按钮，可以决定面板的位置。

步骤 3_position.png

For example, let's select the Right button:

步骤 3_end.png

Part 4: Enable the side panel​

Next, let's see how to enable a side panel and customize its style.

首先选择按钮。 In the Enable Side Panel mode, the panel will be centered.

启用side_panel.pan.png

Then, edit the Side panel HTML, which determines the content that will be shown in the side panel. We provide a default template, so you can simply copy and paste it.

<style>
  .left-model{
    text-align: center;
    padding: 30px;
    background-color: #8ca0ed;
    position: absolute;
    transform: none;
    width: 100%;
    height: 100%;
  }
  .side-logo{
    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;
  }
  .img{
    max-width: none;
    margin: 41px 0 13px;
  }
</style>
<div class="left-model">
  <span class="side-logo"> <img src="https://cdn.casbin.org/img/casdoor-logo_1185x256.png" alt="Casdoor" style="width: 120px"> 
    <span>SSO</span> 
  </span>
  <div class="img">
    <img src="https://cdn.casbin.org/img/casbin.svg" alt="Casdoor"/>
  </div>
</div>

好，让我们看看效果。 The side panel with a logo and image is shown, but the result is not satisfactory.

步骤 4_result1.png

To improve the look, you need to modify and add some CSS in the Form CSS.

步骤4_modify_CSS.gif

最后代码如下。

<style>
  .login-panel{
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);
  }
  .login-form {
    padding: 30px;
  }
</style>
信息

.login-panel and .login-form are the class names of div elements. 它们对应于页面的不同区域。 If you want to customize the login page further, you can write CSS code here, targeting these class names.

Finally, we have a beautiful login page!

步骤 4_result2.png

总结​

To summarize, we have added a background image, customized the login panel style, and enabled the side panel.

Here are some additional resources about application customization in Casdoor:

Thank you for reading!