Examples of how to modify the banner

There are various ways that you can modify the banner on your instances.

Label multiple instances differently

  • On all instances, leave glide.product.description <blank>
  • On PROD instance, set glide.product.name to <My Company>
  • On DEV instance, set glide.product.name to <My Company - DEV>

Control the window title

Since the window title is composed of glide.product.name and glide.product.description, the following gives you complete control over the banner and the window title.
  • glide.product.name set to <Window Title that you want>
  • glide.product.name.style set to <display: none>
  • glide.product.description set to <blank>

The company record Banner Image and Banner Text are used to set the banner image and text since the company banner text is not used in the window title.

Use HTML in the banner text

  • glide.product.name set to <My Company>
  • glide.product.name.style set to <display: none>
  • glide.product.description set to <Some text <a href="some_url">Click here</a>>

Position banner text over the banner image

  • glide.product.name set to <My Company>
  • glide.product.name.style set to <display: none>
  • glide.product.image set to <your company logo.gif>
  • glide.product.description set to <Some text for the description>
  • glide.product.description.style set to <position:absolute; top:5px; left:100px> (position values may vary based on specified needs)

Apply a background image to the banner

Often corporate guidelines require more in-depth branding of the ServiceNow interface. Using the tiling technique, you can modify your logo image to have a transparent background, so that you can apply another image to the banner beneath the logo.

Upload an image to the image manager and then create a new property named css.banner.background.image, so that you can call the image. The value should look like this.
  • css.banner.background.image value url('./images/MasterBG.jpgx')

Write CSS rules that apply this change

/** BACKGROUND - These properties allow you use to add a background tile to the header of the instance  ***************************/
TD.bannerLeft,TD.bannerCenter,TD.bannerRight, TR#banner_row{background-color: ${banner.background.color};
background-image: ${banner.background.image};
background-position: ${banner.background.position};
background-repeat: ${banner.background.repeat};}
Note: The banner image and banner text associated with the primary company or specific companies may be used instead of the glide.product.image and glide.product.description properties to get the same effect.