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

Advertisements

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

  1. What version of IE do you run this on? IE 8 doesn’t allow you to add padding to an image like that. Only containers can have padding.

    • Hi Dan,

      For my example I’ve checked this for IE 8 and 9 as well as Google Chrome and it looked to be working alright. I may have mis-phrased as it is applying padding to the object. Again I am no CSS guru but its my understanding that this should work with IE 7 and up as it is a CSS 2.1 property.

      Have you tried changing the position of the content editor webpart? i.e. placed above or below the webparts that are making the connections. I have heard of situations where the style doesn’t get applied depending on its order in the page (if you have other styles that may conflict).

      • Hi Brent,

        Thanks for the reply. I did try to move the CEWP before as well as after the WP that it’s trying to affect. No positive results regardless. What’s really odd is that if I open up the Developers Tools and examine the image’s Trace Styles, it is indeed picking up the custom CSS and not being overridden by any other style code. The browser just isn’t obeying the CSS, for lack of any better term. Are you declaring any specific DOCTYPE in the master page? Wondering if that might have something to do with how the browser is behaving. Temporarily I’ve gone with the swapping of the actual image file in the 14 hive, and am hoping I don’t hear any complaints (rather unlikely given our environment). But I’d still like to figure out why the custom CSS isn’t being acted upon. The order of precedence says it should be working. Thanks again for your assistance! 🙂

  2. The CSS code worked for me and I’m on IE 8. I did have to remove the ” around the URL to get it to work, but once I did so, it worked like a charm. Thanks.

  3. Pingback: Change the double arrow icon in connection list » Rent in London

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s