SharePoint 2010 Branding Series – Part Four

In the last part of the series we looked at centering the content and applying a background colour and in this post we will look at the navigation, its position and add a bit of styling.

SharePoint 2010 Navigation Bar

First things first, we need to take a look in the masterpage and find the navigation controls

<!-- 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>

This is located on line 394 to 423 in my masterpage, we need to cut this code and paste it above the ribbon as this will then put the navigation at the top of the page on all the pages.a

Now you can have a go at placing the navigation in various places but the area your looking for is line 111 which looks like this

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

Place the code above this line and it should start to take shape but there’s a problem, your site will look like this

If you have managed to follow the previous three lessons you will see that the content isn’t centered and it doesn’t have the right background colour so we could add a block of code like this.

.s4-tn
{
max-width:960px;
margin:0 auto;
padding:0px;
background-color:white;
}

but we already have this in the CSS file

#s4-ribbonrow, #s4-workspace
{
max-width:960px;
margin:0 auto;
padding:0px;
background-color:white;
}

So the easy thing to do would be to add .s4-tn to the end of the code above which will apply that same styling to the navigation bar.

I will leave you guessing about how that works in the hope that you have been following and it is as straight forward as I think it is (you can always download the completed files below which will show you how I did it)

The last part to this post involves adding the logo to the website, this requires adding a new div and styling that div.
Find this code,

<!-- top navigation area -->

and add the following one line above it so it looks like this

<div id="eis-header"></div>
<!-- top navigation area -->

This creates a section above the navigation area but as we leart in the last post, this doesn’t make any visual difference unless you style it.
Add the following bit of code to the stylesheet and all of a sudden the site will have a header image

#eis-header
{
background-image:url('http://www.samworthenterpriseacademy.org/PublishingImages/websitelogo2.jpg');
background-repeat:no-repeat;
background-position:top right;
background-color:white;
height:100px;
width:960px;
margin:0 auto;
}

What does the code do? It applies a background image (please pick your own), it tells the browser not to repeat the background image but to position it in the top right hand corner, the background color of the div is then told to be white, we set a height and width for the div element and lastly we center the image by setting the top and bottom margin to zero and the left and right margin to auto. Still with me?

Well the deal is this, CSS isn’t easy to get your head around if you are a beginner but as with anything, it gets easier with time and patience. I am not going to teach a CSS and xHTML lesson but I will try and add a few pointers a long the way.

Now we have a site that looks like this,

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

Download Source Code

Thanks

Matthew Hughes

This post has been cross posted on the following sites
EngageInSharePoint.co.uk
NothingButSharePoint.com
SharePointEduTech.com