Modifying the Banner

From ServiceNow Wiki
Home > Administer > Core Configuration > Navigation and UI > Modifying the Banner
Jump to: navigation, search
Note: This article applies to Fuji and earlier releases. For more current information, see Modify the Banner at

The ServiceNow Wiki is no longer being updated. Visit for the latest product documentation.

Navigation and UI Configuration
Related Topics

1 Overview

The banner is displayed at the top of the page and is built using the following system properties:

  • glide.product.image
  • <div></div>
  • <div>glide.product.description</div>

The DIV that contains the is only shown if the property contains a value, otherwise, it is not used when building the banner. Also, the property glide.banner.image.title controls the tool tip that appears when when the cursor is over the banner.

Note: the properties are overridden by the My Company record.

Image: Banner.png

1.1 Window Title

These properties are also used to set the window title as follows: glide.product.description

If is blank, then ServiceNow is used as the product name for the window title.

1.2 My Company

The banner text and banner image defined for the Company that a user is assigned to may be used to override the glide.product.image and glide.product.description. The banner text, if specified, is used instead of the glide.product.description property. The banner image, if specified, is used instead of the glide.product.image property.

1.2.1 Customizing the Logo in System Properties

To update the banner image in the System Properties > System page, you must first upload the image.

Note: Setting a banner image in the company profile overrides the image selected in System Properties > System.

  1. Go to System UI > Images.
  2. Click New.
  3. Enter a Name for your image. Valid names must end in .gif, .png, .jpg, or .bmp.
  4. Click the Click to add link in the Image field.
  5. Click Update.
  6. Go to System Properties > System.
  7. In the Banner image (must be uploaded first) field, enter the file name of the uploaded image.
  8. Click Save at the top of the page.

1.3 Styling the Banner

The glide.product.description property (and the company banner text field) may contain HTML if necessary to allow links, coloring, etc. to be shown in the banner.

Use the property to set CSS properties for the DIV used to display the product name in the banner. Often, this style is set to display: none so that the product name is not displayed, but still used as part of the Window Title.

Use the property to set CSS properties for the DIV used to display the product description in the banner (or company banner text).

You can also use CSS properties to change the banner background color:

  1. Navigate to System Properties > CSS.
  2. In the Banner and list caption background color field, enter the color you want to apply to the banner.
  3. Click Save.

1.4 Customizing the Banner Logo Link

Properties are available to control the URL and target frame used when clicking the banner logo:

  • glide.banner.image.url: URL used when clicking the banner image
  • glide.banner.image.url_target: Target frame used when clicking the banner image ("gsft_main" for the main frame, "_top" to replace the current browser window, "_blank" for a new window/tab)

1.5 Examples

1.5.1 Label Multiple Instances Differently

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

1.5.2 Controlling the Window Title

Since the window title is composed of and glide.product.description, the following gives you complete control over the banner and the window title:

  • set to <Window Title that you want>
  • 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.

1.5.3 HTML in the Banner Text

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

1.5.4 Positioning Banner Text Over the Banner Image

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

1.5.5 Applying a Background Image to the Banner

Often corporate guidelines require more in-depth branding of the ServiceNow interface. Using the 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') 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.
Was this article helpful?
Yes, I found what I needed
No, I need more assistance