All posts in Masterpages

SharePoint 2013 Masterpage for SharePoint 2010 – Sandbox Solution

by Christopher Pettigrew on October 24, 2012 in Masterpages, SharePoint 2010, SharePoint 2013 with 3 Comments

Overview

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

Download the WSP from our codeplex site: http://lifeinsharepoint.codeplex.com/

Screenshots

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

by Christopher Pettigrew on October 17, 2012 in Masterpages, SharePoint 2010, SharePoint 2013 with 3 Comments

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

by Christopher Pettigrew on June 19, 2012 in Javascript, jQuery, Masterpages, QuickTip, SharePoint 2010 with 12 Comments

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)

	&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;

	&lt;script type="text/javascript"&gt;
	jQuery(function($) {
        var CookieName = "QuickLaunchHidden";
	    var MainArea = $('.s4-ca');
	    var MainAreaLeftMargin = $(MainArea).css('margin-left');
	    var NoLeftMargin = "0px";
	    var LeftArea = $('#s4-leftpanel');
	    var Collapse = "/_layouts/images/mewa_leftPage.gif";
	    var Expand = "/_layouts/images/mewa_rightPage.gif";

	    $(MainArea).prepend('&lt;a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'&gt;&lt;img src=\''+ Collapse +'\'/&gt;&lt;/a&gt;');

	    $('.min').click(function(){
			//Toggle the Left Panel to hide it
			$(LeftArea).toggle();
			$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) :  MainArea.css('margin-left',NoLeftMargin);
			var img = $(this).children();
			$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
		});
	});
	&lt;/script&gt;

jQuery(function($) {

var CookieName = "QuickLaunchHidden";

var MainArea = $('.s4-ca');

var MainAreaLeftMargin = $(MainArea).css('margin-left');

var NoLeftMargin = "0px";

var LeftArea = $('#s4-leftpanel');

var Collapse = "/_layouts/images/mewa_leftPage.gif";

var Expand = "/_layouts/images/mewa_rightPage.gif";

$(MainArea).prepend('<a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'><img src=\''+ Collapse +'\'/></a>');

$('.min').click(function(){

//Toggle the Left Panel to hide it

$(LeftArea).toggle();

$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) : MainArea.css('margin-left',NoLeftMargin);

var img = $(this).children();

$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );

});

</script>

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.

	    var MainArea = $('.s4-ca');
	    var MainAreaLeftMargin = $(MainArea).css('margin-left');
	    var NoLeftMargin = "0px";
            var LeftArea = $('#s4-leftpanel');
	    var Collapse = "/_layouts/images/mewa_leftPage.gif";
	    var Expand = "/_layouts/images/mewa_rightPage.gif";

var MainArea = $('.s4-ca');

var MainAreaLeftMargin = $(MainArea).css('margin-left');

var NoLeftMargin = "0px";

var LeftArea = $('#s4-leftpanel');

var Collapse = "/_layouts/images/mewa_leftPage.gif";

var Expand = "/_layouts/images/mewa_rightPage.gif";

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.

	    $(MainArea).prepend('&lt;a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'&gt;&lt;img src=\'' + Collapse + '\'/&gt;&lt;/a&gt;');

1	$(MainArea).prepend('<a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'><img src=\'' + Collapse + '\'/></a>');

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.

	    $('.min').click(function(){
			//Toggle the Left Panel to hide it
			$(LeftArea).toggle();
			$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) :  MainArea.css('margin-left',NoLeftMargin);
			var img = $(this).children();
			$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
		});

$('.min').click(function(){

//Toggle the Left Panel to hide it

$(LeftArea).toggle();

$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) : MainArea.css('margin-left',NoLeftMargin);

var img = $(this).children();

$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );

});

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

by Christopher Pettigrew on May 25, 2012 in Masterpages, SharePoint 2010 with 1 Comment

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.

Chris

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

by Christopher Pettigrew on May 23, 2012 in Javascript, jQuery, Masterpages, QuickTip, SharePoint 2010 with 12 Comments

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.

    &lt;script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;    
    &lt;script type="text/javascript"&gt;
    jQuery(function($) {
        //Hide all 
        $('.s4-ql li ul').hide();
        
        //Set the Images up
        var Collapse = "/_layouts/images/collapse.gif";
        var Expand = "/_layouts/images/expand.gif";        

        //Find each top level UI and add reletive buttons &amp; children numbers
         $('.s4-ql ul li').find('ul').each(function(index) {
            var $this = $(this);            
            $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['&lt;a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'&gt;&lt;img src=\'/_layouts/images/expand.gif\'/&gt;&lt;/a&gt;&lt;span style=\'margin-top:5px;float:right;font-size:0.8em;\'&gt;(', $this.children().length, ')&lt;/span&gt;'].join(''));
        });
        
        //Setup Click Hanlder
        $('.min').click(function() {
            //Get Reference to img
            var img = $(this).children();
            //Traverse the DOM to find the child UL node
            var subList = $(this).siblings('ul');
            //Check the visibility of the item and set the image            
            var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;
            //Toggle the UL
            subList.slideToggle();
        
        });                
    });
    &lt;/script&gt;

jQuery(function($) {

//Hide all

$('.s4-ql li ul').hide();

//Set the Images up

var Collapse = "/_layouts/images/collapse.gif";

var Expand = "/_layouts/images/expand.gif";

//Find each top level UI and add reletive buttons & children numbers

$('.s4-ql ul li').find('ul').each(function(index) {

var $this = $(this);

$this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'/_layouts/images/expand.gif\'/></a><span style=\'margin-top:5px;float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));

});

//Setup Click Hanlder

$('.min').click(function() {

//Get Reference to img

var img = $(this).children();

//Traverse the DOM to find the child UL node

var subList = $(this).siblings('ul');

//Check the visibility of the item and set the image

var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;

//Toggle the UL

subList.slideToggle();

});

</script>

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

All posts in Masterpages

SharePoint 2013 Masterpage for SharePoint 2010 – Sandbox Solution

Overview

Download

Screenshots

SharePoint 2013 Masterpage for SharePoint 2010 – Sneak Peek

Quick Tip – jQuery Collapsable Quicklaunch for SharePoint 2010

Metro UI Masterpage (Farm) Updated – Click Accordion Quicklaunch

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

UPDATE 20/06/2012.

SharePoint Links

Categories

Archives

Recommended Sites