Build page layouts without Breadcrumbs or a Title

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.

Advertisements
Build page layouts without Breadcrumbs or a Title

9 thoughts on “Build page layouts without Breadcrumbs or a Title

  1. Tallarico says:

    Thanks so much! We have a subsidiary and to be politically correct we’re trying to present our shared Intranet as being all equal in the company hierarchy. Removing the breadcrumb to avoid creating an SSP is *very* helpful.

    Like

  2. Well, you probably want some form of ‘breadcrumb’ or other navigation… …there’s still a need to go ‘up’… …but you can basically build your own in SharePoint system.

    Like

  3. raju says:

    Hi andy,
    thanks for the posting,well explained ,

    my query is iam created a meeting workspace in a intranet portal.it does not have the breadcrumb,please assist mehow to add the breadcrumb.

    to work with meeting wokspace how can i edit the above piece of code.

    thanks in advace.

    raju.

    Like

  4. Ally says:

    hi andy,
    i’ve tried to change my master page and it work but the current problem that i’m facing is the breadcrumbs in my dispform.aspx does not display correctly like the homepage. the breadcrumbs went to the middle of the page including the page title.
    I’ve tried to set the css file padding to 0px, but it’s not working. FYI i just only involve in spd around 2 months and i’m the only person in charge of this task. Plzzzz help me :((

    Thanks in advance.

    Ally

    Like

  5. I suggest checking the CSS classes you’re using on the elements surrounding the breadcrumb and title. One option would be to install the IE Dev toolbar (Google it, it’s a free download) and use that to see how the Home Page title/breadcrumbs are structured. Then copy that for the page you’re using.

    Like

  6. Chris says:

    Well done! This is a great way to remove the page title and the breadcrumb from new pages when desired. It’s easy to turn off the page title web part, but you still wind up with a gap and breadcrumb- the provided CSS override does the trick cleanly.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s