Web Part Style in SharePoint 2010
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.
Hi Kyle,
Your solution sounds good. I cannot get it to work because I don’t have a correct wp-corners.png file. Can you post a working example of this image file?
Greetings, Willem
Hi, Willem. Great question – I often am asked about how to create the corner images. If you have Photoshop, you can download a few corner template files that I have created, here:
http://kyleschaeffer.com/best-practices/reusable-transparent-css-rounded-corners/
Best of luck,
Kyle
@Willem: I created one myself using Paint.net… It’s actually fairly simple. Create an 100×100 pixel image, then use the selection tool to take a circlular selection out of the middle. Then, resize the image to 20×20.. Since I didn’t need all 4 corners, I then created a selection of just the top 10×20 pixels, saved it to wp-corners.png and Voila’, it worked.
OK, I know that sounds more complicated than it really is… It’s not as bad as it sounds.
@RobD: thanks for the instructions. Worked like a charm !!
@Kyle: thanks for the template files. I only have Paint.NET, so I forwarded your blog to our designer!
Willem
Hi guys,
I have another question about the web part title background. A customer wants a page with web part titles with different background colors. Right now some of these webparts are in the sames web part zone. Is this possible?
Thanks in advance !!
Willem
Hi, Willem. The only way to style web parts within a single zone differently from one another is to use the web part title in CSS. For instance, if you want to change the background color for a web part that has the title “Announcements,” you could use the following CSS:
tr.ms-WPHeader td[title ^= "Announcements"] {
background: red;
}
Honestly, what you can do with CSS like this is somewhat limited, so if you’re looking to do some major style changes, I’d suggest creating multiple web part zones and placing them in DIV tags that allow you to style them independently.
I am new to sp2010 and I am trying to do the same thing on our server here… I’m using sp designer 2010 and i am having a hard time trying to find these sections of code. Could you be of help?
Hi, Matthew. For designing and customizing in SharePoint, you’ll need two essential tools/skill-sets: First, CSS is a major element of customizing SharePoint, so definitely familiarize yourself with that technology. Secondly, you’ll want to use “developer tools” in order to identify the styles you want to customize within SharePoint 2010 — the screenshot from my post above is from the “IE Developer Toolbar,” which comes standard with IE version 8 and above (just hit F12). This allows you to see all the CSS classes that I use in my examples.
Best of luck!
Hey thanks,
I took a different approach using jQuery. You can find the article here.
http://lawo.wordpress.com/2011/02/14/how-to-add-rounded-corners-to-your-web-parts/
Hi, Matthew
Could you explain where to locate the css files? Please be specific I am very new at SP. Thanks
Luca
I want to create tabs with the css to show and hide webparts in a zone. I am not allowed to use Javascript or jquery for this requirement. Is this possible through CSS 3.
Hi Kyle,
Great article, my site looks great with this customisation. Only one question, this change has applied to my top level site http://server/default.aspx however none of the subsites are picking up the change. I have gone into the top level site settings and made sure all subsites inherit the masterpage but no luck.
Can you offer any pointers?
Thanks
David, did you attach a “new” style sheet or did you edit an existing one (like corev4.css)? If you’re editing an existing stylesheet, you may only see those customizations on a single site (and it won’t inherit down to subsites). Try placing any CSS customizations in a new CSS file to see if that helps.
Thanks Kyle,
I had edited the corev4.css and then after it did not cascade to the other sites I created and attached a new style sheet which worked.
Great post and thanks for the reply.
Great article, cheers, Kyle!
If we can style the Title, for example, can we also hide it?
Regards,
Paul.
I’m having issues getting the corners to show up, i referenced a new style sheet in the alternate css url field in the master page customization area and created a png file based off your example which I named wp-corners.png and placed in the style library/images folder. The color shows up on the webpart titles but not the rounded corners, perhaps i’m referencing the image incorrectly in the css file, can you help?
Thanks.
-Adrian