Copied to clipboard

Flag this post as spam?

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


  • Petrs 10 posts 90 karma points
    Feb 14, 2023 @ 15:01
    Petrs
    0

    Change admin logo and backoffice color

    Hello, I was wondering if there is a way to change the "u" Umbraco logo in the top left corner of admin.

    Can the color of the top bar with menu be changed?

    Also is there a way to remove the Getting started dashboard?

    The best way is to write a package, but I am not sure if those backoffice modifications are possible to edit.

    Thanks a lot Peter

  • Eric 11 posts 42 karma points
    Mar 24, 2023 @ 01:34
    Eric
    0

    I changed a few items in v11 by creating an App_Plugin and adding a few lines to the appsettings.json file. With a little exploring you can find the css classes you want to change.

    1. Create a folder in App_Plugins. Add your css file and the package.manifest so it points to your css file. My css file looks like this:

      .login-overlay { background-color: #fff; }

      .login-overlay__background-image { background-color: #fff; background-size: cover; }

      div.login-overlay__logo { height: auto; max-width: 240px; width: 20%; }

    2. Edit your appsettings.json file. Add the lines below to the Umbraco/CMS/Content node. Edit to point to your files.

      "LoginBackgroundImage": "../images/background.jpg", "LoginLogoImage": "../images/logo.png"

    Hopefully that gets you started in the right direction.

  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Mar 24, 2023 @ 08:23
    Huw Reddick
    0

    This will not change the U icon in the back office, there is no supported way of doing that.

  • Kevin Jump 2348 posts 14896 karma points MVP 8x c-trib
    Mar 24, 2023 @ 09:49
    Kevin Jump
    0

    Hi

    Have a look at the code for Backoffice themes.

    https://github.com/KevinJump/Our.Umbraco.BackOfficeThemes/tree/shared/main/Our.Umbraco.BackOfficeThemes

    We have some css in there for changing the colour of the 'U' but yes short of super hacks. its not yet easy to change the U.

    https://github.com/KevinJump/Our.Umbraco.BackOfficeThemes/blob/shared/main/Our.Umbraco.BackOfficeThemes/App_Plugins/BackOfficeThemes/themes/green/theme.css

  • Eric 11 posts 42 karma points
    Mar 24, 2023 @ 13:08
    Eric
    0

    You are correct. I was thinking of the login page.

  • Stephen Garside 6 posts 78 karma points
    Jan 16, 2024 @ 10:31
    Stephen Garside
    1

    If it helps anyone I managed to do this easily in U13 by creating folder App_Plugins/BackOfficeTheme and adding an index.css and package.manifest file as follows:

    #umbraco-logo-mark{
        background-image: url('/images/core/codebricks_128.png');
        background-size:cover;
    }
    #umbraco-logo-mark svg {
        opacity: 0;
    }
    

    and then:

    {
      "css": [
        "~/App_Plugins/BackOfficeTheme/index.css"
      ],
      "bundleOptions": "None"
    }
    

    Giving this result:

    enter image description here

    Hope this helps!

  • 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" link below.

Please Sign in or register to post replies