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

8

Umbraco itself looks in both /App_Plugins and in /wwwroot, so it does not matter from the perspective of Umbraco.

I’m not sure if you need it on wwwroot for Razor Class Libraries, but it makes things easier because you don’t have to do anything special for it to be included in the library.

9

Sorry, still not sure where I am supposed to to the folder for this application

10

Hi @Eaglef90 ,

The best practice for v17 is to keep these static front-end assets inside wwwroot, so your final path should be wwwroot/App_Plugins/[YourPluginName]/. Let me know if that makes sense!

Regards,
Shekhar

11

In case anyone else is trying to do this, I found that setting the path to any of the Login Logo Images can tricky as knowing where to put the files, when running the site from VS, is not obvious.

When the BO is retrieving a login image file it does not directly reference it but makes an api call. This presumably then reads the config and attempts to find the file. If you set the path to “/App_Plugins/Login/images/MyLogo.svg” it will not find it no matter if your App_Plugins is under wwwroot or at the project root. And yes I did try with a tilde thus “~/App_Plugins/…” and it still did not work.
So I abandoned trying to use the App_Plugins folder which is at my project root.
(Curiously /App_Plugins/Login folder does work for some styling I have applied to get the text to be customised on the Login page. That location is referenced by a u-package json file. )

The U docs state that the Logo files are referenced from the " /wwwroot/umbraco/"folder.

What I found worked was to use the path in the context of that folder, so have to go up the tree to the wwwroot folder and down to an images folder where my file now resides.

“LoginLogoImage": "../images/MyLogo.svg”
The wwwroot folder is for FE files and other static resources. This folder is also at the project root and is a standard inclusion I believe. Just make a folder named “images” in there and drop your logo image files. F5 your project and the new images should be applied.

12

Can you point me to the correct reference to use to affect the element #logo-on-image when that is shown on the Choose Provider screen. This is the initial page that displays the two login provider options.

I have used your instructions here to make my required change for the logo image when that displays on the actual Login page, and that works, but I would like the Provider screen to behave the same. Currently my image skips from left to right which is annoying.
This is what I have right now. The first instruction works but the second one does not.

:root {
    --umb-logo-left: 760px;  // this works on the login

    --umb-login-left: 760px; // this is my made up reference really just to test. 
                             // want this to work on the timeout page
}

Help is appreciated. I am not a FE dev so shadow Doms are mysterious.

13

So it looks like that screen is the same as the timeout screen and that has to be updated via CSS:

14

And the css for that would be what? Since as I stated, the css for the login does not work on the timeout screen.
The U doc for the Login page specifically says:

The notable difference is that the time out screen is scoped to the login section. The login screen is scoped to the auth section of the localization files.

Different scope would indicate that the css style name is different, which is demonstrated by the fact that the image does not behave the same on both pages. Hence my question.

15

According to what I understand from the doc it is

:root {
    --umb-login-image: url(../myImagesFolder/myTimeout.jpg);
}

If that is not working then I would suggest starting a new thread specific to yoru question. I have not done any more work on customizing these screens and it is completly new to me and as your issues is agacence but not the same as my original question a new thread with your specific issues and what you have tried should get more eyes on it then following up on this older one.

I plan on opening a topic on the CMS github about making all this much easier to customize. If you open a new thread, I will link it and this one in the topic as well as link the topic in the threads when opened.