This discussion has been locked. The information referenced herein may be inaccurate due to age, software updates, or external references.
You can no longer post new replies to this discussion. If you have a similar question you can start a new discussion in this forum.

NPM Menu Bar Color Change

Is there a way to change the color of the top Menu bar on NPM from black to another color?  The logo of my company is Solid Black so the image is subdued in the menu bar.  I found some older posts but the script referenced for the certain .css file does not exist.

  • You can try to edit what's in C:\inetpub\SolarWinds\Orion\images\HeaderBannerArea as mentioned here:
    Re: Color Scheme for Menu Bar

  • I saw that posting, but I wasn't sure what to do with the gif.  It's just a small vertical black line.  I changed the color of it to white but it didn't change.

  • IIRC you may have to restart your app pool and website after changing those files.

  • We have done this by changing the CSS for the header and footer. I have also changed the logo css to allow for a bigger/wider logo.  Specifically our changes are to use the logo for the classification type of the site and background color is for the network it is on.  I will get the code change for you on Tuesday when I am back in the office. Bump this if I don’t to remind me. It’s a very basic change. The only annoyance I have found is that there appears to be another set of css files for some of the pages that I need to find and have match. But for majority of pages this simple change works well.

  • So look for the MainLayout.css file located in your InetPub\SolarWinds\Orion\styles folder.  Copy it to your desktop and make the changes there, once done copy it back.

    Search for the following to change the header - change the background here

    .sw-mainnav-branding {

        background: #1d1d1d;

    ....

    Search for the following to change the footer - change the background-color here

    #footer {

        background-color: #1d1d1d;

    ....

    Then look for apollo-website.min.css in your InetPub\SolarWinds\ui\modules\platform\css folder.  Copy it to your desktop and make the changes there, once done copy it back.

    For the background color of the menu - change the background-color here

    .sw-mega-menu__menu{height:40px;background-color:#1D1D1D}

    For the header logo image - change the height to 40px and the max-width to whatever works for your logo ratio

    .sw-header-logo__img{outline:0;max-width:109px;height:30px;margin-left:15px}

    Then look for novajs.min.css in your InetPub\SolarWinds\ui\modules\ui-bundle\novajs\css folder.  Copy it to your desktop and make the changes there, once done copy it back.

    For the background color of the footer - change the background here

    .xui-page-footer{background:#1D1D1D;color:#FFF;padding:15px;clear:both}

    Originally I was only changing the MainLayout.css file and adding an override for the logo image.  I tested updating the apollo and novajs files and it appears to be the original source for the mainlayout page and what the other pages were relying on that didn't use the MainLayout.css file. 

    Let me know if this works for you.

    ** Caveat - You would need to make this change after any upgrade or website reconfiguration.  As the files will be deleted and the original ones put in their place.

  • This is what I needed and worked perfectly!  Thanks so much lazyrabbitt

    You're awesome!!!

  • Hello all,

    Thanks a lot for this information!

    I've modified most of them but I can't get the top bar menu to change.

    It actually does for a few seconds when you login or change tabs, but then it turns itself back to black.

    Any advice?

    Solarwinds.jpg

    Regards

  • Make sure you are doing "apollo-website.min.css" I just upgraded to the latest HF and when I redid it.   This file was key to ensure that it doesn't turn your new color on page load and on page finish return back to black. 

  • I'm afraid this hasn't made any difference. It's still returning back to black

  • This is very helpful. I used to know how to do similar changes to the Main Settings & Administration page. Specifically, to change the font style (bold), color and size. Also to change the hover color. However, recent versions "broke" that for me and I have been unable to locate the proper files to edit. Can you help with this? Thanks so much.