all your codez are belong to me…

Using the SharePoint Content Editor WebPart

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;