The ContentEditorWebPart is a web part you can use to display arbitrary HTML and script output on a SharePoint WebPart page.

On a project I’m working on, I provision various ASP.NET pages, features and so on into a site to customize it for the clients application needs. One thing I wanted was some kind of navigation aid to the various ASP.NET pages, and which also allowed the client to use it as part of their own customizations.

To this end I figured the content editor web part could be used to display a menu like list of links to the user, and further I could then provision this webpart using a feature into the web part gallery, thereby making it available for reuse by the client.

Ok so what I wanted was this kind of thing;

So, a header that looked like any other webpart header (without the edit arrow) and then a list of links preceeded by an image.

To get the header part I quite unashamedly purloined the same HTML that SharePoint uses to render web part headers, and you can do this quite easily using FireFox (Firebug) and IE8 developer tools, the image below shows this in IE8 by copying the outer HTML of the table which is used to render the Announcements webpart.

Having got this HTML I mangled it a bit to remove the “editability” of the header, next onto the list itself. For this I used a table, each row having 2 cells, the first showing an image. Now I wanted it to look like the OOTB Links List, so again using FireFix (Firebug)  / IE8 developer tools I perused the HTML to see what styling and CSS classes SharePoint used to do this, and formatted by HTML accordingly, the results of which looked like this;

<table class="ms-summarycustombody" cellspacing="0" cellpadding="0">
<tr>
<td class="ms-vb" style="padding-bottom:5px;width:20px;vertical-align:middle;text-align:center;">
			<IMG alt="" src="/_layouts/images/square.gif" align="middle"></td>
<td class="ms-vb" style="padding-bottom:5px;">
			<a href="cstools/Basic%20Analysis.aspx"><img src="/_layouts/images/calcis/basic_analysis.jpg" align="middle" border="0" />Open the Basic Analysis Tools</a></td>
</tr>
</table>

So having got the HTML for my header and list, I created an instance of the Content Editor WebPart on a Page and modified it’s properties.

Most importantly I turned the Chrome off by setting the Chrome property to None, and set the source HTML to the following;

<TABLE border="0" cellSpacing="0" cellPadding="0" width="100%"><TBODY>
<TR class="ms-WPHeader">
<TD style="width:100%;">
<H3 class="ms-standardheader ms-WPTitle"><SPAN>Reporting Tools</SPAN></H3></TD>
<TD style="padding-right:2px;" align="right">
<DIV class="">&nbsp;</DIV></TD></TR></TBODY></TABLE>
<table class="ms-summarycustombody" cellspacing="0" cellpadding="0">
<tr>
<td class="ms-vb" style="padding-bottom:5px;width:20px;vertical-align:middle;text-align:center;">
			<IMG alt="" src="/_layouts/images/square.gif" align="middle"></td>
<td class="ms-vb" style="padding-bottom:5px;">
			<a href="cstools/Basic%20Analysis.aspx"><img src="/_layouts/images/calcis/basic_analysis.jpg" align="middle" border="0" />Open the Basic Analysis Tools</a></td>
</tr>
</table>

Having done this, I exported the WebPart to a .DWP file

So finally we have the finished article;

In another post I’ll demonstrate how this WebPart (the exported .DWP file) can be provisioned using a feature.