Skip to content

Commit c639f2d

Browse files
lor6lor6
authored
Merge pull request Baeldung#212 from sampada07/BAEL-4439
BAEL-4439: Creating a custom theme for Keycloak
2 parents 3bf14d8 + 0bd26ef commit c639f2d

File tree

25 files changed

+573
-2
lines changed

25 files changed

+573
-2
lines changed

‎oauth-jwt/jwt-auth-server/src/main/resources/META-INF/keycloak-server.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@
5151
"staticMaxAge": "${keycloak.theme.staticMaxAge:2592000}",
5252
"cacheTemplates": "${keycloak.theme.cacheTemplates:true}",
5353
"cacheThemes": "${keycloak.theme.cacheThemes:true}",
54+
"welcomeTheme": "custom",
5455
"folder": {
55-
"dir": "${keycloak.theme.dir}"
56+
"dir": "src/main/resources/themes"
5657
}
5758
},
5859
"scheduled": {

‎oauth-jwt/jwt-auth-server/src/main/resources/baeldung-realm.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1023,6 +1023,7 @@
10231023
"strictTransportSecurity" : "max-age=31536000; includeSubDomains"
10241024
},
10251025
"smtpServer" : { },
1026+
"accountTheme": "custom",
10261027
"eventsEnabled" : false,
10271028
"eventsListeners" : [ "jboss-logging" ],
10281029
"enabledEventTypes" : [ ],

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/css/account.css

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
html {
2+
height: 100%;
3+
}
4+
5+
body {
6+
background-color: #F9F9F9;
7+
margin: 0;
8+
padding: 0;
9+
height: 100%;
10+
}
11+
12+
header .navbar {
13+
margin-bottom: 0;
14+
min-height: inherit;
15+
}
16+
17+
.header .container {
18+
position: relative;
19+
}
20+
21+
.navbar-title {
22+
background-image: url('../img/baeldung.png');
23+
height: 25px;
24+
background-repeat: no-repeat;
25+
width: 123px;
26+
margin: 3px 10px 5px;
27+
text-indent: -99999px;
28+
}
29+
30+
.navbar-pf .navbar-utility {
31+
right: 20px;
32+
top: -34px;
33+
font-size: 12px;
34+
}
35+
36+
.navbar-pf .navbar-utility > li > a {
37+
color: #fff !important;
38+
padding-bottom: 12px;
39+
padding-top: 11px;
40+
border-left: medium none;
41+
}
42+
43+
.container {
44+
height: 100%;
45+
background-color: #fff;
46+
}
47+
48+
.content-area {
49+
background-color: #fff;
50+
border-color: #CECECE;
51+
border-style: solid;
52+
border-width: 0 1px;
53+
height: 100%;
54+
padding: 0 30px;
55+
}
56+
57+
.margin-bottom {
58+
margin-bottom: 10px;
59+
}
60+
61+
/* Sidebar */
62+
63+
.bs-sidebar {
64+
background-color: #f9f9f9;
65+
padding-top: 44px;
66+
padding-right: 0;
67+
padding-left: 0;
68+
z-index: 20;
69+
}
70+
.bs-sidebar ul {
71+
list-style: none;
72+
padding-left: 12px;
73+
}
74+
75+
.bs-sidebar ul li {
76+
margin-bottom: 0.5em;
77+
margin-left: -1em;
78+
}
79+
.bs-sidebar ul li a {
80+
font-size: 14px;
81+
padding-left: 25px;
82+
color: #4d5258;
83+
line-height: 28px;
84+
display: block;
85+
border-width: 1px 0 1px 1px;
86+
border-style: solid;
87+
border-color: #f9f9f9;
88+
}
89+
.bs-sidebar ul li a:hover,
90+
.bs-sidebar ul li a:focus {
91+
text-decoration: none;
92+
color: #777777;
93+
border-right: 2px solid #aaa;
94+
}
95+
.bs-sidebar ul li.active a {
96+
background-color: #c7e5f0;
97+
border-color: #56bae0;
98+
font-weight: bold;
99+
background-image: url(../img/icon-sidebar-active.png);
100+
background-repeat: no-repeat;
101+
background-position: right center;
102+
}
103+
104+
.bs-sidebar ul li.active a:hover {
105+
border-right: none;
106+
}
107+
108+
109+
.content-area h2 {
110+
font-family: "Open Sans", sans-serif;
111+
font-weight: 100;
112+
font-size: 24px;
113+
margin-bottom: 25px;
114+
margin-top: 25px;
115+
}
116+
117+
.subtitle {
118+
text-align: right;
119+
margin-top: 30px;
120+
color: #909090;
121+
}
122+
123+
.required {
124+
color: #CB2915;
125+
}
126+
127+
128+
.alert {
129+
margin-top: 30px;
130+
margin-bottom: 0;
131+
}
132+
133+
.feedback-aligner .alert {
134+
background-position: 1.27273em center;
135+
background-repeat: no-repeat;
136+
border-radius: 2px;
137+
border-width: 1px;
138+
color: #4D5258;
139+
display: inline-block;
140+
font-size: 1.1em;
141+
line-height: 1.4em;
142+
margin: 0;
143+
padding: 0.909091em 3.63636em;
144+
position: relative;
145+
text-align: left;
146+
}
147+
.alert.alert-success {
148+
background-color: #E4F1E1;
149+
border-color: #4B9E39;
150+
}
151+
.alert.alert-error {
152+
background-color: #F8E7E7;
153+
border-color: #B91415;
154+
}
155+
.alert.alert-warning {
156+
background-color: #FEF1E9;
157+
border-color: #F17528;
158+
}
159+
.alert.alert-info {
160+
background-color: #E4F3FA;
161+
border-color: #5994B2;
162+
}
163+
164+
.form-horizontal {
165+
border-top: 1px solid #E9E8E8;
166+
padding-top: 23px;
167+
}
168+
169+
.form-horizontal .control-label {
170+
color: #909090;
171+
line-height: 1.4em;
172+
padding-top: 5px;
173+
position: relative;
174+
text-align: right;
175+
width: 100%;
176+
}
177+
178+
.form-group {
179+
position: relative;
180+
}
181+
182+
.control-label + .required {
183+
position: absolute;
184+
right: -2px;
185+
top: 0;
186+
}
187+
188+
#kc-form-buttons {
189+
text-align: right;
190+
margin-top: 10px;
191+
}
192+
193+
#kc-form-buttons .btn-primary {
194+
float: right;
195+
margin-left: 8px;
196+
}
197+
198+
/* Authenticator page */
199+
200+
ol {
201+
padding-left: 40px;
202+
}
203+
204+
ol li {
205+
font-size: 13px;
206+
margin-bottom: 10px;
207+
position: relative;
208+
}
209+
210+
ol li img {
211+
margin-top: 15px;
212+
margin-bottom: 5px;
213+
border: 1px solid #eee;
214+
}
215+
216+
hr + .form-horizontal {
217+
border: none;
218+
padding-top: 0;
219+
}
220+
221+
.kc-dropdown{
222+
position: relative;
223+
}
224+
.kc-dropdown > a{
225+
display:block;
226+
padding: 11px 10px 12px;
227+
line-height: 12px;
228+
font-size: 12px;
229+
color: #fff !important;
230+
text-decoration: none;
231+
}
232+
.kc-dropdown > a::after{
233+
content: "\2c5";
234+
margin-left: 4px;
235+
}
236+
.kc-dropdown:hover > a{
237+
background-color: rgba(0,0,0,0.2);
238+
}
239+
.kc-dropdown ul li a{
240+
padding: 1px 11px;
241+
font-size: 12px;
242+
color: #000 !important;
243+
border: 1px solid #fff;
244+
text-decoration: none;
245+
display:block;
246+
line-height: 20px;
247+
}
248+
.kc-dropdown ul li a:hover{
249+
color: #4d5258;
250+
background-color: #d4edfa;
251+
border-color: #b3d3e7;
252+
}
253+
.kc-dropdown ul{
254+
position: absolute;
255+
z-index: 2000;
256+
list-style:none;
257+
display:none;
258+
padding: 5px 0px;
259+
margin: 0px;
260+
background-color: #fff !important;
261+
border: 1px solid #b6b6b6;
262+
border-radius: 1px;
263+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
264+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
265+
background-clip: padding-box;
266+
min-width: 100px;
267+
}
268+
.kc-dropdown:hover ul{
269+
display:block;
270+
}
271+
272+
273+
#kc-totp-secret-key {
274+
border: 1px solid #eee;
275+
font-size: 16px;
276+
padding: 10px;
277+
margin: 50px 0;
278+
}

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/img/baeldung.png

6.29 KB
Loading

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/img/favicon.ico

627 Bytes
Binary file not shown.

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/img/icon-sidebar-active.png

202 Bytes
Loading

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/img/keycloak-logo.png

5.09 KB
Loading

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/resources/img/logo.png

4.06 KB
Loading

‎oauth-jwt/jwt-auth-server/src/main/resources/themes/custom/account/theme.properties

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
parent=base
2+
import=common/keycloak
3+
4+
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/account.css
5+
6+
##### css classes for form buttons
7+
# main class used for all buttons
8+
kcButtonClass=btn
9+
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
10+
kcButtonPrimaryClass=btn-primary
11+
kcButtonDefaultClass=btn-default
12+
# classes defining size of the button
13+
kcButtonLargeClass=btn-lg

0 commit comments

Comments
 (0)