UPDATE: Most of this customization can be accomplished through the use of system properties described here (transparent image, gradient background). Whenever possible, these properties should be used in place of the customization described below.
UPDATE 2: I’ve received several questions about the wiki documentation linked to above. I agree it’s confusing! We still do this customization all the time at Crossfuze Solutions for our clients using a couple of properties. The good news is that it’s nowhere near as confusing as it’s made out to be to add a simple background color and image to your instance header. Here are the steps we took to produce the following look in our company instance. Note that styling of the Banner bar and Logout button is no longer possible with the properties ServiceNow has made available.

Service-now.com custom header

1) Upload your background image (if desired) using the ‘System UI -> Images’ module
2) Create (or set) the ‘glide.banner.style’ system property with a value similar to this… background: #444444; background-image:url(‘triangles.pngx’);
3) Create (or set) the ‘css.banner.background.color’ system property with a value of transparent
4) Remove the product description (text that appears next to the header logo) by changing the ‘glide.product.name.style’ property to include ‘display:none’ like this… padding-bottom: 0px; padding-top: 0px; display:none;
5) Adjust the ‘glide.product.name’ property to reflect whatever you want to appear in the browser tab. We use ‘Crossfuze – ServiceNow Portal’

ServiceNow allows you to brand your ServiceNow instance by uploading any image to the primary company record in your instance.  The result of this branding is an instance showing your custom logo in the top-left corner of the screen on top of a plain white background.  This type of customization works great but some customers want to take this idea even further and really tweak the look of their header.  Maybe they want to add some links in the header or they want a custom background to better match their corporate branding.

Service-now.com custom header


It is possible to use custom CSS and HTML to completely customize the look of the header in your instance.  You do need to be careful when doing this that you don’t break something else in the process.  Any time you make a modification like this you’ll want to make sure that you test the modification thoroughly in all browsers used in your organization.  Below are the steps I took to produce the look in the image above.

1Navigate to ‘System UI – UI Scripts’ and create a new record.

2Give your UI Script a name and make sure that the ‘Global’ checkbox is checked.

3Paste the following code into the ‘Code’ field of the UI Script. Note that you can customize this code with your own custom HTML and CSS.

try{
   //Set the background CSS of the navigation header
   window.parent.$$('td.bannerRight','td.bannerLeft','td.bannerCenter','td.navpageTools').invoke('setStyle',{backgroundImage: 'url(/blueGreenGradient.jpgx)'});
   //Set the background CSS of the navigation header stripe directly below the logo
   window.parent.$$('tr.nav_header_stripe').invoke('setStyle',{backgroundImage: 'url(/yellowGradient-small.jpgx)'});
   //Set the background CSS of the navigation header stripe 'Logout' button
   window.parent.$$('button.nav_header_button').invoke('setStyle',{backgroundImage: 'url(/rustGradient-small.jpgx)'});

   //OPTIONAL:  Set html text in the banner for font styling, marquee, etc.
   window.parent.$('nav_header_text').innerHTML = '<marquee><strong>My custom scrolling banner</strong></marquee>';
}catch(e){}

–Note the ‘backgroundImage’ lines in the code above. These image names should match the names of images you upload to your ServiceNow instance. Optionally, you could use a standard background color in place of a background image if you wanted to.

4Navigate to ‘System UI -> Images’ and upload your background images. Make sure to name your images so that you can remember them and modify the above script accordingly. I went to http://tools.dynamicdrive.com/gradient/ and created some simple gradients to use. The only thing you’ll need to worry about is the size of your gradients. Because we’re repeating the image in our background using CSS, the gradient image really only needs to be about 5px wide. The height of the gradient image will depend on the height of your custom logo. For reference purposes, the best height to use with the default ServiceNow logo is 50px and the nav header stripe image should be 25px.