#9.12keycloak的样式自定义
##一、需修改位置
css
<link rel="icon" href="/auth/resources/4.8.3.final/login/keycloak/img/favicon.ico" />
<link href="/auth/resources/4.8.3.final/login/keycloak/node_modules/patternfly/dist/css/patternfly.css" rel="stylesheet" />
<link href="/auth/resources/4.8.3.final/login/keycloak/node_modules/patternfly/dist/css/patternfly-additions.css" rel="stylesheet" />
<link href="/auth/resources/4.8.3.final/login/keycloak/lib/zocial/zocial.css" rel="stylesheet" />
<link href="/auth/resources/4.8.3.final/login/keycloak/css/login.css" rel="stylesheet" />1. patternfly.css
keycloak-4.8.3.Final\themes\mytheme\common\resources\node_modules\patternfly\dist\css
2. patternfly-additions.css
keycloak-4.8.3.Final\themes\mytheme\common\resources\node_modules\patternfly\dist\css
3. zocial.css
keycloak-4.8.3.Final\themes\mytheme\common\resources\lib\zocial
4. login.css
keycloak-4.8.3.Final\themes\mytheme\login\resources\css页面：
登录页：keycloak-4.8.3.Final\themes\base\login的login.ftl
登录页模板：keycloak-4.8.3.Final\themes\base\login的template.ftl##二、调整
###1.登录框到浏览器顶200px
patternfly-additions.css 的5125行
@media (min-width: 768px) {
.login-pf-page .login-pf-page-header {
margin-bottom: 40px;
}
}
@media (min-width: 768px) {
.login-pf-page .login-pf-page-header {
margin-bottom: 84px;
}
}
再改，解决鬼畜
@media (min-width: 768px) {
.login-pf-page .login-pf-page-header {
margin-bottom: 55px;
}
}###2.隐藏“域”标题
login.css 的105行
#kc-header-wrapper {
font-size: 29px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.2em;
padding: 62px 10px 20px;
white-space: normal;
}
#kc-header-wrapper {
font-size: 29px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.2em;
padding: 62px 10px 20px;
white-space: normal;
visibility: hidden;
}###3.登录框调整
login.css的374行
.card-pf {
background: #fff;
margin: 0 auto;
padding: 0 20px;
max-width: 500px;
border-top: 0;
box-shadow: 0 0 0;
}
.card-pf {
margin: 0 auto;
padding: 0 20px;
border-top: 0;
background: rgba(255,255,255,0.08);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 4px;
max-width: 384px;
max-height: 384px;
}###4.登录框内边距
patternfly-additions.css的5141行
@media (min-width: 768px) {
.login-pf-page .card-pf {
padding: 20px 40px 30px 40px;
}
}
@media (min-width: 768px) {
.login-pf-page .card-pf {
padding: 24px 32px 60px 32px;
}
}###5.“中文简体”调整
login.css的53行
a#kc-current-locale-link {
display: block;
padding: 0 5px;
}
a#kc-current-locale-link {
display: block;
padding-right: 0px;
font-family: MicrosoftYaHei;
font-size: 12px;
color: rgba(255,255,255,0.85);
line-height: 20px;
}
去掉下三角
login.css的66行
a#kc-current-locale-link::after {
content: "\2c5";
margin-left: 4px;
}
a#kc-current-locale-link::after {
margin-left: 4px;
}###6."登录"标题调整
patternfly-additions.css的5184
@media (min-width: 768px) {
.login-pf-page .login-pf-header h1 {
font-size: 24px;
}
}
@media (min-width: 768px) {
.login-pf-page .login-pf-header h1 {
font-size: 24px;
font-family: TRENDS;
color: #FFFFFF;
line-height: 28px;
margin-top: 8px;
}
}
patternfly-additions.css的5172
登录到账号举例：
@media (min-width: 768px)
.login-pf-page .login-pf-header {
margin-bottom: 30px;
}
@media (min-width: 768px)
.login-pf-page .login-pf-header {
margin-bottom: 14px;
}7.“账号密码”字体调整
patternfly.css的2580行
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 8px;
font-family: MicrosoftYaHei;
font-size: 14px;
color: rgba(255,255,255,0.60);
line-height: 22px;
margin-left: 4px;
}
删掉
patternfly.css的9620行
label {
/* font-weight: 600; */
}###8.输入框调整
patternfly.css的2624
.form-control {
display: block;
width: 100%;
height: 26px;
padding: 2px 6px;
font-size: 12px;
line-height: 1.66666667;
color: #363636;
background-color: #fff;
background-image: none;
border: 1px solid #bbb;
border-radius: 1px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control {
display: block;
width: 320px;
height: 26px;
padding: 9px 18px;
font-size: 14px;
color: #333333;
background-color: #fff;
background-image: none;
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
line-height: 22px;
font-family: MicrosoftYaHei;
}
输入框高度
patternfly-additions.css的5148行
.login-pf-page .form-control {
height: 36px;
}
.login-pf-page .form-control {
height: 40px;
}
输入框与密码的高度
patternfly.css的2720
.form-group {
margin-bottom: 15px;
}
.form-group {
margin-bottom: 8px;
}9."登录按钮"框和字体调整
patternfly.css的3515行
.btn-lg,
.btn-group-lg > .btn {
padding: 6px 10px;
font-size: 14px;
line-height: 1.3333333;
border-radius: 1px;
}
.btn-lg,
.btn-group-lg > .btn {
padding: 6px 10px;
font-size: 14px;
line-height: 1.3333333;
border-radius: 4px;
height: 40px;
font-family: MicrosoftYaHei-Bold;
letter-spacing: 2px;
}###10.登录按钮到密码框距离
login.css的369行
#kc-form-buttons {
margin-top: 40px;
}
#kc-form-buttons {
margin-top: 24px;
}###11.错误框
patternfly.css的5094行
.alert {
padding: 11px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 1px;
}
.alert {
padding: 11px;
margin-bottom: 8px;
border: 1px solid transparent;
border-radius: 4px;
height: 40px;
}###12.背景色
login.css的1行
.login-pf body {
background: url(../img/keycloak-bg.png) no-repeat center center fixed;
background-size: cover;
}
.login-pf body {
background-size: cover;
background-image: linear-gradient(154deg, #333333 0%, #242424 78%, #242424 79%, #242424 79%);
}
删掉
patternfly-additions.css的5051行
.login-pf body {
background: #030303 url(../img/bg-login.jpg) repeat-x 50% 0;
background-size: auto;
}
.login-pf body {
background-size: auto;
}##二、手机端
###1.“登录”标题调整
patternfly-additions.css的5180
.login-pf-page .login-pf-header h1 {
font-size: 16px;
}
.login-pf-page .login-pf-header h1 {
font-size: 24px;
font-family: TRENDS;
color: #FFFFFF;
line-height: 28px;
margin-top: 8px;
}##三、问题
1.背景没原来好看，（个人觉得）
2.如果有注册，注册会跳出框外（下边框）
3.选择语言过长，出现滚动条，鬼畜(已解决)
4.登录 定死 template.ftl 的55行
<h1 id="kc-page-title"><#nested "header"></h1>
5.账号 定死 login.ftl 的 11行
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
6.主题，管理界面也是这个
7."数字星球引擎"的字体：浏览器不识别四、解决
解决第3个问题：要求是整个框举距离 顶端200px，我改为190px，因为"选择语言"的下边框过长，出现滚动条##五、效果
###1.设计图/原图
###2.结果图
###3.用户名密码错误
##六、更换界面
..\keycloak-4.8.3.Final\themes下的keycloak文件夹 替换