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.
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 🙂 )
Thanks 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.
Do you know if there are any restriction using browsers like IE V6,7 &8?
Only with IE Version 9 the style code is working.
I’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.
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?
I’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.
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.
Okay. 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.
Thanks for this info. It works great in IE9+ or in Chrome/Firefox/Safari with one exception.
On the login page for the instance, the CSS is not rendered but is displayed in plain text in the banner instead.. is there a way to stop this?
Also, when the banner frame is minimised (using the arrow in the top right of the banner), the CSS text is again displayed in plain text which is unsightly..
I note your update at the top of the page, I’ve tried to create the “css.banner.background.image” property, but it doesn’t seem to actually do anything.
‘css.banner.background.image’ does work. You may be seeing a caching issue of some sort. Make sure that you remove the CSS from your company record in order to use the system property. As far as the login page and collapsing banner, there’s not a good way to work around that currently.
I must have the wrong syntax for the â€˜css.banner.background.imageâ€™ value. I can’t get it to do anything even on a brand new instance.
I decided to use the â€˜css.banner.background.colorâ€™ property instead but that was also not working.
Strangely, enabling the ‘CSS Theme support’ plugin seems to have resolved this, even without actually specifying any themes on the company record, so it may well have been a caching issue.. Either way, THANK YOU VERY MUCH!
Where you able to find a way to add gradient headers to form and buttons by chance?
I haven’t been able to find a way to do that. It would probably have to be a client script or ui script hack if it could be done at all.
Hi..How can we set the marquee in banner text?I’ve done it in header, but shown the tag once we log out the session…can any one help on this please???
ServiceNow has crippled the ability to do this with the security updates in Aspen. You’ll see the tags if you collapse the form header too. I’m not aware of any good way around it that doesn’t compromise security.
Good news! I think you were on this forum thread, but there’s a way to do this now. I’ve updated the example above to show you how.
This is great work. Do you think this can be used to edit other headers throught out the system? Particuarly I am looking at list headers. I want to use some more gradients.
@Ryan, I tried this…again with this updated solution. While I did manage to get this working for form headers, lists, and buttons, I can’t get it to work for everything across the instance, and across different browsers consistently. Some things don’t work in IE, some things don’t work in popups, some things don’t work outside of the standard frames. Sometimes it’s a button, sometimes it’s a list header. I’m sure that eventually you could track down all of the different issues, but the result would likely be a massive hack. I think the better route would be to request this enhancement through ServiceNow. I’ve asked for this before but didn’t get much traction with the developers as a ServiceNow employee. Maybe you’ll have better luck as a customer.
I am really disappointed with the documentation at http://wiki.service-now.com/index.php?title=Modifying_the_Banner. I have spent hours trying to get this blasted thing to work to no avail. The solution you posted here with the UI Script is the only thing that works, but unfortunately we really need to do it the proper way with the style sheet. I have gone to “sys_properties.list” and added a property called “css.banner.background.image”. I have given it a value of “url(‘./images/Header.pngx’)” and nothing. The instructions are so unclear I even tried “css.banner.background.image value url url(‘./images/Header.pngx’)”. Disabled caching in the browser and reloaded… nothing. Then there is the section about “TD.bannerLeft,TD.bannerCenter,TD.bannerRight”… If this needs to be added to the style sheet somewhere it sure would be nice if the instructions spelled it out. I’m not even sure if this works on Berlin or Calgary at this point. If you could provide any insight into how to get this seemingly simple modification done I would certainly appreciate it. The wiki is no help.
I agree. I’ve updated the top of the article to include simple instructions for producing the header background look. Give that a try and let me know how it goes.
glide.banner.style works just fine. Thanks for the update.
What about removing the search box on the top of the banner? Is there a way to do this?
Probably easiest just to go to the ‘Global Text Search’ module and disable it or adjust the roles that it is available to.
Is there a way to move the search box to a different location within the banner? Thank you!
It’s probably possible, but it would be a pretty major hack to get it done. For all intents and purposes, the answer is ‘no’. I certainly wouldn’t ever recommend it to a client of mine.
What we do all of the time though is set up custom front-end interfaces for end users by using the ServiceNow CMS. That gives you all the flexibility in the world to customize the look and feel and we’ve actually made significant enhancements to the search capability in that interface. You can check out the Self-service/CMS product that my company, Crossfuze, offers here…
Feel free to contact me if you’d like a demo of that enhanced self-service interface.
I am working on a CMS solution; however, I wanted to change the SN banner in the interim. Is there a way to add external links to the banner, on the right side?
No, there isn’t…at least not without an unadvisable hack. If you’re serious about CMS I think it would be well worth your time to let me give you a demo of the Crossfuze solution. We’ve taken a base CMS install down from 2-3 weeks to 10-15 minutes…all while giving you much more functionality and flexibility. You’ll struggle quite a bit with the standard ServiceNow CMS solution when we can supply something so much better in a matter of minutes.
Mark, I’ve looked at all your articles regarding CSS and style sheets and I can’t seem to find the resolution to my issue. I’ve recently upgraded our Sandbox instance to Eureka Patch 4 Hotfix 1 From Berlin to being the evaluations for implementing across all instance. I’ve now also upgraded our Development instance and have started to do the configuration work to accommodate to the changes and features. I really like UI14 but I’m having an issue with the difference between how a Form is presented in CMS versus the standard UI. It looks like after upgrading when using the standard UI the Form Header background was changed to Grey and the text to dark to match the new UI Theme which is perfect. However when clicking into a detail record through the CMS such as an incident or a requested item the form header is still the original blue that it has been while the text is shown as the dark UI14 color which used to be white. This makes the text and button icons hard to see for the average user if they don’t know they are there. I want the Forms to render in the CMS exactly like it does in the standard UI as far as the Form Header is concerned. Basically I want the grey form header bar in CMS just like what I have in the standard UI. I’ve checked over a bunch of different wiki and community articles and combed over the style sheets and looked all over but can’t seem to find where this is set or where I can control it. Any help you can provide would be great! Your articles are very good btw.
Thanks Isaac. I’ve seen this issue reported a few times before and it seems to be a Eureka bug. The best information I’ve found on it comes from this community post…
It sounds like the issue was fixed in Eureka patch 2 so your instance should be okay, but the link also discusses some ways to modify the doctype settings so you could try that. If that doesn’t work you’ll probably need to contact SN support. Please let me know what you find as I’m sure this won’t be the last time someone comes across this issue.
For some reason, every background image I try just comes out tiled. Any way around this?
I know this is old but…..
Anyway to make this occur based on the domain you chose in the domain picker – we are still on Eureka. Looking to highlight to our techs that they are in another domain – as an MSP we answer the phone and emails as our client in some instances and tey have different flows and forms in a domain sep. environment.
I’m not aware of a way to do that unfortunately.