The following branding tip will allow you to add a border to all the SharePoint 2010 web-part zones as long as they have a web part. If the web-part zone is empty, the border will not display.

Below is the browser rendered HTML of a SahrePoint 2010 web-part zone without a web part. As you can see, there is an empty table cell with a class attribute of class="wp-container".

1
2
3
4
5
6
7

<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Below is the browser rendered HTML of a SharePoint 2010 web-part zone with a web part. We want to apply the border to the nested table after the cell with the class="wp-container".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

This can be accomplished one of two ways depending on the browser support requirements. If you have the luxury of NOT supporting Internet Explorer 6 browser users, or you just don’t care about IE6 browser users, the following CSS code snippet will suffice:

/* assign the style to the table element that are children of div.wp-container (not supported by IE6) */
 
div.wp-container > table {
 border: 1px solid #ddd;
 background-color: #fff;
}

If you want a more browser optimized solution that includes IE6 support, the following should work for you:

/* assign the style to the table element that are a direct descendent of div.wp-container */
 
div.wp-container table {
border: 1px solid #ddd;
background-color: #fff;
}
 
/* stop assigning this style to all other descendent of div.wp-container */
 
div.wp-container table table,
div.wp-container table table table,
div.wp-container table table table table,
div.wp-container table table table table table {
border: none;
background-color: inherit;
}