Modify SharePoint Add link in a list or library

For such a small little guy, the “Add” action link for a SharePoint list or library can sure cause a lot of grief for people.  Here is a sample of the SharePoint Add link if you were looking at a Links list.  Different lists show different text, such as Add Document or Add New Announcement.

Add new link option for SharePoint lists and libraries

I hear a lot of requests to change the look and feel of the link or move it to a different location on the web page. Luckily there is a lot you can do with CSS alone. 

Before you dive into these CSS tricks…

For all of these little tricks you need to be working with a custom CSS file that you have created for your SharePoint site.  You can link to the CSS file from your master page file, or link to the file by using the Alternate CSS URL settings in the master page settings for the site (publishing sites only).

The Add action link appears in List View Web Parts. These web parts are used in two main places, and depending on your site and page content you may want to affect the Add action link in one place, the other or both:

  1. List View Web Parts on summary style pages such as home pages, web part pages, and in rich text editors.  Imagine if you will… you are looking at a SharePoint web page and you choose to add a web part. Perhaps there is other content or web parts on this page. We will refer to this as Summary.
  2. List View Web Part within a list or library view page.  Get the imagination going again, you click into a list or library and see the data for the list, typically on the AllItems.aspx page. Let’s refer to this as Expanded.

If you want to affect the Add action link for both Summary and Expanded, well you are good to go.  If you want to be more selective about where the changes appear, then please refer to the bottom of this article for some suggestions on how to restrict where your CSS changes are applied.

Quick list of the contents:

  1. Hide the plus icon to the left of the “Add…” text
  2. Replace the plus icon with a new image
  3. Move the Add action link to above the list table
  4. Change the look and feel of the Add action link, a.k.a. update the branding
  5. Convert it to a + only
  6. Controlling where the CSS changes are applied

Hide the plus icon to the left of the “Add…” text

Not many folks care for the little plus icon to the left of the text.  You can hide it easily with a little CSS. As is, the following CSS style statements will affect the link in all List View Web Parts (Summary and Expanded).

/* Hide the Add New action link plus icon */
td.ms-addnew .s4-clust {
	display: none !important; /* !important included to override inline SharePoint style */
}
/* This is optional; it removes the padding from the left of the link text */
td.ms-addnew  {
	padding-left: 0; 
}

Result:

Replace the plus icon with a new image

Perhaps you want an icon in front of the Add text, just not the default one that comes with SharePoint. This code will allow you to switch in your own graphic. As is, the following CSS style statements will affect the link in all List View Web Parts (Summary and Expanded).

/* Hide Add action link default plus icon */
td.ms-addnew span.s4-clust img {
	display: none !important; /* Need !important to override inline style */
}

