With the introduction of the ‘Database Storage for Images‘ plugin in the Spring 2009 release, administrators have the ability to customize virtually any image in their ServiceNow instance. Although you’ll rarely have to customize any ServiceNow images other than your header logo, it is nice to have the option if you need it. The image library in your ServiceNow instance does have other uses (primarily within the context of Service catalog or CMS work) but this discussion will focus specifically on how to override out-of-box images using the image library.
Let’s say that I have a pretty large corporate logo that makes my instance header take up a lot of screen real estate when it is fully expanded.
Because of this, most users like to work with the header fully collapsed like this…
That’s fine, but that little box image in the collapsed header doesn’t really do much for anyone. I would like to replace that image with a small logo image of my own. Here’s how to do it.
1-First you need to find the filename and path of the image you want to override. Right-click the image you want to override and select ‘Properties’ from the context menu. There are a few different ways to get this information, but this way works in both IE and Firefox.
2-Once you have the filename and path information for your image, navigate to ‘System UI-Images’ and create a new record with a name that is the same as the path you gathered in step 1. In this case, the name of my image needs to be ‘images/logos/small_logo.gif’. Then you just need to upload your replacement image. For this specific image, there is a size restriction. I need to supply a small header logo that is 20 x 30 px.
3-Refresh your browser and check out your new image!
Hi,
I can not get this working with the arrow images on order guides – I have tried the steps above (with a few variations), to no avail.
Do you have any other ideas as to how we can override images the are not within System UI -> Images?
By the way, your site has been really helpful – thank-you for the effort you have gone to.
Kind regards,
Michael S
Thanks Michael. I’m glad you are finding the information on the site useful. You should be able to override the images on the order guides the same way. I assume you are talking about the previous and next arrow buttons. You need to add your images to the image library with the following names…
images/next-final.png
images/previous-final.png
That should do it (and may be what you’ve already done). The other thing you need to be careful of is to make sure that the images aren’t cached in your browser. You may need to clear your browser cache to see the new images show up.
Hi Mark,
Thanks for your prompt reply.
The arrows that I was talking about were the ones between the ‘Describe Needs’, ‘Choose Options’ & ‘Check Out’ text at the top of the frame. One of the images is “./images/arrow_body_grey.pngx”.
One thing I have noticed is that “./images/arrow_body_grey.pngx” is missing from the image library, so I am not sure where it is actually being stored on the Service Now server?!?
Thanks again Mark, I appreciate your time,
Michael S
Those should work the same way. Each of those images is actually 2 separate images though, one for the arrow body and one for the arrow head. It doesn’t matter that the original image is not in the image library. That’s the cool thing about this solution. You can override any system image just by uploading an image with the same path/name as the original. So for these images you’ll need to create 2 new images with the following names, and then be sure to clear your browser cache so that you can see the changes.
images/arrow_body_grey.png
images/arrow_head_grey.gif
Hi Mark,
My appologies but it turned out, as you first suggested, to be a caching issue – shift F5 didn’t cut it.
It is now working quite a treat.
Thanks once again!!!
Michael S
Hi Mark,
Even i was trying to change OOB attachment icon. Refering https://servicenowguru.wpengine.com/system-ui/ui-actions-system-ui/create-attachment-ui-action. But it ain’t work me. Anything extra we need to do in order to change the same.
Thanks & Regards,
Ayush Saxena
Nothing extra, just follow the instructions here, clear your cache, and test. It should work without issue as long as you’ve named your new image correctly. To replace the attachment icon your new image should have the following name…
images/icons/attachment.gif
Thanks a lot! It worked like a charm.