Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nate M 24 posts 165 karma points
    Feb 13, 2025 @ 18:21
    Nate M
    0

    Backoffice Login Screen Customization

    Hello,

    I've figured out how to update the image and logo on the backoffice login screen.

    Now I want to change the size of the logo, but I can't seem to find a way to do that.

    This seems trivial, but after spending hours using different css selectors, I can't seem to change it.

    Is this even possible?

    I've used the following articles in the documentation:

    Copy Link
  • Alex Skrypnyk 6182 posts 24283 karma points MVP 8x admin c-trib
    Feb 16, 2025 @ 16:26
    Alex Skrypnyk
    0

    I saw very customized login screens, so probably it's possible, but I didn't find the official docs about this as well ((

    Copy Link
  • Owain Jones 65 posts 437 karma points MVP 4x c-trib
    24 days ago
    Owain Jones
    1

    I've spent wayyy too long trying to find a way to change the logo size too, but there seems to be no way to do it unfortunately...

    I've opened a discussion/suggestion on GitHub to add this option: https://github.com/umbraco/Umbraco-CMS/discussions/18424

    Copy Link
  • KraCodi 1 post 20 karma points
    24 days ago
    KraCodi
    0

    You might be able to override the size by using a more specific CSS selector. For example, if the logo has a class like .login-logo, you could try adding something like this in your custom CSS file

    Copy Link
  • Robert Runge 3 posts 73 karma points
    23 days ago
    Robert Runge
    0

    Hi, maybe not exactly what you are asking for. Ee are using version 15 and we are using css like this to center login image:

    :root { --umb-login-image: url('/umbraco/media/Login_202501.1.jpg') no-repeat 36% center/cover; }

    Copy Link
  • Dirk Hornstra 2 posts 72 karma points
    21 days ago
    Dirk Hornstra
    0

    Your code is a nice customization of the login image, but the question is about the logo on top of the login image.

    Nate already pointed out where this is caused, in src/Umbraco.Web.UI.Login/src/components/layouts/auth-layout.element.ts you have inline CSS which can not be modified:

      #logo-on-image,
  #logo-on-background {
    position: absolute;
    top: 24px;
    left: 24px;
    height: 55px;
  }

    We have to wait till the team handles the suggestion of Owain.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" button below.

    Continue discussion

Please Sign in or register to post replies