SharePoint CSSRegistration or Link?

I must say that I’ve been using <link> for my style sheets for some times now. Until recently have seen the benefits from using the CSSRegstration method and now using that exclusively from now on. Even in my master page where I know the CSS files will only load once I will use it. I was unaware that CSSRegistration had Conditional Expression built in to target other browsers, but now that I know that I have no excuse not to use it.

Using the After property

Most of the time you’ll want to load your CSS file after the core V4 css gets loaded. To do this you’ll use the property After=”corev4″.css”

You’ll see in image below that the files are appearing after the corev4.css file which is the main SharePoint styling CSS file.

Removing the After property you’ll see the style0.css applied before the corve4.css and style1.css applied after it.

Order of Loading

Take notice to the order that you are setting them in the master page. The style sheets set first in the master page will be applied last on page load.

When the page loads you can see the output.

Style1.css , then Style0.css

Using Conditional CSS

The CSSRegstration class has properties to target specific browsers similar to this method. http://www.quirksmode.org/css/condcom.html

Which renders like this, where the comments will target different browsers.

You don’t have to enter the IF in the condition, that is done for you. But to access NON IE browsers you’ll have to specify another property to reach downlevel clients. Pay special attention to the ConditionalExpression which is set to !IE, to reach other browsers you need to also specify the RevealToNonIE=”True”

Doing so will prepare that conditional CSS comments in a way that Firefox, Chrome or other Non-IE browsers can read them.

Controlling Multiple Loading

On benefit of using the SharePoint:CSSRegistration tag is to handle the issue of loading a CSS file multiple times. As CSS files grow bigger and bigger it can be a problem with page load times if you are loading multiple web parts and using the link tag

By using the regular <link> tag to reference your CSS files each time that gets hit it will load your css to the page.

Using CSS Registration will not do that. take this example below. I’m attempting to register the Style1.css, 2 additional times, and style0.css 1 additional time

and the output will only load the css files once

Specifying Current Site Collection Urls

Another benefit of using the SharePoint:CSSRegistration tag is the ability to specify files that live in the Style Library in a Site Collection not located at the root of the domain. What do I mean by that? Consider that we are building a branding solution and we are storing the files in the Style Library of that site collection and say for example that the domain is test.contoso.com

So deploying our solution to test.contoso.com would put the files in at test.contoso.com/Style Library/mycss.css. Now when we register the CSS files using the <link> tag it would look like this

Say you have sub site collections under another managed path that link would break. For example, consider another site collection called /Sites/SC1. This would be test.contoso.com/sites/sc1 and the masterpage would try to find the file at test.contoso.com/Style Library using that <link> tag above.

That would NORMALLY not be a problem if the branding solution or files were deployed to the site collection at “/” and then at “/sites/sc1”. BUT if you only deploy the branding to the “/site/sc1” site collection the files would only exist in that Style Library for that site collection. So the links to the css would be looking at test.contoso.com/Style Library/mycss.css and be broken because the files are NOT there and the files are at test.contoso.com/sites/sc1/Style Library/SC1.

So as confusing as that may have sounded there is an answer to handle that situation.

1. You deploy CSS and images to the Layouts folder – This makes the files available globally. Any reference to CSS or images should start with  /_layouts/MyDeploymentFolder/myCss.css

2. Use SPUrl to handle the adjustment of the link to the appropriate site collection.

Examining #2 – SPUrl

By using the $SPUrl:~SiteCollection you can specify a parameter which will return the current site collection. Below I’ve embedded into a master page

This is the result on my root site collection “/”

This is the result on another site collection under a managed path “/sites/sc1”

So as you can see, using this method you can deploy your css / images to the Style Library and be able to access them using this current site collection url parameter.

This about wraps up the major aspects of using CSSRegistration over Link. To sum up the main benefits we have:

Achieved with Link or CSS Registration

• Controlling load order
• Conditional CSS
• Specify site collection relative style sheets

Achieved with CSS Registration only

• Preventing loading the same file multiple times

SharePoint Saturday Boston – Slides & Demos

What a great time the following weekend @ SPSBoston! The organizers did a fantastic job as usual.

Thank You to my session attendees. I’m hoping you learned at least 1 thing. I appreciate the great questions and the positive feedback! I had an amazing time up at SPS Boston and hope to have the opportunity to return next year when it will be at the new Microsoft office in Cambridge.

So a few things, my slides are available on Slide Share http://www.slideshare.net/tommdaly/developing-branding-solutions . I’ve added some Resources at the end of MSDN articles. I’ve added in the beginning a listing of tools and some links which I grazed over during the presentation but you can find out more from those links.

I’m temporarily hosting theme builder on my company’s site until they fix the download link – http://www.bandrsolutions.com/TomBlogFiles/Theme_Builder.zip

And my project solution is available at – http://www.bandrsolutions.com/TomBlogFiles/Tom%20Daly%20-%20Branding%20Demo.zip

My clean v4 masterpage is available at – http://www.bandrsolutions.com/TomBlogFiles/CleanV4.zip

Thanks again, don’t hesitate to contact me with comments or questions.

Building a custom Navigation Menu using SPServices

In this post we are going to create a 2 tier navigation menu using SPServices. In this scenario we’ll be replacing the current quick launch and putting in our new navigation. This will work with whatever version of SharePoint.

This solution would most likely work with more tiers but the CSS I have provided in the example only accounts for 2 tiers

Things you’ll need

jQuery

SPServices

a Data Source (SharePoint List) – I have specifically configured my list EXACTLY as defined in this way.

On to the implementation steps

Prior to starting any front end work make sure you have the Custom List as defined above created. I’ve called my list ‘Navigation’

Create a few nodes so that you’ll have some data and know that its working properly.

After creating the list and some test nodes, make sure that you have resources to the jQuery and SPServices on your site.

I am storing those files on my SiteCollection / js Folder which I created in SharePoint Designer. You can potentially store the files anywhere or get jquery through a Content Delivery Network (CDN) – http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery

and just recently SPServices is now available through a CDN -http://www.cdnjs.com/#/search/jquery.spservices

I’ve just downloaded the files from the site and I’ll be hosting them in a folder on my Site Collection as I mentioned earlier. Here is a picture of them in their location.

You might have noticed in that picture the navigation.js. We need to create a blank file as this point called navigation.js this is where the navigation jQuery code will go. You can download that file here.

Once you have that file open it up in a text editor. In the first line set the assignment of the variable “NavigationList” equal to the name of the new list you created. If you are querying a list on another site you would need to specify the WebURL, otherwise leave it blank and it will query the site that the web part is currently on.

Once your are done editing save the list alongside the other .js files.

**NOTE: If you see line 6, this is the object that we will be replacing. You can play around and modify that to potentially go wherever. **

Next I start off with a generic SharePoint page, and I’ll add a Content Editor Web Part (CEWP). I start off this way because the Content Editor is the easiest way to demo this example. You could embed this into a portion of the master page or some other method.

Edit the CEWP properties, click on Source Editor

Add the following information, take special notice to the paths to the files. In this demo I’m on the /sites/tew  , site collection. Adjust that to meet your correct path.

So above we are linking to a CSS file that we have not yet created (but will). The first JavaScript link is to the jQuery library. The second is to SPServices library. The third to our custom code to create the navigation.

So Save that content in there, hit OK or Save to commit the page.

Now lets add the CSS file. A sample CSS file can be provided here, or you can create your own.

Once you have the correct JS files in place and the CSS in place when you browse or refresh the page you should see the new navigation instead of the quick launch.

Here is a before and after shot.

 

 

 

 

My files for download again are

The Navigation Script

The Navigation CSS

SharePoint Saturday Philly Wrap-Up

Thanks to the SharePoint Saturday Philly team, it was a pleasure to be part of the event again! The year was just as spectacular as last years. These events are huge opportunities for people like myself, to network with individuals that are involved in the same type of SharePoint work. I also sat in on a few sessions around SharePoint development as I’m interested in what people are doing, how they are doing it and the tools that they are using. I scored a few brain nuggets and that’s what keeps me coming back for more.

Sessions Info

So thank you to my attendees for listening, I’m glad I didn’t put many of you to sleep J ! This was my second go at this new material that I’ve put together and I feel that it went extremely well. If you have any follow up questions or comments you can leave them for me here or email me (address in the slides).

The link to my slides on slideshare

The link to my demo VS2010 project

My SharePoint 2010 Sticky Footer Solution

Problem

I’ve come across a handful of sticky footer solutions and many of them claiming to work in SharePoint. Most of the CSS ones just can’t cut it b/c of how SharePoint 2010 now adjusts the page height for the scrollbar / Ribbon. It just never seems to work. A few solutions that do work involve jQuery, now I don’t like this b/c now you need to add the reference to the jQuery library. This is just another resource that if not needed I’d rather not add. My solution was written in JavaScript so that no additional resources are needed. Just attach the JavaScript file and adjust it as I’ll demonstrate to get it to work on your site.

For the impatient: Download script here , Read Instructions under the Solution header

 

Current Issue

So every time I do a new master page with a footer, I am stuck with a page that has no content and the footer is floating way above the bottom of the page like so.

This is using the OOTB V4.master (a copy of course), and my footer placed right above the Developer Dashboard so it’s the last thing inside the #s4-bodyContainer.

(Style put inline for demonstration purposes)

Even if you go outside the #s4-bodyContainer and place the footer, as the last element in s4-workspace you’ll get the same effect. (I’ve added comments this time to show where I am in the master page)

If you go below the s4-workspace, you will get a very undesirable effect, because SharePoint only detects things inside the workspace and uses that to resize the page. SO you’ll see your footer for a second then it will be pushed out of frame!

 

Solution

 

Again as stated in the problem statement, many of the solutions you’ll find rely on jQuery. This one is in JavaScript so that you don’t have to worry about loading that jQuery library. This solution will analyze the size of the view space and adjust the body container taking in considers of the height of the footer, the ribbon & itself.

Step 1) To utilize this script the placement of your footer must be between the s4-bodyContainer & s4-workspace.

(Comments were added by my and will not be there on the default master page)

Step 2 ) Download the JavaScript file here.

Step 3 ) Add the js file to your SharePoint site

Step 4 ) Add the reference in the Master Page, somewhere before the </head> tag

Once you complete all the steps your footer will now be properly placed at the bottom of a short page. It will even update itself when the page is stretched or shrunk.

SharePoint Saturday Virginia Beach Recap

A big thank you to everyone who attended my session and thank you to the SPSVB team for putting together such a great event. I’m fascinated meeting the people out there and finding out some of the challenges they are having. It’s also such a great opportunity to network with folks and learn from our peers.

So I have some files from my sessions/demos.

Session 1 – Getting Started with SharePoint Branding Slides

Demo Project

Session 2 – Dissecting Custom SharePoint Sites Slides

AdditionPageHead

AdvancedTheme

If you had any questions or want to chat feel free to email me.

OOTB Navigation fix to support IPad & I-Devices

I was recently asked to get the navigation to work on a tablet. Well part of the problem is the there is really no such thing as a Hover on those devices. Once you touch the screen it’s considered a click.

After browsing around the internet I found this article http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/ which contains somewhat of a fix for navigation menus. It basically explained to me that I can attach to a ‘touchstart’ and ‘touchend’ event. Expanding on that idea, I created a small jQuery snippet which works for the SharePoint OOTB navigation which will allow the user to use the navigation on their IPad, IPhone, or IPod. I will be working on support for other touchscreen devices in the near future.
Heres the code.. make sure you have the base jQuery library on your page.

$(document).ready(function(){

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {

 $(".s4-tn .menu-horizontal ul.root li.dynamic-children a.dynamic-children").bind('touchstart',function(e){

  var position = $(this).next().position();

  if(eval(position.left < -1))
  {
   $(this).click(function(c){
    c.preventDefault();
   });
  }
  else
  {
   var location = $(this).attr("href");
   window.location = location;
  }

 });
}

});

This will allow you to touch once to open a menu item that has children. Touching that menu item again would navigate to that node.

This has worked pretty well for me. If you decide to try it out let me know if you encounter any issues.

Tree View Navigation & Managed Meta Data Navigation, Missing Vertical Grip in starter.masterpage

Intro

This goes out to those people that want to use the managed meta data navigation / tree view navigation and are using the starter master page or another simplified master page. By default the tree view navigation is hidden in the starter master page so you’ll need to put that back. The other issue that some people may have encountered is that the vertical navigation resizer is nowhere to be found. The following sections will explain the issues and how to restore the navigations horizontal resizing functionality. I am a big proponent of the starter.masterpage. I use it frequently and just recently noticed this when comparing the meta data navigation.

Tree View Navigation & Managed Meta Data Navigation

You can add back in the Tree View Control which is used to show the Tree View Navigation and the Meta Data Navigation. Just add this control back from the hidden zone in the Starter master page. You’ll want to paste it back in the div id=’s4-leftpanel’ somewhere around line 459.

Hidden Control @ Bottom of Starter Master Page -> <SharePoint:DelegateControl runat=”server” ControlId=”TreeViewAndDataSource”></SharePoint:DelegateControl>

Left image displays no tree view navigation on the starter master page. Right image displays tree view navigation on v4.master.

    

Tree View Navigation – Lost Horizontal Expansion (aka GrippyVerticalBarPositionHelper)

Because of the simplified structure of the starter master page you will lose the vertical grip which can be useful in dynamically resizing the width of the left quick launch. You CAN get this back but you need to re-structure your master page.

Vertical Grip as seen on V4.master

 

This vertical grip / horizontal resizer goes away in the starter master page because its missing one of the key div’s which make it possible.

The following div needs to surround the div id=’MSO_ContentDiv’.

<div id=”MSO_ContentTable”>

<div id=”MSO_ContentDiv” runat=”server”> [clipped for brevity] </div>

</div>

Adding this around the ‘MSO_ContentDiv’ on the starter master page and you will get this. (This assumes that the tree view control was previously added)

What you might not immediately notice is that there is a huge left side margin. This is because the structure of the HTML in the starter has been reduced that this is still not going to display correctly. The correct minimal structure would be:

<div id=”s4-workspace”>

    <div id=”s4-bodyContainer”>

        <div id=”s4-mainarea”>

            <div id=”s4-leftpanel”> [clipped for brevity] </div>

            <div id=”MSO_ContentTable”>

                <div id=”MSO_ContentDiv”> [clipped for brevity] </div>

</div>

</div>

</div>    

</div>

As you can see from the markup above, the ‘s4-leftpanel’ and the ‘MSO_ContentTable’ are sibling nodes. So the reason why this does not work in the starter master page is because the ‘s4-leftpanel’ node is actually inside the ‘MSO_ContentDiv’, plus there is no ‘MSO_ContentTable’ which needs to be present in order for the vertical navigation resizer to appear.

Deploying Master Pages & Themes via a Feature using Visual Studio 2010

Following this guide you’ll see the process that goes behind creating the feature which commonly be used to deploy branding items such as Master Pages, CSS, JavaScript, & Themes. If you plan to follow along just replace the steps with my name with whatever you wish.

Configure the Project

1. Open Visual Studio 2010
2. File -> New -> Project

1. Select SharePoint -> Empty SharePoint Project
2. Add Name: TomDaly.SharePoint.Branding (this is my standard structure)
3. Add Location: C:\Projects\TomDaly

1. Click OK
2. Enter your test site for debugging purposes.
3. Select ‘Deploy as farm solution’

1. Click Finish

Adding the CSS / Image / JavaScript Files

Add CSS file

1. Right Click on the Project -> Add -> SharePoint ‘Layouts’ Mapped Folder

1. This created a folder which is mapped to the layouts

** These files in here are accessible through the web via http://YOURSITE/_layouts/TomDaly.SharePoint.Branding/

1. Right click on Layouts\TomDaly.SharePoint.Branding folder -> Add -> New Item

1. Select Web on the left, and Style Sheet on the right, and Name the file at the bottom.

(I typically use base.css or style.css for the foundation of my styles, but this is all up to you)

1. Click Add

Add Images & JavaScript Folder

This would be the location for any images associated with the site css.

1. Right Click on the Layouts\TomDaly.SharePoint.Branding folder -> Add -> New Folder

1. Name the folder ‘images’

OPTIONAL STEP

1. Repeat Step 1 & 2 for the JavaScript folder. (I typically call this folder ‘js’)

I usually include a JavaScript folder because most of the time I end up using jQuery somewhere on the site, this is where I store those files which I would reference on page or in the Master Page. Depending on how it’s needed.

These files would be accessible: http://YOURSITE /_layouts/TomDaly.SharePoint.Branding/js/JSFILESHERE

Setting up the Feature

1. In your project Right click on Features -> Add Feature

This will create a feature with some default name of ‘Feature 1′, which we don’t want

1. Select Feature1, Right Click -> Rename

1. Rename the Feature to TomDaly.SharePoint.Branding (I typically name it to the same as the project name)

1. Double Click on your Primary feature, in the main left hand window the properties should appear

1. Give your feature a normal title name Title and Description, and scope it accordingly. (I usually scope my master pages to (Site) as they are normally used through the site collection

1. Click Save

Renaming the WSP

This is really annoying to me so I always change it. When a .WSP is generated it will usually come out as Feature_Feature.wsp. I prefer just Feature.wsp.

1. Double Click on the primary Feature, the Properties should appear right below it.

2. Change ‘Deployment Path’

From: $SharePoint.Project.FileNameWithoutExtension$_$SharePoint.Feature.FileNameWithoutExtension$

To: $SharePoint.Project.FileNameWithoutExtension$

Adding the Master Page

1. Right Click on the Project -> Add -> New Item

2. In the left Installed Template column, Select SharePoint 2010

3. On the right select Module

4. At the bottom name the Module, Master Pages

5. Click Add

** You module will be added to your project **

6. Under the Master Pages Module, right click on Sample.txt and Delete It

7. Now Drag & Drag and Drop your Custom Master Page from another folder into the project, In the Master Pages Module

8. Double Click on the Elements.xml in the Master Pages Module

9. In the Elements.xml file, make the following changes to the <Module> line

Change

<Module
Name=“MasterPages“>

 

To

<Module
Name=“MasterPages“
Url=“_catalogs/masterpage“>

 

10. In the Elements.xml file, make the following changes to the <File> line

    a. add IgnoreIfAlreadyExists=“True“

    b. add Type=“GhostableInLibrary“

    c. remove MasterPages/ from the
Url=“MasterPages/TOMDALY.master“

 

So essentially this line

<File
Path=“MasterPages\TOMDALY.master“
Url=“MasterPages/TOMDALY.master“ />

 

Changes to

 

<File
Path=“MasterPages\TOMDALY.master“
Url=“TOMDALY.master“
IgnoreIfAlreadyExists=“True“
Type=“GhostableInLibrary“ />

 

11. Click Save

Adding Theme

This step will incorporate a theme into your project. How to generate the .thmx is not covered here but a simple way would be to export from PowerPoint or use ThemeBuilder to generate this file.

1. Right Click on the Project -> Add -> New Item

2. On the left Click SharePoint -> 2010

3. On the Right Select “Module”

4. Add Name: Theme

5. Click Add

6. In the Theme node, Delete Sample.Txt

7. Copy in you custom .thmx file

8. Double Click on the Elements.xml in the Theme Module

9. In the Elements.xml file, make the following changes to the <Module> line

Change

<Module
Name=“Theme“>

 

To

<Module
Name=“Theme“
Url=“_catalogs/theme“>

 

10. In the Elements.xml file, make the following changes to the <File> line

    a. add IgnoreIfAlreadyExists=“True“

    b. add Type=“GhostableInLibrary“

    c. remove Theme/ from the
Url=“Theme/TomDaly.thmx“

 

So essentially this line

<File
Path=“Theme\TomDaly.thmx“
Url=“Theme/TomDaly.thmx“ />

 

Changes to

 

<File
Path=“Theme\TomDaly.thmx
” Url=“TomDaly.thmx“
IgnoreIfAlreadyExists=“True“
Type=“GhostableInLibrary“ />

 

11. Click Save

Adding the Feature Receiver

This whole step is optional. Its sole purpose is to automatically turn on the branding on the sites and subsites, apply a theme, or apply search master pages to your site collection. NOTE: If you changed the scope then there is no guarantee that this code will work.

Please take some time to look through the code as there are different sections you might want to comment out or fill in. Say if you want to configure the Site Logo or an Alternative CSS file. If you not interested and just want a working project jump down to the END and in the summary there is a link to download the project.

1. Right Click your primary Feature, Select Add Event Receiver

** This will get added Right under your feature**

2. Double Click on the new file TomDaly.SharePoint.EventReciever.cs

5. At the very top Add the following using statements

using Microsoft.SharePoint.Utilities;

using System.Collections.ObjectModel;

 

7. Under the class declaration add these three string constants which contain the names of the masterpages and the theme.

So my master page name is TomDaly.master, my search master page which I don’t have a custom one for yet is minimal.master, and my Custom Theme is called TomDaly

8. Replace the public override void FeatureActivated, with

 

public override void FeatureActivated(SPFeatureReceiverProperties properties)

{

SPSite site = properties.Feature.Parent as SPSite;

 

if (site != null)

{

using (SPWeb topLevelSite = site.RootWeb)

{

//Get the relative path

string relativePath = topLevelSite.ServerRelativeUrl;

if (!relativePath.EndsWith(“/”))

{

relativePath += “/”;

}

 

//Get Theme collection from site and the them we want

ReadOnlyCollection<ThmxTheme> themes = ThmxTheme.GetManagedThemes(site);

ThmxTheme customTheme = null;

foreach (ThmxTheme theme in themes)

{

if (theme.Name == themeName)

{

customTheme = theme;

break;

}

}

 

//Apply branding to each web in the site collection

foreach (SPWeb web in site.AllWebs)

{

//Apply masterpage and logo

if (web.WebTemplate == “SRCHCENTERLITE” || web.WebTemplate == “SRCHCEN” || web.WebTemplate == “SRCHCENTERFAST”)

{

web.CustomMasterUrl = relativePath + “_catalogs/masterpage/” + searchMasterPage;

}

else

{

web.MasterUrl = relativePath + “_catalogs/masterpage/” + masterPage;

web.CustomMasterUrl = relativePath + “_catalogs/masterpage/” + masterPage;

}

 

web.AlternateCssUrl = “”;

web.SiteLogoUrl = “”;

web.UIVersion = 4;

web.Update();

 

//Also apply the theme

if (customTheme != null)

{

customTheme.ApplyTo(web, true);

web.Update();

}

}

}

}

}

9. Replace the public override void FeatureDeactivated, with

public override void FeatureDeactivating(SPFeatureReceiverProperties properties)

{

SPSite site = properties.Feature.Parent as SPSite;

 

if (site != null)

{

using (SPWeb topLevelSite = site.RootWeb)

{

//Get the relative path

string relativePath = topLevelSite.ServerRelativeUrl;

if (!relativePath.EndsWith(“/”))

{

relativePath += “/”;

}

 

//Apply branding to each web the wen the site collection

foreach (SPWeb web in site.AllWebs)

{

//Apply default masterpage and logo

if (web.WebTemplate == “SRCHCENTERLITE” || web.WebTemplate == “SRCHCEN” || web.WebTemplate == “SRCHCENTERFAST”)

{

web.CustomMasterUrl = relativePath + “_catalogs/masterpage/minimal.master”;

}

else

{

web.MasterUrl = relativePath + “_catalogs/masterpage/v4.master”;

web.CustomMasterUrl = relativePath + “_catalogs/masterpage/v4.master”;

}

 

web.AlternateCssUrl = “”;

web.SiteLogoUrl = “”;

web.Update();

 

//reset the theme back to default

ThmxTheme.SetThemeUrlForWeb(web, null, true);

web.Update();

}

}

}

}

10. Click Save

11. Hit F6, or Build -> Build Solution … to ensure that everything is correct and ok. You should receive the “Build Succeed” in the bottom left corner

 

 

Changing the Site Url for Testing

Sometimes you want to create or re-use this package and you need to change the url of the site to deploy to.

1. Click on the project and in the Properties window you’ll notice the Site URL

2. Change that to your new site destination

3. Click Save

Deployment

If you’re testing on a development box, that visual studio is on then you can simply deploy through visual studio. Otherwise you’ll have to push out your solution with the .wsp file.

Deploy from Visual Studio

1. In the Build Menu, Select Deploy

OR

Getting the .WSP for manual deployment

1. In the Build menu, Select Build to ensure no errors

2. In the Build menu, Select Package to generate the .WSP file

3. The files will be in the project folder, and by default in the BIN\DEBUG

Either way once you deploy your solution should be available in the Site Collection Features Gallery as shown here

Summary

So that’s how you setup a project for deploying branding assets. This is the typical setup I use but can change from client to client depending on their needs.

Download the entire project here.

Clean V4 Master Page

This is a creation / compilation of the v4.master page which I use when branding a site that requires more of a SharePoint look where as sometimes the Starter Master Page takes away too much.

This master page contains everything V4 contains plus comments compiled from online blogs/articles, and ending comments to find the closing tags more easily. If you’re new to Master Pages then it may be worthwhile to take a look at this as its more cleanly indented and the descriptions could be of some value in learning.

Download CleanV4.master