SharePoint 2010 Branding Series – Part Five

Well it’s been a long time coming both nothingbutsharepoint.com and sharepointedutech are now up to date with this blog and are eagerly awaiting this and the following posts so let’s not leave it any longer.

So in the last post we looked at getting the header in to the design and positioning it correctly as well as moving the navigation area.

In this post we are going to move a few of the standard SharePoint controls around and get the ready for styling.

The Controls we are going to move are;

The MetaData delegate control which displays the “I like it” and “Tags” buttons (not available in SharePoint Foundation)

<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>

and the search area placeholder and delegate control

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
	<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
</asp:ContentPlaceHolder>

Creating A Searchbar Div

We need to tell SharePoint where we want to put the two controls and so. as in the previous post, we need to first locate the code block

<!-- =====  Begin Ribbon ========================= -->

Then above that we will add the following

<div id="eis-searchbar" class="s4-notdlg">
	<div id="eis-searchbar-inner">
	</div>
</div>

This adds a CSS id with the name #eis-searchbar and also applys the class .s4-notdlg which removes the codeblock from the popup dialogue box.

We then create a CSS block with the name #eis-searchbar-inner (the reason for this will become clear in part six – version 5)

So now we are going to put the following code between the above div and I will walk through it line by line.

<div class="eis-breadcrumb">
	<asp:SiteMapPath runat="server" id="SiteMapPath1" CssClass="eis-breadcrumb-items" CurrentNodeStyle-CssClass="eis-breadcrumb-items-current">
	</asp:SiteMapPath>
</div>
<div id="eis-metadata">
	<!-- links for I like it and Tags and Notes -->
	<!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons -->
	<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
</div>
<!-- search box loads from delegate, style with CSS -->
<div id="eis-search">
	<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
		<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
	</asp:ContentPlaceHolder>
</div>

Whatever happened to the SharePoint breadcrumb? (lines 1 – 4)

Now one of the things I mentioned at #SPSEMEA was the lack of a decent breadcrumb, this has now been moved from the logical breadcrumb in SharePoint 2007 which has the usual structure (see below), to a folder which, when you click it opens an indented tree like structure (see right).

However, this is not the effect I would like in my design and so we need to add our own breadcrumb and style it as we see fit.

This can be achieved by adding lines 1 – 4

isn’t a SharePoint specific control hence the prefix asp: in fact it’s just a .NET control that I remembered from my ASP.NET days and it provides us with the excact functionality that we desire (albeit without the styling just yet).

Metadata (Lines 5 – 9)

If you have SharePoint Server it’s a nice idea to locate the delegate control for GlobalSiteLink3 (might not have the -mini bit in your setup) and add it to this section so that it appears to the right of the searchbox, I think I am using Foundation and so will not be able to demo this.

To enable styling, we wrap the control in it’s own div with an id of #eis-metadata.

Search Box (Lines 10 – 15)

Again wrapping the searchbox in its own div, we have to locate the delegate control, associated place holders and then we are able to style them in the next post.

Where are we now? Below is a screenshot and it clearly shows that the code we have just created doesn’t fit in with the design at all.
In the next post you will see how we style the search bar making it slot into the design nicely.

You can see a live demo of the site here Version 4 and you can download the source code files by clicking the download link below

Download Source Code

Thanks

Matthew Hughes

About Matthew Hughes

Matthew Hughes has written 74 post in this blog.

I am the CEO of Flucidity Ltd an Office 365 & SharePoint Consultancy based in the UK. We develop intranets, provide training, custom branding and develop SharePoint solutions for companies of varying sizes from 2 users to 20,000+

Leave a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>