Copied to clipboard

Flag this post as spam?

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


  • Elin 45 posts 166 karma points
    Sep 16, 2017 @ 00:41
    Elin
    0

    How to change the back office colors

    Hi,

    I'm trying to change the back office side bar colors, but I can't locate the corrects files.

    I know I shouldn't change these files as I read in a lot of post, but this is something I need to do.

    Can anybody help me locate the css file to the side bar color ?

  • Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib
    Sep 16, 2017 @ 07:33
    Kevin Jump
    104

    Hi

    the file is umbraco/assets/css/umbraco.css but don't change this file - it is compliled and minified, and any upgrade of umbraco will break your changes.

    instead.

    create a folder called backofficestyles in the App_Plugins folder

    in that folder place the following package.manifest file.

    {
        "css" : [ "~/App_Plugins/BackofficeStyles/backoffice.css" ]
    }
    

    Then create a stylesheet called backoffice.css in the folder and make all your changes in that.

    the example below will make the sidebar blue:

    ul.sections {
        background-color: #0D47A1;
    }
    
    ul.sections li.current {
        background-color: #039BE5
    }
    

    this will persist between any updates, and you won't need to alter any of the core files.

    - When changing style-sheets and settings (which ever way you do it) it is best to have debug="true" on the compilation section of your web.config, and have something like chrome developer tools open on your browser so it doesn't cache the files

  • Elin 45 posts 166 karma points
    Sep 16, 2017 @ 13:32
    Elin
    0

    Hi Kevin,

    Thanks for the suggestion, it worked beautifully, even better than what I had in mind.

    Thanks again for helping.

Please Sign in or register to post replies

Write your reply to:

Draft