SharePoint: Changing the “Add New” Icon


I just got an interesting question on the “Change the “Add New” message for a web part” article about replacing the icon in the Add New Item area of a web part. As CSS does not let you change the attributes of an element (i.e. “src=”), the solution is a bit of a trick.

The before and the after for SharePoint 2007:

image  image

And in 2010:

image    image

The CSS below first hides the existing icon, and then adds a background image to the anchor (“A”) tag. As this results in the text being displayed over the icon, the CSS also needs to add a little padding to move the text over a bit.

The CSS for both 2007 and 2010

Add just before the </head> tag in the master page or in a content editor web part on a single page.


/*  hide the existing image  */
.ms-addnew img

/*  add a background image  */
.ms-addnew a
  background:url(_layouts/images/titlegraphic.gif) no-repeat;
  padding-left: 25pt;






Robert Gunter said...

Thank you Mike your posts have been very useful to me and is starting to become my SharePoint bible. One question though regarding the 'Add New Item' is there a way to change the link that this points to so I can load a custom form instead of the default form.


Robert Gunter said...

Update*** I am able to change the link by adding the below script to the end of the as done when changing the name of 'add new item'. However my link contains a parameter that is set in the content editor so the link in the script below doesn't pick up the parameter. If you could shed any light on this it would be greatly appreciated.



Mike Smith said...


> a parameter that is set in the content editor

Where does the parameter come from? A textbox or a select list? If so, you could just create an onclick event on the control that would update the "add new" link. Tell me more...


Robert Gunter said...

In a bit more detail I am very new to the SharePoint world and I am developing it with only 1st line user support experience. I am trying to set up a parent and child list. The parent is a custom list for meetings the child list is a custom list for user actions. What I am trying to accomplish is when the user selects the meeting and the display form loads they see the details of the meeting plus the actions which are relevant to that meeting which are filtered by a custom parameter (Parent column 'MeetingID' is equal to Query String:ID) the parameter to filter the actions list is working and have managed to change the 'add new item' text (thanks to you) however I now need to change the link of this to http://site/newform.aspx?MeetingID={$MeetingID} so the new form for the action automatically recognises it is for the meeting it was selected from. I can quite happily add a link outside of the child list put it doesn't recognise the parameter I created so I am assuming the link must be within the list webpart. I hope this makes sense to you and apologise for lack of terms but I am very new to this code malarkey.

Supporting Files

Robert Gunter

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.