cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post
Level 12

How To ... Change the header logo and background image

I know there are folks out there that want to change the header logo and background image on their SolarWinds Orion instance to reflect the look and feel of your own company.

I want to share with everyone how to do this.  I am currently running Orion v11.5.2.

Changing the Logo in the header:

    1. The file to edit is: inetpub\SolarWinds\Orion\Controls\PageHeader.ascx
    2. Open the file with your favorite text editor. (The one I prefer is vi so I use gvim)
    3. For changing the logo, find the line that looks like this:

      <td id="userName" style="background-image: url('<%= SiteLogoUri %>'); background-repeat: no-repeat; height: 55px;">

    4. Replace the <%= SiteLogoUri %> with the url or location for your logo.  examples: http:/mycompany.com/mycompanylogo.png
    5. The image can also be put in the inetpub of Orion, in this case you would place the file in 'inetpub/SolarWinds/Orion/images/mycompanylogo.png'
    6. The new line would like like this:Find the Style type named .sw-mainnav-branding, the section will look something like this:

      <td id="userName" style="background-image: url('/Orion/images/mycompanylogo.png'); background-repeat: no-repeat; height: 55px;">

               NOTE: the logo height is set to 55 pixels.

Changing the Header background image:

  1. The file to edit is: inetpub\SolarWinds\Orion\Controls\PageHeader.ascx
  2. Open the file with your favorite text editor. (The one I prefer is vi so I use gvim)
  3. Find the style section named .sw-mainnav-branding
  4. Change the background image URL to the desired image.  The image can be placed in the inetpub/SolarWinds/Orion/images/mybackground.png
  5. The new section would look something like this:
.sw-mainnav-branding {
    background-color: #FFFFFF ! important;
    background-image: URL('/Orion/images/mybackground.png') ! important;
    background-repeat: no-repeat;
    background-position: top right;
    height: 95px ! important;
}

Here is what ours looks like after the changes:

2015-08-14_11-11-00.jpg

Post yours here to show off any cool options.

Hope this helps those that need it.

Deltona‌ I hope this helps.

6 Replies
Level 10

This might be a simple task but how did you add the Search function at the top right of your site?

0 Kudos

That is the global search function.  To install it, you would manually run the installer file C:\ProgramData\Solawinds\Installers\OGSInstaller.msi.  More information can be found at:

https://thwack.solarwinds.com/groups/global-search-preview

Level 12

One thing to bear in mind: If you install an update or run the Configuration Wizard and choose the "Website" option, this file will most likely be overwritten with the default version.  So, you will probably want to keep a backup copy of it just in case.

I use Subversion and when I do this I see changes and compare the new file to my custom file and make the changes appropriately, then copy the updated file into production after the upgrade.

We learned this the hard way.

0 Kudos
Community Manager
Community Manager

Thanks for sharing c.gura‌!

0 Kudos

Thanks C

0 Kudos