Customize the UI of web parts in SharePoint 2010

Page Image

Image Caption

2/1/2012 9:00 AM   by     Christian Ståhl

?

Categories:SharePoint Designer; CSS; Javascript and jQuery; Web Parts; Site Manager/Power User; MOSS; WSS; 2010

This post describes how to customize a standard Web Part in SharePoint by using SharePoint Designer 2010.

Page Content

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 quite a 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 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 writing 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.

view source

print?

01	/* WebPart headers */

02	/* All tdS in the row */

03	.ms-WPHeader > TD{

04	background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png');

05	background-repeat:repeat-x;

06	padding-left:1px; padding-right:1px; height:33px;

07	border-bottom-style:none!important;border-bottom-color:inherit!important; border-bottom-width:0px!important;

08

}

09	/* Left cell */

10	.ms-WPHeader td:first-child {

11	width:5px;

12	background-image:url('/Style Library/BlogBranding/Images/WP-LeftGreen.png')!important;

13	background-repeat:no-repeat;

14

}

15	/* Right cell */

16	.ms-wpTdSpace {

17	width:7px;

18	background-image:url('/Style Library/BlogBranding/Images/WP-RightGreen.png')!important;

19	background-repeat:no-repeat;

20	background-color:transparent;

21

}

22	/* Arrow */

23	.ms-WPHeaderTdMenu{

24	background-color:transparent;

25	border:0px!important;

26

}

27	/* Web part title */

28	.ms-WPTitle {

29	padding-left:10px;

30	font-family:Arial, Helvetica, sans-serif;

31	color:#fff;

32	font-weight:bold;

33	margin-bottom:1px;

34	font-size:14px;

35

}

36	/* linked title and visited */

37	.ms-WPTitle a, .ms-WPTitle a:visited {

38	color:#fff;

39	text-decoration:none;

40

}

41	/* hover title */

42	.ms-WPTitle a:hover {

43	color:#333;

44	text-decoration:none;

45

}

46	/* hover web part menu */

47	.ms-WPHeaderTdMenu:hover{

48	border-left:1px solid transparent;

49	background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png');

50

}

More stuff you can do

Do 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

view source

print?

01	$(document).ready(function() {

02	var WPtitle = $('.ms-WPTitle span');

03	for (var i = 0; i <= WPtitle.length; i++) {

04	if ($(WPtitle[i]).text() == 'Links') {

05	$(WPtitle[i]).css({'color': 'red'});

06	$(WPtitle[i]).parents().eq(10).addClass("WebPartBorder");

07

}

08	else if ($(WPtitle[i]).text() == 'Shared Documents') {

09	$(WPtitle[i]).css({'color': 'blue'});

10

}

11

}

12

});

Here’s the CSS

view source

print?

01	/* All TDs in the table row */

02	.ms-WPHeader TD{

03	background-color: #f7f7f7;

04	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#e2e2e2');

05	background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#ebebeb));

06	background: -moz-linear-gradient(top, #e2e2e2, #ebebeb);

07	border-top:1px #cfcfcf solid; border-bottom:1px #e2e2e2 solid!important;

08	padding:3px;

09

}

10	/* for css / jquery drop shadow */

11	.WebPartBorder{

12	border:1px #777 solid!important;

13	-moz-box-shadow: 5px 5px 5px #ccc;

14	-webkit-box-shadow: 5px 5px 5px #ccc;

15	box-shadow: 5px 5px 5px #ccc;/* CSS3 */

16	background-color:#fff;

17	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#e9e9e9);

18

}

19	.WebPartBorder > tbody {

20	background-color:#f7f7f7!important

21

}

22	/* Border to the sides */

23	.ms-WPHeader td:first-child {

24	border-left:1px #e2e2e2 solid;

25	border-right:0px;

26

}

27	.ms-wpTdSpace {

28	border-right:1px #e2e2e2 solid;

29

}

30	/* Web part title */

31	.ms-WPTitle {

32	color: #333;

33	font-weight:bold;

34

}

35	/* linked title and visited */

36	.ms-WPTitle a, .ms-WPTitle a:visited {

37	color: #333!important;

38	text-decoration:none!important;

39

}

40	/* hover title */

41	.ms-WPTitle a:hover {

42	color:#0072bc!important;

43

}

44	/* hover web part menu */

45	.ms-WPHeaderTdMenu:hover{

46	background-image:none;

47	border-top:1px solid #ccc;

48	border-right:1px solid transparent;

49	border-left:1px solid transparent;

50	background-color:#f7f7f7;

51

}

52	/* for the jQuery */

53	.LinkTextColor {

54	color:red;

55

}

Hopes this gives you some ideas, and please feel free to drop a comment!