Modifying the Banner

From ServiceNow Wiki
Modifying the Banner
Jump to: navigation, search
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>glide.product.name</div>
  • <div>glide.product.description</div>


The DIV that contains the glide.product.name 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

2 Window Title

These properties are also used to set the window title as follows:

glide.product.name glide.product.description

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

3 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.

3.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
Note: Setting a banner image in the company profile overrides the image selected in System Properties > System.


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

4 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 glide.product.name.style 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 glide.product.description.style property to set CSS properties for the DIV used to display the product description in the banner (or company banner text).

5 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)

6 Examples

6.1 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>

6.2 Controlling 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.

6.3 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>>

6.4 Positioning 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)

6.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')


6.5.1 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
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
Views
Personal tools