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 1737 posts 6098 karma points MVP 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 2311 posts 14697 karma points MVP 7x 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 3 posts 73 karma points
    Jan 16, 2024 @ 10:31
    Stephen Garside
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft