Guest Author: Kyle Schaeffer
KyleSchaeffer.com

SharePoint 2010 has made great strides in terms of design and accessibility, which makes your job as a “SharePoint Designer” much easier. You’ll find that tasks like applying CSS, modifying master pages, and creating layouts is much easier than before.

While you’re applying your design, you should notice that the HTML output going on “behind the scenes” has changed quite dramatically. This changes the way you need to approach designing and styling almost every aspect of your 2010 interface. One area in particular that you’ll want to focus on is the appearance of web parts in your site.

The 2010 Web Part

Web parts in SharePoint 2010 are generally the same as what you’ve seen in 2007. They have titles, a body area, and a drop-down menu for content authors to modify the properties and settings of each individual web part. A new component you might not have noticed is the little check-box that appears to the right of the web part drop-down menu (far right area of the title bar). This check-box allows content authors to select and close or delete multiple web parts all at once.

Web Part Style

Any time you want to change the look and feel of an element in your SharePoint site, you’ll first want to look at the element’s HTML and CSS class names. This gives you a good starting point from which you can start to alter the element’s appearance. We’re looking at a web part now, so let’s see what’s going on behind the scenes:

I’ve highlighted the important CSS classes you’ll most likely use when styling your SharePoint 2010 web parts. First and foremost, the ms-WPHeader table row is the title area of the web part. The red arrow in the image above points to the actual title, itself (an H3 tag). Also of great importance is the body area of the web part (the content below the title). The blue arrow in the above image points to the location in which your web part contents are drawn.

Corners: Now Easier in 2010

You may have noticed the two TD tags with a CSS class of ms-wpTdSpace. These are new to the 2010 platform, and they provide you a fantastic opportunity to add rounded corners to your web part titles! This is much easier to do, and it’s much more flexible on the 2010 platform.

The Image

Before you can add corners to your web parts, you’ll first need a corners image. I generally create a transparent corner “sprite” that allows me to apply corners to any color web part title. Here’s the setup:

The corner image consists of a background color (red in this image — modify to suit your design’s needs), and a transparent semi-circle in the middle of the image. This creates two “triangles” that you can overlay on top of your web part titles to create a rounded corner effect.

The CSS

tr.ms-WPHeader td { background: #fb4f14; border-style: none; }  .s4-wpcell:hover .ms-WPHeader td, .s4-wpActive .ms-WPHeader td, .s4-wpcell .ms-WPSelected .ms-WPHeader td { border-style: none; }  tr.ms-WPHeader td.ms-wpTdSpace { padding: 0; width: 10px; background: #fb4f14 url('i/wp-corners.png') top right no-repeat; }  tr.ms-WPHeader td.ms-wpTdSpace:first-child { background: #fb4f14 url('i/wp-corners.png') top left no-repeat; }  h3.ms-WPTitle { color: #fff; font-weight: bold; }  h3.ms-WPTitle a:link, h3.ms-WPTitle a:active, h3.ms-WPTitle a:visited, h3.ms-WPTitle a:hover { color: #fff; }  .ms-wpContentDivSpace { margin: 0; }  td.ms-WPBorder, td.ms-WPBorderBorderOnly { border-color: #eee; border-top-style: none; }

The first line of our CSS is where we are setting a background color for the web part title (a very bright orange). Next, we remove the borders from the title area (a very long line of CSS selectors). We then use td.ms-wpTdSpace to apply our corners to each end of the title area. Last but not least, we set some text and link colors for our web part title, and we specify a new border color for web parts using borders.

Note: We are using the CSS pseudo-selector :first-class to differentiate between the left- and right-hand corners. Because both corners use the same CSS class name, this is the only way to uniquely select each corner individually.

The Result

The great thing about using the td.ms-wpTdSpace selector is that the web parts remain flexible in width. This was much harder to do in SharePoint 2007, in which you often had to use a large fixed-width image to apply corner images to your web parts.

That’s it for now — more SharePoint 2010 design tips to come as I continue to work on this great new platform! If you’re having trouble with any 2010 component or control in particular, please let me know and I’ll consider blogging about it!

Guest Author: Kyle Schaeffer
KyleSchaeffer.com

Kyle is a designer, speaker, and blogger living in Williamsburg, Virginia. He is a Senior SharePoint Consultant at SusQtech, where he has years of experience creating and implementing user experiences on the SharePoint platform. An advocate of simple and elegant web design, Kyle shares lessons learned and best practices on his blog, KyleSchaeffer.com.