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:

 

And in 2010:

   

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.

<style>

/*  hide the existing image  */
.ms-addnew img
{
  display:none;
}

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

</style>

 

 

.