Overriding system images in ServiceNow

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.

sncHeaderLogoLarge

Because of this, most users like to work with the header fully collapsed like this…

sncHeaderLogoSmall

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!

sncHeaderLogoSmall-New

Date Posted:

December 31, 2009

Share This:

8 Comments

  1. Michael S January 18, 2010 at 1:05 pm

    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

    • Mark Stanger January 18, 2010 at 2:45 pm

      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.

  2. Michael S January 20, 2010 at 12:04 pm

    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

    • Mark Stanger January 20, 2010 at 1:48 pm

      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

  3. Michael S January 21, 2010 at 12:27 pm

    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

  4. Ayush Saxena May 22, 2014 at 3:23 am

    Hi Mark,

    Even i was trying to change OOB attachment icon. Refering https://servicenowguru.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

    • Mark Stanger May 22, 2014 at 6:53 am

      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

  5. Miriam August 22, 2014 at 8:51 am

    Thanks a lot! It worked like a charm.

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.