How to Configure Logo Size in Keycloak Login Theme

UCS - Univention Corporate Server
,
1

I’m customizing the Keycloak login page appearance
As per the documentation I configured UCS theme slightly
https://docs.software-univention.de/manual/5.0/en/central-management-umc/introduction.html#creating-a-custom-theme-adjusting-the-design-of-ucswebs

The changes took effect on Keycloak login page.

Then I added custom logo for Keycloak using --login-logo pasted into
/usr/share/univention-web/themes/mytheme.css
This is the doc:
https://docs.software-univention.de/keycloak-app/latest/configuration.html#customize-the-appearance

However the logo is 500x500 and does not fit, it does not look good. I thought it will get resized.

Should I resize my logo myself? Is it a good frontend practice? Or is there somewhere I can do it in the code in UCS?

Please let me know, thank you.

2

I have managed to figure out correct logo size - it is 78x78. I still do not think it is a best practice to force image size on file, rather than in css/html/javascript?

Even though, the logo is repeated multiple times.

does anyone know how to resolve this please? Thanks.

I am using keycloak logo for this post.

image
image472×444 10.7 KB

3

Looks like we need to update the .login-pf-header CSS property for this?

4

Hi,

I had some success using this config :

  --login-logo: url("/univention/js/dijit/themes/umc/images/login_logo.svg") no-repeat center;

Regards,
Nicolas