Home 
Integration tips and tools 
Twitter Feed snc tweets 
Downloads SNCGuru apps 
About/Contact 
About about SNCGuru 
Contact contact SNCGuru 
S
ervice-now.com allows you to brand your Service-now 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 Properties -> My Company’ and open up the primary company record
2Personalize the dictionary entry for the ‘Banner text’ field. Increase the ‘Max length’ field on the dictionary entry from 100 to 1000 and save the dictionary entry.
3Paste the following code into the ‘Banner text’ field on your primary company record. Note that you can customize this code with your own custom html and css.
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
td.bannerRight,td.bannerLeft,td.bannerCenter,td.navpageTools {
background-image: url(/blueGreenGradient.jpgx);
background-repeat: repeat;
border-bottom: 0px solid #000;
}
button.nav_header_button {
background-image: url(/rustGradient-small.jpgx);
background-repeat: repeat;
}
tr.nav_header_stripe {
background-image: url(/yellowGradient-small.jpgx);
background-repeat: repeat;
border-bottom: 0px solid #000;
}
-->
</STYLE>
–Note the 3 ‘background-image’ lines in the CSS style. These image names should match the names of images you upload to your Service-now 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 1px wide. The height of the gradient image will depend on the height of your custom logo.
Comments
Posted On
Feb 09, 2011Posted By
Torsten BrosowHi Mark,
Thank you for pointing this out.
I have a customer requirement to set a banner image over the full width of the page. I tried to use your recommendation above but this didn’t do the job completely.
I discovered the following issues.
It does work if I have only a gradient image over the whole page but with this image (I add the link below) I stucked. Maybe there is another way to do it. ( To make Service-Now nicer
)
https://picasaweb.google.com/lh/photo/Ib0fKFqJe9h…
Posted On
Feb 10, 2011Posted By
Mark StangerThanks for the comment. Unfortunately, I’m not sure exactly how you could set that image up for your header. It might be possible, but would probably take a fair amount of experimentation. Unless the customer has a CSS/HTML expert on their end that can customize it, I would advise them to stick to a more standard header.
Posted On
Feb 13, 2011Posted By
Torsten BrosowDo you know if there are any restriction using browsers like IE V6,7 &8?
Only with IE Version 9 the style code is working.
Posted On
Feb 14, 2011Posted By
Mark StangerI’m running IE8 and it works there and I’m almost positive it works with IE7 as well. I can’t tell you for sure with IE6 though.
Posted On
Jan 12, 2012Posted By
Dan BerglinHi,
I´ve done similar modifications to our banner.
However, when you change the “nav_header_stripe”, you would also like to change the appearence of all list headers and form headers (css.base.color).
Any tip on wheren you can add a to override that?
Kind regards,
Dan Berglin
Posted On
Jan 12, 2012Posted By
Mark StangerI’m not sure why you would need to do that through the header because there’s a system property to change the form and list header color globally. If you need more flexibility for just a single form you could use a client script but I don’t think that’s what you want. I wrote an article about applying both of those modifications yesterday.
http://www.servicenowguru.com/scripting/client-scripts-scripting/change-form-header-background-color/
Posted On
Jan 12, 2012Posted By
Dan BerglinHi Mark,
I dont want to apply it through the header, I want to find the place where it could be added. I want to apply gradient (background-image) on the same stripes/list-headers/form-headers as the css.base.color property applies to. Can’t find any good place to add the custom css for it.
Client script would be to much of a hack. It would also most probably flash from solid to gradient onLoad.
Regards,
Dan Berglin
Posted On
Jan 12, 2012Posted By
Mark StangerOkay. I didn’t know you wanted to do a gradient there as well. I actually investigated this at one time but it wasn’t very simple to pull off at the time. I’ll take a look again and see if there’s a way. I’ll post here if I find anything.