[question] customize logo on login page?

[shahargl]

Hey, I'm trying to figure out how to add my logo to this sign-in page (let's say under "keep" and above "sign in to your account".

Couldn't find a way to build keywind theme with a logo.

[francoisauclair911]

It's in the components/layout/card-header.ftl
my file looks like this

<#macro kw>
  <header class="space-y-4">
    <img src="<IMG_URL>"
    class="logo">
    <#nested>
  </header>
</#macro>

[francoisauclair911]

My bad, that was for a previous version, more recent version should be editing this file
https://github.com/lukin/keywind/blob/master/theme/keywind/login/components/atoms/logo.ftl

[thienlv2]

@francoisauclair911
Sorry, can you tell me how to edit a file in the theme/keywind/login folder on a local environment so I can immediately see the changes in the HTML code? When I run yarn dev and edit theme/keywind/login/login.ftl, then access http://localhost:5173/html/login/login.html, I don't see any changes. The /html directory seems to have no connection when developing, right?

[shahargl]

@francoisauclair911 thanks for the response.

I've tried to edit logo.ftl and change it from

<#macro kw>
  <div class="font-bold text-center text-2xl">
    <#nested>
  </div>
</#macro>

to

<#macro kw>
  <div class="font-bold text-center text-2xl">
    <svg> my svg </svg>
    <#nested>
  </div>
</#macro>

But it didn't change anything. Any other idea?

[ohmygodvt95]

@shahargl i found the solution for this #82

[shahargl]

@ohmygodvt95 but I don't even think that's my problem. I've compiled the JAR and I still don't see the logo. I'm not sure changing logo.ftl actually adding the SVG.

[GerardWoldendorp]

@francoisauclair911 How should I do the logo url, and would you happen to know how I can make my logo appear on the login page?

[meezaan]

@shahargl @francoisauclair911 Just add it under HTML Display Name in the Realm Settings. That's how I've always added a logo, to Keywind or other themes, and it works like a charm.

[meezaan]

@francoisauclair911 Sorry, can you tell me how to edit a file in the theme/keywind/login folder on a local environment so I can immediately see the changes in the HTML code? When I run yarn dev and edit theme/keywind/login/login.ftl, then access http://localhost:5173/html/login/login.html, I don't see any changes. The /html directory seems to have no connection when developing, right?

Have you assigned the theme in the keycloak admin menu to your realm?

[chmoder]

I made a file in /login/messages/messages_en.properties and set loginAccountTitle to make the "sign in to your account" message go away.

[jarulsamy]

For anyone else still having trouble with this, I placed my logo in login/resources/logo.png
Then edited login/components/atoms/logo.ftl to look like this.

<#macro kw>
  <div class="font-bold text-center text-2xl">
    <img src="${url.resourcesPath}/logo.png" class="logo">
    <#nested>
  </div>
</#macro>

This dynamically generates the right path to the resources folder.

[paulwer]

you may check if #96 solves this :)