Introduction to customizing the WEB part user interface

Introduction to customizing the WEB part user interface

Web parts are one of the most important components of a SharePoint Web page, and standard SharePoint Web Parts include minimal design elements, that is, they do not have a background color, a border, and so on. As a result, you may want to customize Web Parts to create your website brand and maximize the effectiveness of your site.

When you need to set the WEB part style

When you create a Web Parts solution by using Microsoft Visual Studio 2010 or when you edit a Web Part Page in SharePoint Designer 2010, you can integrate branding of the Web Part user interface into the development phase. In a typical scenario, a designer uses SharePoint designer to create a model with HTML and CSS, and then provides the model to developers. The developer implements the markup during the Web part design phase, the backend code is in the assembly, and the branding is in a separate CSS folder or in a style library within the content database. Figure 1 shows an example of a visual Web part that was branded in SharePoint Designer 2010 and encoded in Visual Studio 2010.

Figure 1. Create a branded visual Web part in SharePoint Designer 2010

In different scenarios, you can create and brand Web parts by using only SharePoint Designer in a solution that does not have code, or you can encode and brand by using only Visual Studio.

This article describes how to customize the title of a Web part by using SharePoint Designer 2010 in SharePoint. You can design your custom Web parts, and you can apply custom tags that have your own classes and rules. You can use the user interface to perform almost any desired action against your custom WEB parts, but you must have a basic understanding of HTML and CSS.

How to set the style of a standard SharePoint Web part title

Web parts are rendered in tabular form in SharePoint, and each header row contains five cells. You can add Ms. The Wpheader class is used for the header row of a table, and you can modify all the cells in that row.

Example 1 shows how to apply a gray background to the header row of a WEB part table and its cells.

Figure 2. Web Part table title with gray background

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!importa nt;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 the border to appear around the title, you can set the top and bottom borders for all the cells in the row, but because the first and last cells use the same class name, you can use first:child to distinguish between the starting and ending cells.

Figure 3. The border applied to the caption

To apply a border around the title of all Web parts on a 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. The border of the title and body applied to the WEB part

To apply a border around the title and the body of all Web parts on a SharePoint page, insert the following CSS into 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:2p x;} /* 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 other elements that are affected after you set the bounding rectangle for the Web part body. The s4-toptable generic class is used by some other elements in SharePoint. For example, the search box uses this class, and if you don't want the border to appear around this element, you can use the following code to explicitly set the search box to not use a border.

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

How to use rounded corners for Web part titles

Fillets are typically used to make the user interface look more stylish. You can create rounded corners in several ways. This example applies a background image to the corners and middle sections. The dimensions of the left and right corners are 7 x 33 pixels, and the middle image is in the size of x 33 pixels.

Figure 5. Web part title with rounded corners

To create a fillet for all Web part titles in a SharePoint page, insert the following CSS into 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 title with rounded corners and borders applied

To create a fillet for a Web Part title in a SharePoint page and set a border for all Web Parts, insert the following CSS into 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;}

Introduction to the custom Web part user interface