Introduction to custom web parts user interface

ArticleDirectory

• Introduction to custom web parts user interface
• When you need to set a Web Part Style
• How to set the title style of a standard SharePoint Web Part
• How to Use rounded corners for Web Part titles

Introduction to custom web parts user interface

Web parts are one of the most important components in SharePoint web pages. Standard SharePoint Web parts include the least design elements, that is, they do not have background colors, borders, and so on. Therefore, you may want to customize Web components to build your website brand and maximize the effectiveness of your website.

When you need to set a Web Part Style

When you use Microsoft Visual Studio 2010 to create a Web Part solution or edit a Web Part Page in SharePoint designer 2010, you can integrate the brand building of the Web part user interface into the development phase. In typical scenarios, designers use SharePoint designer to create models with HTML and CSS, and then provide the models to developers. Developers implement tagging during the Web part design phase; backendCodeLocated inProgramCentralized, and the brand is located in a separate CSS folder or in the style Library in the content database. Figure 1 shows an example of a visual web part that is coded in Visual Studio 2010 by creating a brand in SharePoint designer 2010.

Figure 1. Visual Web Components for creating a brand in SharePoint designer 2010

In different solutions, you can use only SharePoint designer in a solution without code to create Web parts and brand them, alternatively, you can use only Visual Studio to encode and build a brand.

This article describes how to customize the title of a Web Part in SharePoint by using SharePoint designer 2010. You can design custom web parts and apply custom tags with your own classes and rules. You can use the user interface to perform almost any operation required for your custom web parts, but you must have a basic understanding of HTML and CSS.

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

Web parts are presented as tables in Sharepoint, and each header row contains five cells. You can use the Ms. wpheader class for the title row of a table and modify all cells in the row.

Example 1 shows how to apply a gray background to the title row of the Web Part table and its cells.

Figure 2. Web Part table title with a 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! Important; padding: 3px;}/* Web Part title */. MS-wptitle {color: #333; font-weight: bold;}/* linked title and visited */. MS-wptitle ,. MS-wptitle A: visited {color: #333! Important; text-Decoration: none! Important;}/* hover */. MS-wptitle A: hover {color: red! Important ;}
 

If you want a border to appear around the title, you can set the top and bottom borders for all cells in the row, but because the first and last cells use the same class name, you can useFirst: ChildTo distinguish the start and end cells.

Figure 3. Border applied to the title

To apply borders around the titles 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 ,. MS-wptitle A: visited {color: #333! Important; text-Decoration: none! Important;}/* hover */. MS-wptitle A: hover {color: red! Important ;}
 

Figure 4. Title and subject border applied to Web parts

To apply borders around the title of all Web parts and around the subject on the 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: 2px;}/* Web Part title */. MS-wptitle {color: #333; font-weight: bold;}/* linked title and visited */. MS-wptitle ,. 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 when the border is set 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. If you do not want a border 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

The rounded corner is usually used to make the user interface look more fashionable. You can create rounded corners in multiple ways. In this example, the background image is applied to the angle and the middle part. The size of the left and right angles is 7x33 pixels, and the size of the intermediate image is 14x33 pixels.

Figure 5. Web Part title with rounded corners

To create a rounded corner for all Web Part titles on the 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 ,. 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 titles with rounded corners and borders applied

To create a rounded corner for the Web Part title on the SharePoint page and set borders 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 ,. MS-wptitle A: visited {color: # FFF; text-Decoration: none! Important;}/* hover title */. MS-wptitle A: hover {color: #333! Important; text-Decoration: none! Important ;}