Custom login theme: image not showing in non master realm

Following the developer documentation, I’ve created a custom login theme that extends keycloak theme. It contains an image folder under /resources.

The image appears when the theme is applied on the master realm, but disappears when I apply it on another realm

Keycloak version: 23.0.6

theme.properties:

parent=keycloak
styles=css/login.css css/custom-login.css

custom-login.css:

.login-pf body {
    background: #eef2fb none;
}

div.kc-logo-text {
    background-image: url(../img/custom-logo-sm.png);
    background-position: center center;
    background-repeat: no-repeat;
    height: 140px;
    width: 500px;
    margin: 0 auto;
}

After digging into the code, I found that the kc-logo-text class only appears in the master Realm. There must be a directive somewhere in login.ftl, but it’s not obvious where it is located.
Any idea ?

I use

.login-pf-page .login-pf-page-header {
/*stuff here*/
}

for the header background banner and

#kc-header-wrapper {
/*stuff here*/
}

for the logo inside the header banner (Keycloak 24). Also switch off the browser cache when testing the theme with modified css content. And delete the content of data/tmp/kc-gzip-cache/ in your keycloak directory after updating the css or img files.

1 Like

It works like a charm thx !


.login-pf body {
    background: #eef2fb none;
}

/* remove logo in the master realm div */
div.kc-logo-text {
    background-image: none;
}

/* add your logo everywhere */

#kc-header-wrapper {
    background-image: url(../img/<your logo>);
    background-position: center center;
    background-size:contain;
    background-repeat: no-repeat;
    font-size: 0; /* remove realm name text */
    height: 260px;
}