/* Place in new icon for plus */
td.ms-addnew span.s4-clust {
	background: url(http://classcdn.s3.amazonaws.com/images/navigate_plus.png);
	width: 16px !important; /* Need !important to override inline style */
	height: 16px !important; /* Need !important to override inline style */
}

/* Adjust text placement of link to match icon */
a.ms-addnew {
	margin: 0 0 0 4px;
	display: inline-block;
	height: 16px;
	position: relative;
	top: -4px;
}

Result:

Move the Add action link to above the list table

You can shift the placement of the Add action link to be above the list as opposed to below it.  The following CSS sets up the placement for both Summary and Expanded list views but please note the differing CSS style statements for each.

/* Required for absolute positioning of Add action link */
table.s4-wpTopTable  {
	position: relative;
}

/* Add space above list table to show Add action link */
td > div > table {
	margin-top: 25px; 
}

/* Position Add action link for expanded list views */
td.ms-addnew {
	position: absolute;
	top: 2px;
	left: 2px;
}

/* Position Add action link for summary list views */
.col-fluid-1 td.ms-addnew {
	position: absolute;
	top: 30px;
	left: 7px;
}

Result:

If you want the link on the right side instead, change the “left” property to “right” and adjust the pixel value accordingly.

right: 5px;

Did this CSS not work for your summary view? You may need to change the descendent selector in the last style statement. Skip to the end for details.

Change the look and feel of the Add action link, a.k.a. update the branding

The simple text link can easily be converted to a snazzier button. As is, the following CSS style statements will affect the link in all List View Web Parts (Summary and Expanded). Don’t get spooked by the length of the code, a good chunk of this is CSS3 gradient backgrounds which you don’t have to use.

/* Hide Add action link default plus icon */
td.ms-addnew span.s4-clust {
	display: none !important; /* Need !important to override inline style */
}

/* Create button for Add action link */
a.ms-addnew {
	display: block;
	padding: 7px;
	width: 130px;
	text-align: center;
	font-size: 14px;
	font-family: Tahoma, sans-serif;
	color: black;
	font-weight: bold;
	background: #bfd255; /* Old browsers */
       /* The following properties are CSS3 */
	text-shadow: #fff 0px 0px 5px; /*X,Y,blur*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
	webkit-box-shadow: 0px 0px 7px #000;
	-moz-box-shadow: 0px 0px 7px #000;
	box-shadow:  3px 3px 3px #676767; /*X,Y,blur*/
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDI1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhlYjkyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzcyYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZWNiMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-8 */
}

/* Hover effect for Add action link */
a.ms-addnew:hover,
a.ms-addnew:focus	{
	text-decoration: none;
	background: #b7deed; /* Old browsers */
       /* The following properties are CSS3 */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGVlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzcxY2VlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIxYjRlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiN2RlZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-8 */
}

Result:

You can switch out the gradient background properties for a background image instead.

background: url(specify image path here);

Convert it to a + only

If you just want to do away with the “Add…” text altogether you can veil the text and layer in an icon or character, such as +, on top of the link area. As is, the following CSS style statements will affect the link in all List View Web Parts (Summary and Expanded). And as before, the code looks scary only because of the background gradient.  You can use an image or just a solid color instead.

/* Hide Add action link default plus icon */
td.ms-addnew span.s4-clust {
	display: none !important; /* Need !important to override inline style */
}

/* Create button for Add action link */
a.ms-addnew {
	position: relative;
	overflow: hidden;
	color: transparent;
	display: block;
	padding: 7px;
	width: 20px;
	height: 20px;
	background: #bfd255; /* Old browsers */
       /* The following properties are CSS3 */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
	webkit-box-shadow: 0px 0px 7px #000;
	-moz-box-shadow: 0px 0px 7px #000;
	box-shadow:  3px 3px 3px #676767; /*X,Y,blur*/
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDI1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhlYjkyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzcyYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZWNiMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-8 */
}

/* Hover effect for Add action link */
a.ms-addnew:hover,
a.ms-addnew:focus {
	color: transparent;
	background: #b7deed; /* Old browsers */
       /* The following properties are CSS3 */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGVlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzcxY2VlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIxYjRlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiN2RlZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-8 */
}

/* Create + symbol */
a.ms-addnew:after {
	content: "+";
	position: absolute;
	bottom: 4px;
	left: 9px;
	font-size: 20px;
	font-weight: bold;
	color: black;
       /* The following properties are CSS3 */
	text-shadow: #fff 0px 0px 5px; /*X,Y,blur*/
}

Result:

Controlling where the CSS changes are applied

One of the best ways to control where your CSS is applied inside of SharePoint – where there are so many items that use the same CSS classes – is a descendent selector. A descendent selector will restrict the CSS properties to only be applied to the element if the element is preceded by a different specified element. Here is an example:

Papa-Bear-Selector Baby-Bear-or-any-of-Baby-Bear’s-Granbabies-Selector {properties}

A space separates the two selectors, thus making this a descendent selector. Don’t confuse this with a child selector, which would include the greater than symbol between the selectors and enforces a direct parent-child relationship:

Papa-Bear-Selector Baby-Bear-ONLY-Selector {properties}

The kicker with the list views is that the HTML is widely the same between the Summary and Expanded views. What this means for CSS is a limit on available differing selectors. With the Expanded view, SharePoint gets down to business rather quickly and jumps right into the list table.  But for Summary pages, there is generally more HTML involved to set up the more intricate layouts, like the two columns in the content area.  We can use this to our advantage to pick out parent elements and use it in a descendent selector.

An example from a SharePoint Enterprise Wiki page is the class col-fluid-1. For a Team Site you could use the ID layoutsTable. Publishing sites will be more varied due to the use of page layouts but a couple of examples are the class of welcome for Welcome Page page layouts and class of article for Article Page page layouts. Bottom line is you will have to do a little hunting in the rendered source code for a good descendent selector.

Got ideas?

If there is something else you want to do with the Add action link, let me know in the comments and I will see what I can do!