Change Logo size

[Iskara 0]

Hi all

I was wondering whether there is way to customize the CSS to have a larger logo. I have my own custom logo that I put as logowhite.png and logodark.png in the theme folder, however it is appearing quite small on the page now as you can see on this screenshot:

If there are options to change how large the splash.png image is loaded that would be nice.

Thanks in advance for your help!

[user24 404]

Hi, here's some ideas for you to try...

with no custom logo sizing at all, my screen, with standard Emby logo, looks like this:

then, use CSS something like this for 1.5 times larger logo:

.skinHeader h2.pageTitleWithLogo.pageTitleWithDefaultLogo {
            transform: scale(1.5) !important;
            transform-origin: left center !important;
        }

this is the result:

Note: with the standard Emby logo, I found sizes above 1.5 tend to crop the logo top and bottom and you would then run into problems with the whole menu header and row height constraints by modifying the CSS further.

Also: depending upon how you configure the LHS panel in Emby and the aspect ratio of your logo, you may need to experiment with the horizontal placement of your logo. Perhaps replace the transform-origin line with something like this (px adjusted to suit your set up):

margin-left: 50px !important;

Good luck with your customizing!

[Iskara 0]

19 hours ago, user24 said:

Hi, here's some ideas for you to try...

with no custom logo sizing at all, my screen, with standard Emby logo, looks like this:

then, use CSS something like this for 1.5 times larger logo:

.skinHeader h2.pageTitleWithLogo.pageTitleWithDefaultLogo {
            transform: scale(1.5) !important;
            transform-origin: left center !important;
        }

this is the result:

Note: with the standard Emby logo, I found sizes above 1.5 tend to crop the logo top and bottom and you would then run into problems with the whole menu header and row height constraints by modifying the CSS further.

Also: depending upon how you configure the LHS panel in Emby and the aspect ratio of your logo, you may need to experiment with the horizontal placement of your logo. Perhaps replace the transform-origin line with something like this (px adjusted to suit your set up):

margin-left: 50px !important;

Good luck with your customizing!

Unfortunately, this doesn't seem to change anything. Am I doing it wrong?

[user24 404]

You could even try something more simple like this perhaps:

  .pageTitleWithDefaultLogo {
            transform: scale(10) !important;
            transform-origin: left center !important;
        }

this gave me a massive 10x logo - cropped by the parent row height (which is very obvious to see, though not what you want):

I guess you are doing the basic things such as: Save the css, refresh the page, try clearing caches in your browser settings...???

Beyond that, you could inspect the logo element with DevTools in your setup, to make sure the logo is the same class as I used.

Right click the logo and then select "Inspect" you should see something like this:

Depending upon your version of Emby, and what other customizations you are running, you might have different classes, and/or different parent containers and need different CSS targeting than what works on my setup.

Maybe this gives you some clues - or perhaps some prompts to ask whichever AI LLM you prefer - ChatGPT, Claude, Gemini, Copilot...

Perhaps other community members may be able to suggest other things for you to try...