Problem:

You've developed a SharePoint portal landing page and want to add some visual appeal. You want to do so by creating editable, custom Web Part zones, as opposed to a static custom master page.

 

Solution:

You can use Cascading Style Sheets (CSS) or HTML to create a completely custom look for a particular Web Part.

Figure 1 illustrates the use of custom HTML to create custom containers for three Web Parts (Calendar, Just Announced, and Columbia RSS) on a Columbia University portal.

Figure 1: Using HTML to create individually styled Web Part zones
Figure 1: Using HTML to create individually styled Web Part zones

 

 

HTML was used to create the title, borders, gradient background, and View all buttons. Each Web Part sits inside its respective HTML container. (Title and borders have been turned off for each Web Part, so all you see is the content.) You can choose to embed an actual Web Part or to insert a Web Part zone into a custom HTML container.

You can also use CSS descendant selectors to create a custom look for a particular Web Part zone. Descendant selectors are used to style elements that are descendants of another element in the same document tree. If you want to give a particular Web Part zone a unique look, simply wrap the zone in a <div> tag and apply an ID or class, such as <div id="uniqueZone">. In your CSS file, use that ID tag to precede all the Web Part classes that you want to override, and separate each selector by a space:

 

<div id="uniqueZone">

<WebPartPages:WebPartZone id="...." runat="server" title="Zone1">

<ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

</div>

<style type="text/css">

#uniquezone .ms-WPHeaderTdMenu {

background:url(wpHeaderRight.png) no-repeat right top transparent;

width:20px;

border:0;

}

#uniquezone .ms-WPTitle {

background:url(wpHeaderLeft.png) no-repeat left top transparent;

color:#FFF;

padding:10px;

font-weight:bold;

}

#uniquezone .ms-WPTitle a {

color:#FFF;

}

#uniquezone .ms-WPBody {

border:2px solid #305C87;

padding:5px;

margin-top:-1px;

</style>

}

Figure 2 shows an example of this approach. Zone 1 holds the Announcements Web Part and an as-yet unnamed Web Part; the CSS descendant selector is applied to this column. Zone 2 allows Web Parts to be stacked horizontally. This zone includes the Project Timeline, Meetings, and Major Milestones Web Parts. Zone 3 also allows Web Parts to be stacked horizontally and includes the Upcoming Events and Upcoming Holidays Web Parts. Zones 2 and 3 inherit the global styling that was created for Web Parts.

Figure 2: Using descendant selectors to style individual Web Part zones (Sample 1)
Figure 2: Using descendant selectors to style individual Web Part zones (Sample 1)

 

Figure 3 shows a second example of the CSS method, Zone 1 holds the Contacts Web Part; the CSS descendant selector is applied to this column. Zones 2 through 4 use the traditional approach of stacking Web Parts vertically. These zones all inherit global styling.

Figure 3: Using descendant selectors to style individual Web Part Zones (Sample 2)
Figure 3: Using descendant selectors to style individual Web Part Zones (Sample 2)