Changing the “Double Arrow” image used by SharePoints WebPart Connections

Hey Guys,

I’m sure many of you have similar gripes as I do with the little double arrow icon used with WebPart Connections.

In particular most end users complain stating its not apparent that they can use that icon to select items. Luckily I’ve come across a couple neat ways to get around this.

1. The first way which I’m sure many of you know but don’t like is changing the images on the server. If you open your Internet Explorer developer tools (F12) on a page that features the double sided arrows, you’ll notice they have the following image sources:
/_layouts/images/rbunsel.gif” for the unselected arrow
/_layouts/images/rbsel.gif” for the selected arrow
Hence if you go to your SharePoint server “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES” then locate the rbunsel.gif and rbsel.gif you should be able to replace them with an image of your own.

The problem with this is that it makes the change accross the farm for all sites. Maybe some people still like the double arrow?

2. The second option involves a neat little CSS trick and a content editor web part. A little disclaimer, I am by no means a CSS guru or anything and there may be a cleaner method of doing this so feel free to post alternatives in the comments.

The concept is to set a background image in the place of the current images, and then pad the double arrow out of view. Just add the following to the html source of a content editor webpart on the page that contains your double arrows.

<style type="text/css">
IMG[src*='/_layouts/images/rbsel.gif'] 
{
BACKGROUND-IMAGE: url(<YOUR IMAGE URL>); /* This is the url for the image to replace the selected arrow*/
WIDTH: 20px; /*this must equal the width of your new image*/
HEIGHT: 0px; 
PADDING-BOTTOM: 0px; 
PADDING-LEFT: 0px; 
PADDING-RIGHT: 0px; 
PADDING-TOP: 20px /*This must equal the height of your new image it will pad the double arrow out of view*/
}
IMG[src*='/_layouts/images/rbunsel.gif'] {
BACKGROUND-IMAGE: url(<YOUR IMAGE URL>); /* This is the url for the image to replace the unselected arrow*/ 
WIDTH: 20px; /*this must equal the width of your new image*/
HEIGHT: 0px;
PADDING-BOTTOM: 0px; 
PADDING-LEFT: 0px;  
PADDING-RIGHT: 0px;  
PADDING-TOP: 20px /*This must equal the height of your new image it will pad the double arrow out of view*/
}
</style>

Please note that you will need to store the new images for the selected and unselected double arrows somewhere on the site and put their url in place where it says <your image url>.

In my example below I made a simple connection between a document library and an excel web access web part to display selected excel sheets. I saved my replacement images in the site assets library where they can be referenced by the css in the content editor web part.

Obviously you would want to get some nice replacement images or have someone from your digital teams help you out. But if you want to use my images feel free to get them from below 🙂

 selected and  unselected

Cheers