Ideas for SharePoint 2010 Master Page Customization

Introduction: We use SharePoint2010 to do the portal site, often need to customize the master page, but 2010 provided ribbon way, custom kill him later, the use of the inconvenience, many functional interfaces need to enter from the ribbon inside, Editors will not be able to edit and so on, or pop up script exceptions. So, we have to consider the other way, more reasonable use of ribbon and left navigation.

Method a way to use JS footsteps

So I want to use JS hidden way, deal with the master page, the need to hide the default, and then through the URL to pass the reference, when needed, the ribbon back. This is my way of thinking, to show you what I have done for example.

The following figure, is a reference to the SharePoint default master page of a page, we are very familiar with it, V4.master is my reference to the master page, the effect is like this, I have to deal with the ribbon and left navigation, because to do the portal home, these two very in the way of the son, hehe.

Through the IE Development toolbar, find the Ribbon and the left navigation area ID, respectively, "S4-ribbonrow" and "S4-leftpanel", using the script to hide these two things, it becomes the following figure we need the effect, The middle gray area is the PlaceHolderMain area, I add a div, easy to identify and adjust.

We want to do is not only hidden, but also upload a parameter in the URL, I am here clearly for "show", through JS get to the parameters, and then operate, if there are parameters show and the value of show is "true" in the case, we put the ribbon and left navigation also displayed.

<script>
  
function QueryString (item)
  
{
  
         var svalue=location.search.match (new   RegExp ("[?& ] "+item+" = ([^&]*) (ampersand), "I") return  
  
         svalue?svalue[1]:svalue
  
}
  
var   showid=querystring (" ShowAll ");
  
document.getElementById ("S4-leftpanel"). style.display= ' None ';
  
document.getElementById ("S4-ribbonrow"). style.display= ' None ';
  
document.getElementById ("Mso_contenttable"). style.margin= ' 0 ';
  
if (showid== "true")
  
{
  
document.getElementById ("S4-leftpanel"). style.display= ' block ';
  
document.getElementById ("S4-ribbonrow"). style.display= ' block ';
  
document.getElementById ("Mso_contenttable"). style.margin= ' 0   0 0 155px ';
  
}
  
</script>