How to: Change the interface logotype

Summary

The purpose of this article is to explain how to change the 'Northern'-logotype in the reporting interface to an official company logo or something of a similar nature. 

Intended results

A customized logotype instead of the generic 'Northern'-logotype.

Step-by-step

Follow the best practice recommendations below to successfully change the interface logotype:

  1. Use a logo with a transparent background.

    A transparent background makes it possible for the logo to look good regardless of the background color used on the webpage. Below is an example illustrating the strength of using a transparent background by placing the same logo on different background colors:

    Logo example cropped Logo example cropped
    Logo example cropped Logo example cropped
     
  2. Set the image height to a maximum of 40 px and the width in proportion to this number.

    An image with a height larger than 40 px is too big for the top frame in the graphical interface. It is therefore recommended to use this value as a guideline for the logo size. Changing the image size in a graphics editor such as Adobe Photoshop or GIMP is preferable to scaling the image by declaring the height and width dimensions in CSS, as the latter can have a negative effect on the image quality.

    The proportional width can be easily calculated by dividing the final height (e.g. 40 px) with the original height (e.g 100 px) and then multiplying it with the original width (e.g. 400 px).

    •  ((40/200) * 400) = 160 px.
    This means that the final image dimensions are 40 px in height and 160 px in width, just as the 'Logo example' in the previous step.

  3. Copy the finished image to C:\inetpub\wwwroot\NSSConsole\Content\Images on the NSS Server.

    By default, the web server side of the application is installed under C:\inetpub\wwwroot\NSSConsole\. The images relating to the interface design are stored in \Content\Images. This is where your logotype file should be stored.

    The name of the file does not matter as long as it matches the file name later specified in the CustomLook.css-file. Copy and paste the file to the said location and move on to step 4. 

  4. Go to C:\inetpub\wwwroot\NSSConsole\Content\Custom and create a file called CustomLook.css

    The customized logotype configuration is stored in a specific .css-file called CustomLook.css. The content in this file overrides the already existing configuration. This file doesn't exist by default so it needs to be created, either from saving the existing CustomLook.txt-file as a .css-file or by simply creating it from scratch.

    Below is an example of how the logo is added to the custom look, where the path and name of the logotype file is specified along with the width and height dimensions.

    Custom Look

    For copying purposes:

    #nssCompanyLogo {
        background-image: url("Images/logo_example_cropped.png");
        background-size: 160px 40px;  
    }

  5. When finished, save the file and recycle/restart IIS to ensure that the change is reflected.

    Log on to the reporting interface again to observe the changes. Below is the result of the example configurations made in the previous steps:

    Logo changed

More information

See the Useful Resources section for more information on the different NSS components. For advanced troubleshooting, please contact the Technical Support team at Northern (support@northern.net).

KB Article: 3287

Updated: 5/9/2017

  • Category
    • Usage

North America HQ

NORTHERN Parklife, Inc.
301Edgewater Place, Suite 100
Wakefield, MA 01880
USA

Voice: 781.968.5424
Fax: 781.968.5301

salesUS@northern.net

 

Additional Contact Information

EMEA & APAC HQ

NORTHERN Parklife AB
St. Göransgatan 66
112 33 Stockholm
Sweden

Voice: +46 8 457 50 00

salesHQ@northern.net

Northern Parklife



©2018 northern parklife

privacy statement 
terms of use