Customizing SharePoint 2010 Web Part User Interfaces (Wrox)

Summary: Learn how to use Microsoft SharePoint Designer 2010 to modify the look and feel of Web Part headers in Microsoft SharePoint 2010 by using CSS only, or by using background images.

Wrox logo

Wrox SharePoint Books

Applies to: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Author: Christian Stahl

Editors: WROX Tech Editors for SharePoint 2010 Articles

Contents

  • Introduction to Customizing a Web Part User Interface

  • When You Need to Style the Web Parts

  • How to Style the Header of the Standard SharePoint Web Parts

  • How to Use Rounded Corners for the Web Part Title

  • About the Author

  • Additional Resources

Introduction to Customizing a Web Part User Interface

The Web Part is one of the most important components in the SharePoint webpage, and the standard SharePoint Web Parts include minimal design elements in the sense that they don’t have colored backgrounds, borders, and so on. Therefore, you might want to customize the Web Parts to brand your site and to maximize its usability.

When You Need to Style the Web Parts

When you create Web Part solutions with Microsoft Visual Studio 2010 or edit a Web Part page in SharePoint Designer 2010, you can integrate the branding of the Web Parts user interface into the development phase. In a typical scenario, the designer creates a mockup with SharePoint Designer that includes HTML and CSS, and then gives the mockup to the developer. The developer implements the markup during the Web Part design phase; the back-end code is in the assembly, and the branding is separated into a CSS file folder or into the style library in the content database. Figure 1 shows an example of a Visual Web Part that was branded in SharePoint Designer 2010 but coded in Visual Studio 2010.

Figure 1. Visual Web Part branded in SharePoint Designer 2010

Visual Web Part branded in SharePoint Designer

In different scenarios, you could brand and create the Web Part by using only SharePoint Designer in a solution that has no code, or you could do both the coding and branding by using only Visual Studio.

This article describes how to customize the header of the Web Part in SharePoint by using SharePoint Designer 2010. You can design your custom Web Part and you can apply a custom markup with your own classes and rules. You can do almost anything that you want to do with the user interface for your custom Web Part, but you have to have a fundamental understanding of HTML and CSS.

How to Style the Header of the Standard SharePoint Web Parts

The Web Parts in SharePoint render in tables, and each header row contains five cells. You can use the ms.WPHeader class for the table header row, and you can modify all the cells in that row.

Example 1 shows how to apply a gray background color for the Web Part table header row and its cells.

Figure 2. Gray background color for Web Part table header

Gray background color for Web Part table header

Add the following CSS to your custom CSS file.

/* All cells (TDs) in the table row (TR) */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px transparent!important;
padding:3px;
}
/* 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 */
.ms-WPTitle a:hover {
color:red!important;
}

If you want a border around the header, you can set top and bottom borders for all cells in the row, but because the first and the last cells use the same class name, you can use first:child to separate the start and the ending cell.

Figure 3. Border applied to header

Border applied to header

To apply a border around the header of all Web Parts on the SharePoint page, add the following CSS to your custom CSS file.

/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-top:1px #ccc solid!important;
border-bottom:1px #ccc solid!important;
padding:3px;
}
/* Border to the sides */
.ms-WPHeader td:first-child {
border-left:1px #ccc solid;
border-right:0px!important;
}
.ms-wpTdSpace {
border-right:1px #ccc solid!important;
}
/* 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 */
.ms-WPTitle a:hover {
color:red!important;
}

Figure 4. Border applied to header and body of Web Parts

Border applied to header and body of Web Parts

To apply a border around the header and to the body of all Web Parts on the SharePoint page, insert the following CSS in your custom CSS file.

/* Webpart table */
.s4-wpTopTable{
padding:0px!important;
margin:0px!important;
border:1px #dbddde solid!important;
}
/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px #ccc solid!important;
padding:2px;
}
/* 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 */
.ms-WPTitle a:hover {
color:red!important;
}

The next example shows how to adjust other elements that have been affected by setting a border to the body of the Web Parts. The s4-TopTable general class is used by several other elements in SharePoint. For example, the Search box uses this class, and if you don’t want a border around this element, you can use the following code to specifically set the Search box not to use a border.

.s4-search Table, .s4-wpcell-plain {
 border:0px!important;
}

