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.
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.
//Set the background CSS of the navigation header
//Set the background CSS of the navigation header stripe directly below the logo
//Set the background CSS of the navigation header stripe 'Logout' button
//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>';
–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.