Using custom logo - mispositioning

[felagund]

What type of hardware are you using: VPS bought online
What YunoHost version are you running: 12.0.12
How are you able to access your server: The webadmin
Are you in a special context or did you perform specific tweaking on your YunoHost instance ?: not really

Describe your issue

In the webadmin in Domnains, under our domain, I am trying to apply a custom logo. It is displayd but there are several issues with it:

1. First I tried to apply the original SVG file (cannot upload here unfortunately). It is displayed as a huge image next to the login form (you need to scroll right to see it):
   

   

2. Then I opened inkscape and made the page and the drawing smaller. It moved the logo to it s proper position to the top, but terribly misaligned to the top right:
   

   

3. Then I made it even smaller. This time it is in the middle vertically, but shifted to the left:
   

   

4. Then I exported it to PNG and the logo is very small - I would like it to fill the width of the form, if possible. I tried applying somce custom css but the html/css code for login is scary, I could not figure out how to make the logo bigger.
   

   

5. When I tried to upload a different SVG image, it actually is centered (but too small), so maybe our SVG image is somehow not good for Yunohost. But it worked without issues on Yunohost 11.
   

   

Any idea what is wrong?

Share relevant logs or error messages

https://paste.yunohost.org/raw/sadadumute

[JfmbLinux]

With SVG format : img98x85,svg

img, svg {
  max-height: 280%;
  min-width: 160%;
  fill: currentColor;
}

Or

img, svg {
  max-height: 280% !important;
  min-width: 160% !important;
  fill: currentColor !important;
}

I hope this helps

[felagund]

Thank you, but that does not help, either option does not change anything.. The logo is here: Loga – Google Drive

I guess there is something with the SVG file that Yunohost does not expect, but I have no idea what…

[jarod5001]

Try

img[src*="https://domain.com/yunohost/sso/customassets/image.png"]
{
min-width:-webkit-fill-available;
max-height:max-content !important;
max-width:fit-content;
}

Replace https://domain.com/yunohost/sso/customassets/image.png with the url of the logo (right clic on the logo, copy image link)

[felagund]

@jarod5001

img[src*="https://domain.com/yunohost/sso/customassets/image.png"]
{
min-width:-webkit-fill-available;
max-height:max-content !important;
max-width:fit-content;
}

That also does not work. I confirmed I put the correct address by downloading the file with wget. I really thing this is something with our file - but I do not get what could be wrong with it.

[jarod5001]

I just tested with different png sizes and it made it centered with the same width as the login button.
Did you see any changes to the logo or nothing?

[jarod5001]

Here are two portals with the same css

[JfmbLinux]

Browser:

Smartphone:

[felagund]

Oh, sorry. I did not notice this was for the PNG file. Yes, it works with the PNG file. It was not working with the SVG file. Thank you for your help!