Anatomy of a SharePoint 2007 Web Part

If you want to change the way your SharePoint 2007 web parts look, you will need to know how web parts are structured. Use this structure to override SharePoint's styling using your own custom CSS. Below are the anatomies of all SP 2007 web parts for the three chrome options (Title and Border, Border Only, and Title Only).

 

SharePoint 2007 Web Parts

<table>
  <tbody>

    <tr>
      <td>
        <table>
          <tbody>
            <tr class="ms-WPHeader">
              <td title="{SharePoint generated description}>
                <h3 class="ms-standardheader ms-WPTitle"><nobr><span>Title and Border Web Part
                </span></nobr></h3>
              </td>
              <td>
                <div class="ms-HoverCellInActive">
                  <nobr><a href="#"><img title="{web part title} Web Part Menu"
                  src="/_layouts/images/Menu1.gif" /></a></nobr>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>

    <tr>

      <td class="ms-WPBorder">

        <div class="ms-WPBody">
          {Web part body content goes here (e.g. <p>OOTB content editor web part with
           Title and Border chrome applied}
        </div>
      </td>
    </tr>
  </tbody>
</table>
<div class="ms-PartSpacingVertical"></div>

The highlighted HTML with the orange border does not get written to the page when the web part uses the Border Only chrome type.

The class that is applied to the table cell highlighted above with the blue border varies for each of the chrome types. The class "ms-WPBorder" is applied to the Title and Border chrome, while the Border Only chrome uses the "ms-WPBorderBorderOnly" class and the Title Only chrome uses no class here.

Related Posts

• Anatomy of a SharePoint 2010 Web Part
• The Best Way to Add Custom CSS to SharePoint