Anatomy of a SharePoint 2010 Web Part

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

 

SharePoint 2010 Web Parts

<table>
  <tbody>
    <tr>
      <td class="s4-wpcell-plain">
        <table>
          <tbody>

            <tr>
              <td>
                <table>
                  <tbody>
                    <tr class="ms-WPHeader">
                      <td class="ms-wpTdSpace"></td>
                      <td class="ms-wpHeaderTd">
                        <h3 class="ms-standardheader ms-WPTitle"><nobr><span>Title and Border
                        Web Part</span></nobr></h3>
                      </td>
                      <td class="ms-WPHeaderTdMenu">
                        <div class="ms-WPMenuDiv">
                          <a class="ms-wpselectlink"><img class="ms-WPHeaderMenuImg"
                          src="/_layouts/images/wpmenuarrow.png" /></a>
                      </td>
                      <td class="ms-WPHeaderTdSelection">
                        <span class="ms-WPHeaderTdSelSpan">
                          <input class="ms-WPHeaderCbxHidden" />
                        </span>
                      </td>
                      <td class="ms-wpTdSpace"></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>
      </td>
    </tr>
  </tbody>
</table>

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 2007 Web Part
• The Best Way to Add Custom CSS to SharePoint

Comments

[Kevbo]

Thanks for the tips Brandon!