This post describes how to customize a standard Web Part in SharePoint by using SharePoint Designer 2010. Depending of the look and feel or factors such as accessibility, performance or cross browser stability it could be a challenge to bend the web part UI exactly in the way you want. The markup of the web parts in SharePoint contains a quite deep nested table structure and the elements do not always have an id or class.
When you need to create an advanced design for the web parts, the alternatives is to manipulate the DOM with jQuery or create custom web part control wrappers with code. Besides of this, CSS 3 comes with some interesting possibilities like box shadow and border radius that lets you create stuff like boxes with curved corners but it’s not an option here because we need to render the master page in IE8 mode to get all functionalities intact in SharePoint 2010.
So what can you do quick and easily then? The web part headers and all the cells in header row can easily be customized with CSS just like the borders around. I have made four examples with different colors you can download and use at the bottom of this page.
Using only CSS and images for rounded corners is the easiest approach where you don’t need plugins like CSS3 Pie or other htc solutions, fallback methods for different browsers or care about slow rendering when rewriting the already complex and nestled DOM. But when you reach the border of what is possible to do with just CSS and images it’s time to bend the DOM with our friend jQuery or fire up Visual Studio for write a control adapter. Take a look at this blog post from ‘All things SharePoint’ that describes how to use jQuery to adding classes and wrappers into the DOM so you can get a wrapper with rounded corners for the web parts, and take a look at Waldek Mastykars post about how to removing the web part tables with code.
Back to the basics, let’s see how you can customize the web part headers the easy way.
The following example, see the image above, applies background images for the corners and for the middle section. The left and right corners have dimensions of 7 x 33 pixels, and the middle image has dimensions of 14 x 33 pixels.
Let’s go
Download the images and put them into Style Library/BlogBranding/Images or change the path in the CSS below if you want to put the images in some other folder.
/* WebPart headers */ /* All tdS in the row */ .ms-WPHeader > TD{ background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png'); background-repeat:repeat-x; padding-left:1px; padding-right:1px; height:33px; border-bottom-style:none!important;border-bottom-color:inherit!important; border-bottom-width:0px!important; } /* Left cell */ .ms-WPHeader td:first-child { width:5px; background-image:url('/Style Library/BlogBranding/Images/WP-LeftGreen.png')!important; background-repeat:no-repeat; } /* Right cell */ .ms-wpTdSpace { width:7px; background-image:url('/Style Library/BlogBranding/Images/WP-RightGreen.png')!important; background-repeat:no-repeat; background-color:transparent; } /* Arrow */ .ms-WPHeaderTdMenu{ background-color:transparent; border:0px!important; } /* Web part title */ .ms-WPTitle { padding-left:10px; font-family:Arial, Helvetica, sans-serif; color:#fff; font-weight:bold; margin-bottom:1px; font-size:14px; } /* linked title and visited */ .ms-WPTitle a, .ms-WPTitle a:visited { color:#fff; text-decoration:none; } /* hover title */ .ms-WPTitle a:hover { color:#333; text-decoration:none; } /* hover web part menu */ .ms-WPHeaderTdMenu:hover{ border-left:1px solid transparent; background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png'); }
More stuff you can do
If you want to do something special just for one single web part based on some condition or similar? Let’s say you want to have a different look and feel for some web part only if its header text is ‘Links’. I made up an example that makes the header title red and adds a border with a dropshadow filter older IEs and BoxShadow for modern browsers. Other web parts will not apply this look and feel.
Here’s the jQuery
$(document).ready(function() { var WPtitle = $('.ms-WPTitle span'); for (var i = 0; i <= WPtitle.length; i++) { if ($(WPtitle[i]).text() == 'Links') { $(WPtitle[i]).css({'color': 'red'}); $(WPtitle[i]).parents().eq(10).addClass("WebPartBorder"); } else if ($(WPtitle[i]).text() == 'Shared Documents') { $(WPtitle[i]).css({'color': 'blue'}); } } });
Here’s the CSS
/* All TDs in the table row */ .ms-WPHeader TD{ background-color: #f7f7f7; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#e2e2e2'); background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#ebebeb)); background: -moz-linear-gradient(top, #e2e2e2, #ebebeb); border-top:1px #cfcfcf solid; border-bottom:1px #e2e2e2 solid!important; padding:3px; } /* for css / jquery drop shadow */ .WebPartBorder{ border:1px #777 solid!important; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;/* CSS3 */ background-color:#fff; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#e9e9e9); } .WebPartBorder > tbody { background-color:#f7f7f7!important } /* Border to the sides */ .ms-WPHeader td:first-child { border-left:1px #e2e2e2 solid; border-right:0px; } .ms-wpTdSpace { border-right:1px #e2e2e2 solid; } /* Web part title */ .ms-WPTitle { color: #333; font-weight:bold; } /* linked title and visited */ .ms-WPTitle a, .ms-WPTitle a:visited { color: #333!important; text-decoration:none!important; } /* hover title */ .ms-WPTitle a:hover { color:#0072bc!important; } /* hover web part menu */ .ms-WPHeaderTdMenu:hover{ background-image:none; border-top:1px solid #ccc; border-right:1px solid transparent; border-left:1px solid transparent; background-color:#f7f7f7; } /* for the jQuery */ .LinkTextColor { color:red; }
Hopes this gives you some ideas, and please feel free to drop a comment!
/ Christian
Thanks Christian. Where do I put the css code? Is it in its own css file that is referenced by the master page>? No matter what I try I can’t get it to display on web part headers.
Thanks
Johnny
Hi Jonny, yes I recommend you to use an external CSS fil attached to a (custom) master page. Use SPD and connect to to the root site of the site collection and open your custom master page and add a reference to your custom CSS file. You got SharePoint server, this approach is a bit differnet for foundation. Be sure to correct the path to the files in the CSS code. You can read more about how to creat a new master page and a css file in an MSND article I wrote recently, http://msdn.microsoft.com/en-us/library/hh528515.aspx
/ C
Howcome when I register a css, like your example, into a master page, the sharepoint site stops working? I get the message “Something Went Wrong”
I pasted it into Seattle.master
This is totally an unrelated reply, but i didn’t see an e-mail address for you. i created a custom master page for my company. on the home page (http://server/pages/default.aspx) i do not want the left nav bar (quick links), but i do on all the others.
I’ve tried to go into Site Settings —-> Site Actions —-> Tree View
to set the “enable quick links” to false, and that didn’t work.
might there be an additional way of removing the quick links from the main page only???
if you could point me in the right direction i’d be thankful, been banging my head on this all day
– Rob
Dear Christian,
Thank you very much for this help. this is exactly what I needed.
If possible then can u write a blog for customize tree view navigation in the same manner.
Like If we have multiple list in Lists then List should be like the web part header and list name in different color.
really great great stuff, so inspiring!!
thank you christian
Hi there,
I’m trying to figure out if its possible to change the background image using the method you’re using in here….but…seems like the only way is using the id of the webpart.
This is what I’m doing, I got two webparts connected, one of them filter the content of the other, but I would like that the background image also changes when that event happens. So far I have found how to change one webpart without making any changes on the others, but thats it…I have no idea how to catch the event to change dynamically the image. Could you give me a hint?
Thanks in advance
Hi,
i have looked at this and a lot of other examples, I have mine working, however i cant seem to reduce the height to 30:px or 33 in your case. I have a white gap below my colored backgrounds of about 5-10px. any idea where this would be set that would override the css setting of 30px?
Thanks Christian .. great stuff!! 🙂
Thanks for posting this article..it is useful for me.
i have one issue that is actually in this post display the image in only one color but when i add the another web part it will display the another color.If any information regards this issue please share me.
Thanks,
Suresh
Hi!
thank you for your nice explanation!
i got it worked on my sharepoint environment.. but can you tell me how can i implement, that some webparts got the green background, other the red……
it has to be done by jQuery in a CEWP, right?
it would be nice if you can give me a hint to implement it..
best regards,
Martin
Hi Martin!
All SharePoint web parts renders the same markup, so using CSS and set an background color affects all webpart, however you can identify a specific webpart with help of its ID but if you move this webpart lets say to Another web part zone the ID will be changed. If the web part should be fixed onto the page you can do that as well as if its about a a page that’s connected to a page layout, you can create your own wrapper around the webparts… Yeah, Another way is to use jQuery to identify every single webpart on a page with help of its Titel or even a specific property in its settings. If its about a single page you can use an CEWP on the page with that jQuery.
Hope that gives you something to go on with.
/ C
Yes, thats true.. i only want different styles for the webparts on one page… so i would like to do it via jQuery – search for the webpart id and set the css class with jQuery.. could you help me to do that? i think your code snippet needs to be adjusted to the webpart id..
Hello ,
This is great . The link to the images is not working . Can you please give an alternative so that I can download the images. I tried by creating my own images with same dimensions and It doesn’t seem to work properly.
Thanks is advance .