Removing the logo images from the login screen?

Questions
1

I had asked a question on how to customize the login screen and was pointed to Login | CMS 17.latest (LTS) | Umbraco Documentation which has helped but it does not answer one of my questions. It shows how to replace the logo and Alt Logo image but not how to remove them, nore control the display size of them. Does anyone know how to remoe the images all together and what CSS would need to be overridden to control the display size of the logo images if I chose to repalce instead of remove?

2

Hi @Eaglef90

That link does mention custom CSS which you can use to hide/show/change the login page from a CSS perspective:

Have you tried that?

You would need to target the login page and it’s elements specifically as the custom CSS would get loaded for all pages in the backoffice.

Justin

3

The CSS talked about does modify the login page a little but non of the listed tags affect the logo or alt logo. They do have tags to change/hide/manipluate the background image and it’s wrapper but that does not help in my case. I can replace the background logo with my logo and affect the rendering size which works but then the Umbraco logo is displayed over mine cause I can’t see how to remove it. If I just replace it with mine and remove the background then I have a very small rending of my logo hovering in the top left of the page.

4

Hi @Eaglef90

I got AI to look into this for you:

Dug into this properly. The reason your CSS can’t touch the logo is that it sits inside the login component’s shadow DOM — so direct selectors won’t reach it. Historically (v13–v15) the logo’s position and 55px height were hardcoded with no override, which is exactly the limitation raised in issue #15626.

That’s since been fixed. The login layout component now exposes CSS custom properties for the logo, which inherit through the shadow boundary so you can set them from your custom CSS (confirmed present in the v17 component source):

--umb-logo-display   (default: block)
--umb-logo-width     (default: auto)
--umb-logo-height    (default: 55px)
--umb-logo-top       (default: 24px)
--umb-logo-left      (default: 24px)

To remove the logo entirely:

css

:root {
    --umb-logo-display: none;
}

And the reason a replacement logo renders tiny in the top-left is that default height: 55px pinned at top: 24px / left: 24px. To resize/reposition instead:

css

:root {
    --umb-logo-width: 220px;
    --umb-logo-height: auto;
    --umb-logo-top: 40px;
    --umb-logo-left: 40px;
}

These apply to both logo elements (the one over the background image and the alternative shown without one), so --umb-logo-display: none clears it either way.

Worth noting these logo variables aren’t yet listed in the official docs’ CSS properties table — only the --umb-login-* set is — so they’re easy to miss. They’re in the component source though, so they’re good to use.

Justin

6

Thanks for digging that up. I was about to start testing it and realized I am supposed to add my custom css file in a sub folder of “App_Plugins” except my default install of v17 does not seem to have that folder anywhere. Any idea where it is supposed to live at? I am thinking under project root but maybe under wwwroot instead?

7

Hi @Eaglef90

You can put App_Plugins in either the project root or wwwroot, I don’t think it matters.

For razor class libraries, they resolve to wwwroot/App_Plugins.

Justin