If I'd have included the Umbraco folder in the project the search would have told me it's in \umbraco\views\components\application\umb-login.html !

Having changed the path to the image I want, I can't get it to show. I've touched web.config, bumped the clientdependency number, restarted the app pool, flushed all caches and rebuilt indexes but the Umbraco logo still stands proud. How can I get rid of it? lol In the browser dev tools if I replace the umbraco logo path with mine the new logo shows up fine so I know the path is correct in code, just can't get it to show.

Any advice anyone?

TIA

/ Craig

Found a further reference at \Umbraco\Js\umbraco.directives.js Ln: 635 which I also changed, restarted site, etc as before but still get the Umbraco logo on the login page instead of my client's.

If I rename umbraco_logo_white.svg then it disappears immediately. Somewhere some code is caching or forcing it to be shown over and above the two places I've already changed it.

/Craig

Hi Craig

If I were you I would either redirect the url /assets/img/application/umbraco_logo_white.svg to the location of my own logo using rewrite rules in web.config, or add some CSS to work with the logo through a package.manifest file.

This is what I have in my baseline project:

umb-login .login-overlay #login:after {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 82 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10C0 4.3 3.2 0 8.7 0c4.8 0 7 3.3 7 7.7 0 1-.1 2.1-.3 3H5c.3 2.9 1.8 4.1 4.2 4.1 1.5 0 3.4-.2 5-.8l1 3.2c-2.2 1-4.6 1.5-6.9 1.5-5 0-8.3-3.2-8.3-8.8zm8.4-6.3c-2 0-3 1.5-3.4 4h6v-1c0-1.8-.8-3-2.6-3zm9.1 6.2c0 5.6 3.2 8.8 8.4 8.8 2 0 4.1-.5 5.9-1.4l-1-3.4c-1.5.6-3 .8-4.1.8-2.8 0-4.2-1.6-4.2-5.3 0-2 .5-3.7 1.5-4.6.6-.4 1.3-.7 2.2-.7 1.2 0 2.5.4 4 1.3l1.8-3A8 8 0 0 0 26.3 0c-5.5 0-8.8 4-8.8 9.9zM33.9.8l.4 7.5v10h4.9V7a4.9 4.9 0 0 1 4-1.9c.7 0 1.4 0 2 .2L46 1c-.6-.5-1.6-.8-2.6-.8-2 0-3.4 1.3-4.6 3.3l-1-3.2-3.9.5zM47.2 10c0-5.6 3.2-10 8.7-10 4.8 0 7 3.3 7 7.7 0 1-.1 2.1-.3 3H52.2c.3 2.9 1.8 4.1 4.2 4.1 1.5 0 3.4-.2 5-.8l1 3.2c-2.2 1-4.5 1.5-6.9 1.5-5 0-8.3-3.2-8.3-8.7zm8.4-6.3c-2 0-3 1.5-3.4 4h6l.1-1c0-1.8-.9-3-2.7-3zm9 6.2c0-5.2 3.3-9.9 9-9.9 5.2 0 8.2 4 8.2 9 0 5.3-3.1 9.8-8.9 9.8-5.1 0-8.2-3.8-8.2-9zm12.2-.2c0-3.4-1.2-5.9-3.6-5.9-1.1 0-1.9.5-2.3 1-.7.9-1.2 2.4-1.2 4.5 0 3.4 1.3 5.7 3.6 5.7 1.2 0 1.9-.5 2.3-1 .8-1 1.2-2.4 1.2-4.3z' fill='%23FFF'/%3E%3C/svg%3E");
    display: block;
    position: absolute;
    top: 31px;
    left: 65px;
    height: 15px;
    width: 65px;
}

umb-login .login-overlay .login-overlay__background-image, .umb-login .login-overlay__background-image--2 {
    background-image: url('/App_Plugins/Ecreo.Branding/login.jpg?saturation=-50&tint=293c55&width=1600') !important;
}

The css file is then referenced in a package.manifest file in a folder in App_Plugins like so:

{
    // array of files we want to inject into the application
    "css": [
        "~/App_Plugins/Ecreo.Branding/branding.css"
    ]
}

With this, I get my own logo next to the Umbraco logo (the first CSS rule), and a custom background image automatically tinted in Umbracos colours, just by adding the image as /App_Plugins/Ecreo.Branding/login.jpg

Thanks Søren, I'll give it a try.

They've sure made it awkward. Used to be a doddle lol

/Craig

They've made the backoffice load a lot faster by inlining much of the html in the js bundle, that is what they've made :)

It's not that streamlined if there's code being downloaded that's not used ;)

The login page isn't really something I'd thought of as having to be super quick and efficient. It's not like it's going to be hit concurrently a thousand times a minute.

Rebranding is a reasonable thing to be able to do so it should be either easy (obvious) or documented. I'll see about raising an issue on GitHub.

/ Craig

I know this is old, but here is how to change the logo and background image of the login page.

1. Copy and paste the image(s) you want to be displayed on the login screen in the Umbraco > assets > img folder.
2. In the config folder, open umbracoSettings.config.
3. Scroll down until you find <loginBackgroundImage> and change the filename to the image name you pasted.
4. You can change the logo as well by changing the filename to the image name you pasted in the <loginLogoImage>

I hope this helps.

is working on a reply...