CSS to change the Header of WebParts in SharePoint 2010

Describes how to customize a standard Web Part in SharePoint by using SharePoint Designer 2010. Depending of the look and feel 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. 

Download the images and put them into Images library or change the path in the CSS below if you want to put the images in some other folder.

/* 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 }