How to Use Rounded Corners for the Web Part Title

Rounded corners are often used to give a user interface a more modern appearance. There are several ways to create rounded corners. This example 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.

Figure 5. Web Part headers with rounded corners

Web Part headers with rounded corners

To create rounded corners for all Web Part headers in the SharePoint page, insert the following CSS in your custom CSS file.

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:33px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
border:0px!important;
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}

Figure 6. Web Part headers with rounded corners and borders applied

Web Part headers with rounded corners and borders

To create rounded corners for the Web Part headers and to set borders for all Web Parts in the SharePoint page, insert the following CSS in your custom CSS file.

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:30px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
margin-top:0px!important;
border:0px!important;
border:1px #dbddde solid!important;overflow:hidden
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}

About the Author

Christian Stahl has been working as a consultant, trainer and speaker for Microsoft SharePoint Technologies since 2003 and specializes in SharePoint branding and front end developing. Aside from being a SharePoint Server MVP, he is also a Microsoft Certified Trainer (MCT). Christian is co-author of ‘Beginning SharePoint 2010 Administration’ published by Wrox, blogs, and runs the community SharePoint Designers. You can find Christian on Twitter as @cstahl.

The following were tech editors on Microsoft SharePoint 2010 articles from Wrox:

  • Matt Ranlett is a SQL Server MVP who has been a fixture of the Atlanta .NET developer community for many years. A founding member of the Atlanta Dot Net Regular Guys, Matt has formed and leads several area user groups. Despite spending dozens of hours after work on local and national community activities, such as the SharePoint 1, 2, 3! series, organizing three Atlanta Code Camps, working on the INETA board of directors as the vice president of technology, and appearing in several podcasts such as .Net Rocks and the ASP.NET Podcast, Matt recently found the time to get married to a wonderful woman named Kim, whom he helps to raise three monstrous dogs. Matt currently works as a senior consultant with Intellinet and is part of the team committed to helping people succeed by delivering innovative solutions that create business value.

  • Jake Dan Attis. When it comes to patterns, practices, and governance with respect to SharePoint development, look no further than Jake Dan Attis. A transplant to the Atlanta area from Moncton, Canada, Dan has a degree in Applied Mathematics, but is 100% hardcore SharePoint developer. You can usually find Dan attending, speaking at, and organizing community events in the Atlanta area, including code camps, SharePoint Saturday, and the Atlanta SharePoint User Group. When he's not working in Visual Studio, Dan enjoys spending time with his daughter Lily, watching hockey and football, and sampling beers of the world.

  • Kevin Dostalek has over 15 years of experience in the IT industry and over 10 years managing large IT projects and IT personnel. He has led projects for companies of all sizes and has participated in various roles including Developer, Architect, Business Analyst, Technical Lead, Development Manager, Project Manager, Program Manager, and Mentor/Coach. In addition to these roles, Kevin also managed a Solution Delivery department as a Vice President for a mid-sized MS Gold Partner from 2005 through 2008 and later also served as a Vice President of Innovation and Education. In early 2010 Kevin formed Kick Studios as a company providing consulting, development, and training services in the specialized areas of SharePoint and Social Computing. Since then he has also appeared as a speaker at numerous user group, summit, and conference type events across the country. You can find out more about Kevin on his blog, The Kickboard.

  • Larry Riemann has over 17 years of experience architecting and creating business applications for some of the world’s largest companies. Larry is an independent consultant who owns Indigo Integrations and does SharePoint consulting exclusively through SharePoint911. He is an author, writes articles for publication and occasionally speaks at conferences. For the last several years he has been focused on SharePoint, creating and extending functionality where SharePoint leaves off. In addition to working with SharePoint, Larry is an accomplished .Net Architect and has extensive expertise in systems integration, enterprise architecture and high availability solutions. You can find him on his blog.

  • Sundararajan Narasiman is a Technical Architect with Content Management & Portals Group of Cognizant Technology Solutions, Chennai, with more than 10 years of Industry Experience. Sundararajan is primarily into the Architecture & Technology Consulting on SharePoint 2010 Server stack and Mainstream .NET 3.5 developments. He has passion for programming and also has interest for Extreme Programming & TDD.

Additional Resources

See the following pages for more information: