SharePoint 2010 Branding – Part Nine

Hello again, the last post for the blog this week is the ninth part of the branding series and as we are getting somewhere closer to the final look and feel we should think about the overall design and there is a few things we have yet to make space for or even move to the correct location.

Current Design

As you can see we need to make some space for the search bar, add in a traditional breadcrumb, hide or move the social icons if we are not using them, we could do with moving the top navigation bar to the top of the page and this will of course shift all the content up a little and lastly we need to remove or move the quick launch.

However, first things first, yesterday I said I would show you how to fix the main content area from being “transparent” and adopting our new background colour. If you were a little brave you may have opened up IE Developer Tools (F12) and found the ID we need to apply a change to, this is done as follows

#s4-bodyContainer
{
	background-color:white;
}

Isn’t that nice and easy? well of course.

Now let’s take a look at those social icons, the code which takes care of these icons is as follows;

<div class="s4-notdlg">
	<!-- 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>

This code contains the Delegate Control “GlobalSiteLink3-mini” as the comments state, removing the -mini will show you the larger icons and deleting the code altogether will remove the icons, however, I don’t want be so brutal and instead I would liketo keep the code incase I want to use it at a later date.
How is this possible? If you locate the following code;

<!-- =====  Hidden Placeholders ============================================================ -->

You will see that there is an asp:Panel which hides content and it would be a good idea to stick the content in here and we can then make use of it when we want.

Cutting and pasting the above code into the asp:panel will provide you with the following end result;

Excellent, let’s get that navigation menu moved so that it sits at the top alongside the logo.

If you remember from Part Five we created an div block called #sp365-navbar and given that this is home to our logo image, it might be a good idea to add the code for the navigation somewhere in there.

Firstly, we need to find the code for the top navigation, once again we can search for;

<!-- top navigation area -->

Which will give us the right section of code and we then need to move this entire section of code;

<!-- top navigation area -->
<div class="s4-notdlg">
	<!-- top navigation publishing data source -->
	<PublishingNavigation:PortalSiteMapDataSource
		ID="topSiteMap"
		runat="server"
		EnableViewState="false"
		SiteMapProvider="GlobalNavigation"
		StartFromCurrentNode="true"
		StartingNodeOffset="0"
		ShowStartingNode="false"
		TrimNonCurrentTypes="Heading"/>

	<!-- top navigation menu (set to use the new Simple Rendering) -->
	<SharePoint:AspMenu
	  ID="TopNavigationMenuV4"
	  EncodeTitle="false"
	  Runat="server"
	  EnableViewState="false"
	  DataSourceID="topSiteMap"
	  AccessKey="<%$Resources:wss,navigation_accesskey%>"
	  UseSimpleRendering="true"
	  UseSeparateCss="false"
	  Orientation="Horizontal"
	  StaticDisplayLevels="1"
	  MaximumDynamicDisplayLevels="1"
	  SkipLinkText=""
	  CssClass="s4-tn">
	</SharePoint:AspMenu>
</div>

Paste that code into here

<div id="sp365-navbar" class="s4-notdlg"><!-- NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows  -->
	<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
		<SharePoint:SiteLogoImage  LogoImageUrl="/Style Library/sp365/websitelogo2.jpg" runat="server"/>
	</SharePoint:SPLinkButton>
</div>

So that the final result is

	<!-- link back to homepage, SiteLogoImage gets replaced by the Site Icon, you can hard code this so that its not overridden by the Site Icon or even remove -->
	<div id="sp365-navbar" class="s4-notdlg"><!-- NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows  -->
		<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
			<SharePoint:SiteLogoImage  LogoImageUrl="/Style Library/sp365/websitelogo2.jpg" runat="server"/>
		</SharePoint:SPLinkButton>

		<!-- top navigation area -->
		<div class="s4-notdlg">
			<!-- top navigation publishing data source -->
			<PublishingNavigation:PortalSiteMapDataSource
				ID="topSiteMap"
				runat="server"
				EnableViewState="false"
				SiteMapProvider="GlobalNavigation"
				StartFromCurrentNode="true"
				StartingNodeOffset="0"
				ShowStartingNode="false"
				TrimNonCurrentTypes="Heading"/>

			<!-- top navigation menu (set to use the new Simple Rendering) -->
			<SharePoint:AspMenu
			  ID="TopNavigationMenuV4"
			  EncodeTitle="false"
			  Runat="server"
			  EnableViewState="false"
			  DataSourceID="topSiteMap"
			  AccessKey="<%$Resources:wss,navigation_accesskey%>"
			  UseSimpleRendering="true"
			  UseSeparateCss="false"
			  Orientation="Horizontal"
			  StaticDisplayLevels="1"
			  MaximumDynamicDisplayLevels="1"
			  SkipLinkText=""
			  CssClass="s4-tn">
			</SharePoint:AspMenu>
		</div>
	</div>

So to summarise what we have done, we have moved the Top Navigation control into the navbar code block we created in block five, this gives us the following end result;

Impressed? You should be, we are now moving major controls that make up the SharePoint design and if you managed to move these things successfully then you are learning how easy it is to manipulate the layout.

On Monday the series will reach part 10 and I will be creating an e-Book with all the posts in it so that you can download all 10 parts for your offline viewing pleasure, I will also be including a download with all the code we have changed to date.

Thanks

Matthew Hughes

About Matthew Hughes

Matthew Hughes has written 56 post in this blog.

I am a SharePoint Developer for UK based Intelligent Decisioning Ltd. Check us out id-live.com I setup SharePoint 365 as I saw that there was a need for introductory blog posts and knew there were some fantastic authors out there who might not have time to run their own blogs and keep them updated reguarly.

• View all posts by Matthew Hughes →
• Blog
• Twitter
• Facebook
• Google+