Casdoor集成市场

Split | 登录主题

Split

A brand panel in your color with your own headline next to the sign-in form. It sets the side panel HTML, which organization admins can install on Casdoor 4.20.0 and later; before that only a global admin can.

Casdoor 官方核验浅色侧面板
Split 登录页

这个主题设置了自定义 HTML。Casdoor 4.20.0 及以后,组织管理员就能套用;更早的版本只有全局管理员(built-in 组织的管理员)才能保存,其他人保存时 Casdoor 会保留应用原来的 HTML。

会改哪些设置

主题default
圆角10px
表单位置居中,带侧面板
表单CSS否
表单CSS(移动端)否
侧面板HTML是

这些都在 Casdoor 应用的 界面定制 标签页里,套用主题之后还可以继续调整。

套用到应用

  1. 在下面填好应用,调整主题的设置,然后复制 JSON。
  2. 在 Casdoor 控制台打开 应用,编辑这个应用,点击顶部的 导入JSON,粘贴 JSON 后点 确定。
  3. 点击 保存。下次打开登录页时就会用上这个主题。
{
  "name": "<应用名称>",
  "organization": "<组织>",
  "themeData": {
    "themeType": "default",
    "colorPrimary": "#2563eb",
    "borderRadius": 10,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 4,
  "formSideHtml": "<div style=\"box-sizing: border-box; height: 100%; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: #ffffff; background: linear-gradient(160deg, #2563eb 0%, #0f172a 100%);\"><p style=\"margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600;\">Welcome back</p><p style=\"margin: 12px 0 0; font-size: 15px; line-height: 1.5; opacity: 0.8;\">Sign in to continue to Acme.</p></div>"
}