Right, so SharePoint uses pages and page layouts – I won’t talk about the different types, but ask a couple of questions that’ve come up a few times.

• If I create a new page layout in SharePoint, how do I get rid of the breadcrumbs?
• How can I get breadcrumbs, but like the home page?

Here’s how…

Some page layouts don’t have space above the main content for a title, or for breadcrumbs.

By contrast, a lot of other pages do:

So what happens when we create a new page layout in SharePoint Designer? Well, they have breadcrumbs, and room for a title:

So, how do I fix that? Well, go back to SharePoint Designer (you just created the page layout with it, right?) Let’s look at the code:

Right, pretty straight forward – some content controls overriding the master page’s content placeholders. I’m assuming that you’re familiar with Master Pages in ASP.NET. Now, we can get rid of the breadcrumbs, title and the page image (which is sometimes shown on the left) by overriding those content controls. Paste this code into your page:

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" />
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/>

What we’re doing there is setting those to empty content (or, for the Page image, an invisible 1 pixel image. No, I don’t know why, but that seems to be how SharePoint always does it)

Fine, what does this give?

No breadcrumbs or title, but still a big gap. How do we get rid of that? Well, we can use CSS to shrink the gap. This CSS is inserted into the PlaceHolderAdditionalPageHead

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<style>
TD.ms-titleareaframe, .ms-pagetitleareaframe { height: 10px; }
Div.ms-titleareaframe { height: 100%;}
.ms-pagetitleareaframe table { background: none; height: 10px; }
</style>
</asp:Content>

This CSS gets inserted in the header, and it’s just setting the height of that region to 10 pixels or so. Now we get:

Hmm. Nearly there – but the border isn’t right. There should be a 1pixel blue border at the top and left of the main content area. How does SharePoint normally do that?

Well, it cheats. The blue border comes from a table that is put into the main content area, and is set to fill the content area. For an example, put this code into your main content area:

<table style="padding-top:0px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
<tr>
<td>
Test Content
</td>
</tr>
</table>

It shows:

Now you can change this table to show the content you want!

What if I want the breadcrumb in the main content area? Sort of like the home page to a collaboration site? Or even a team site?

Well, there are a couple of more steps. First off, replace the text you just put into your main content area with this:

<table style="padding-top:0px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
<tr>
<td class="ms-pagebreadcrumb">
<asp:SiteMapPath ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional"/>
</td>
</tr>
<tr>
<td>
Test Content
</td>
</tr>
</table>

This will show:

Nearly, but not quite. The breadcrumb is there, and styled right, but it is padded in from the edge of the page.

To get rid of the padding, we have to insert CSS content into another content placeholder. Add this to your page:

<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe { padding: 0px; }
</style>
</asp:Content>

And this produces:

A completed page, with the breadcrumb in the main content area, and no title breadcrumb or title. Sure, I’ll have to build some padding into the table in my main content area, but this is simple HTML, and I’ll leave for the reader to figure out.