Authentication logo

Joh · November 1, 2022, 11:24am

Hi,

I would like to know how to change the authentication page logo. I found out how to change home page logo but not the authentication logo.

Denis · November 1, 2022, 12:04pm

You can edit the keycloak themes-template.

Don · November 1, 2022, 1:44pm

Joh · November 1, 2022, 3:52pm

@Denis , @Don Thanks for your answer.
I tried this option by adding a keycloak-theme.json file and using the default theme that I copied to the deployment folder but I don’t see any changes.

Here is my json file
{
“themes”: [{
“name” : “ENVIRO”,
“types”: [ “login”, “email”, “account” ]
}]
}

Denis · November 7, 2022, 5:17pm

You don’t need to add the json file.

download the templates and copy them to your deployment folder:

./deployment/keycloak/theme/openremote... 
.../account
.../email
.../login

in the login folder, there is a template.ftl, which you can edit.

The OpenRemote Logo is implemented as a SVG.

Beginning at Line 33 to 40

github.com

openremote/keycloak/blob/main/src/main/resources/theme/openremote/login/template.ftl

<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}">
<head>
	<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="noindex, nofollow">

    <#if properties.meta?has_content>
        <#list properties.meta?split(' ') as meta>
            <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
        </#list>
    </#if>
	<title>${msg("applicationName")}</title>
    <link rel="icon" type="image/png" href="${url.resourcesPath}/img/favicon.png"/>
    <link type=text/css rel="stylesheet" href="${url.resourcesPath}/css/materialize.min.css" media="screen,projection"/>
    <link rel="stylesheet" href="${url.resourcesPath}/css/styles.css"/>
	<script type="text/javascript" src="${url.resourcesPath}/js/materialize.min.js"></script>
</head>

This file has been truncated. show original

Joh · November 10, 2022, 5:42pm

Thanks @Denis ,
I did what you said but There is no change even if I change the favicon.png.

Denis · November 10, 2022, 6:41pm

Did you restarted the docker compose and deleted the browser cache? (CTRL + F5)

Joh · November 10, 2022, 8:39pm

Yes, It’s not working

Don · November 11, 2022, 12:42pm

Could you check in Keycloak whether the theme is actually set to the realm your accessing?
yourdomain.com > administration console > select realm > ‘theme’ in the horizontal tab bar > select the correct theme, ‘ENVIRO’ I guess? If its not, select it and save it and see if its working now.

cheezymcsquibble · February 22, 2023, 12:56pm

I followed these steps exactly, and even if I leave the template.ftl unmodified the login page looks like this:

this is my deployment folder structure:

marwan · March 1, 2023, 10:17am

Hey @cheezymcsquibble
I want to know what’s going on with your problem cause I have the same problem and not solved it yet

cheezymcsquibble · March 1, 2023, 12:45pm

It seems to me that there could be a folder missing or the custom deployment isn’t able to access the styling elements for some reason.

marwan · March 1, 2023, 1:28pm

Are you make adding for a custom asset in the portal ?

Don · March 1, 2023, 1:37pm

Hi,

Did you verify in the keycloak portal if the theme is available?

cheezymcsquibble · March 1, 2023, 1:44pm

hi Don,

I only have the ‘master’ realm, and in there I have the ‘base’ selected. If I choose ‘Openremote’ I get this as theme:

Don · March 1, 2023, 1:54pm

Thats what you added right? So seems to be working. Now you can try to modify the images/colors.

Also, on the realms page you can set the login theme without having to go into the keycloak console.

cheezymcsquibble · March 1, 2023, 2:09pm

It doesn’t take any of my changes into consideration though; for example I added my own favicon to the /img folder and renamed the original one. Then I restarted docker, cleared my browser cache but still no change

Also, these are the theme options I see in keycloak:

Don · March 1, 2023, 3:02pm

I think you are missing a folder in your structure there. In ‘themes’ you should add a folder with your theme, lets say ‘cheezy’, which has account, email, login. Then cheezy should show up in keycloak theme select.

Could you try that?

cheezymcsquibble · March 1, 2023, 4:50pm

Now we’re talking! the favicon is working now, I’ll try changing some other stuff to see if it works. Basically this is the correct folder structure, as you said: