All posts in Masterpages

SharePoint 2013 Masterpage for SharePoint 2010 – Sandbox Solution



After some additional tweaking the the design and trying to match the functionality of the SharePoint 2013 interface as much as i could, a SharePoint 2013 masterpage is now ready for testing by my blog visitors.  The SharePoint 2013 Masterpage for 2010 has the following features:

  • SharePoint Sandbox Solution – Office 365 Compatible
  • Custom Site Actions Menu Link
  • “Focus on Content” – hide site navigation to allow user to focus on content only
  • Get the SharePoint 2013 interface without having to upgrade :)

As with my previous solutions they are all available via Codeplex and should you have any positive comments please leave them either here or on codeplex.

Thanks and I hope you all enjoy.


Download the WSP from our codeplex site:


Custom Homepage

OOTB 2010 Blank Site

OOTB 2010 Blog Site

OOTB 2010 Team Site

OOTB 2010 Team Site – Navigation Hidden

Custom 2010 Site Actions Menu


SharePoint 2013 Masterpage for SharePoint 2010 – Sneak Peek

Following on from the success and well received Metro Masterpage, I have decided to start building a SharePoint 2010 masterpage copying the SharePoint 2013 design.  This will enable those who want it to make your SharePoint “look” like 2013 even if the rest is the same.  Below is a screenshot of my current progress and if there is enough positive feedback / requests for this masterpage I will try to get it on codeplex as soon as I can.

Let me know your thoughts.


Quick Tip – jQuery Collapsable Quicklaunch for SharePoint 2010




Another day, another jQuery Quick Tip.  Today we have a piece of jQuery that will enable an end user to hide the Quicklaunch from view and free up some additional space if you have a lower resolution.  As with my other Quick Tips the following code uses the OOTB v4.master so may not work if you have customised your design. (Changes to selectors should be all that would be required to get it working with your own design)

The script above is not much more complicated than previous ones but as always i will go through it piece by piece so you are clear as to what is going on.  The first line is getting a hosted version of the jQuery library, obviously if you have this locally then it may be worth updating this reference appropriately.

The first six lines of code are to setup some variables that will be used during the rest of the script.  We first get a reference to the main Right hand content div which in the case of the OOTB masterpage is the s4-ca classed div.  Next we save the size of the left margin of this div so that it can be used later.  We then set the LeftArea div for the item which will be hidden and also define the size of the left margin when collapsed which is what line three is for.  Finally we have two variables that define the expand and collapsed images.

The next line is quite a long one but its nothing complicated.  What we are doing is to the Defined MainArea we are adding our image with a hyperlink on it which is positioned at the top of the parent container.

This final piece of code is the core of the script and contains the click event handler for our dynamically added code shown above.  We first define the click handler, then we toggle the configured LeftArea so that it is hidden.  Now if we stopped there we would have hidden the quicklaunch but the page would not expand to provide any more room.  To fix this we then need to adjust the MainArea left-margin.  Line four first checks if the left section is visible, and then if it is we set the MainArea margin-left to the configured NoLeftMargin otherwise we “reset” to the left-margin that was set on load.  The final two lines updates the image to show the collapse or expand image depending on the status of the LeftArea.

That’s all there is to it.  I hope like previous snippets that this will be useful for someone and if you have any recommendations or suggestions of new functionality that you would like to see then please let me know.  As always your positive comments are always welcomed and keep me working on new content for you.


Metro UI Masterpage (Farm) Updated – Click Accordion Quicklaunch


Hello everyone,

Following on from the previous post as promised I have updated the Metro UI Masterpage (Farm Solution Only) to include the Click Accordion functionality.  You are now able to configure on a SPWeb basis if you want to use the Hover or Click Accordion.  If you find any problems please let me know ASAP and i will fix them.  Simply upgrade your existing solution and that will give you a new js file and updated controls.

Once again thanks for all your feedback and comments.  I am in the process of coming up with a way to bring the enhancements to the Sandbox editions which will please many of you.


Quick Tip – jQuery click to expand / collapse Quicklaunch – UPDATED 20/06/2012


Hello everyone, following on from the previous Quick Tip I have yet another cool little snippet of jQuery code to enable a manually collapsable quicklaunch.  Many users who have downloaded my Metro UI masterpage commented if there was a way to have the hover quicklauch accordion replaced with a clickable version.  Well your requests have been answered and below is a snippet that will work on any v4.master page.  I have included some comments within the source code to help you out.

I hope that this code is what you were hoping for, and i will soon be updating the Metro Masterpage for Farm Solutions to include an option to choose your accordion type and a Metro UI version of the code.

As always comments / issues always welcome :)

UPDATE 20/06/2012.

Thanks to Anastacia for pointing out the issue with the script in Firefox.  I have updated the script to fix this issue by placing the anchor in a different location and updating the rest of the script. Please use the new script above which solves the issue.  Chris