SharePoint Foundation Master Page Picker

By Stu


I recently began a new SharePoint 2010 branding project that requires only SharePoint 2010 Foundation be used. If you have worked in a purely Foundation environment you have probably quickly realized that there are no tools in Site Settings to allow you to select an alternate Master Page. So how do you create a custom branded Foundation Site if you cannot even select your new Master Page for testing or deployment? I found a great solution in the “Foundation Master Page Picker” on CodePlex and here is how to set it up!
SharePoint branding requires a lot of trial and error development. You can always start by developing your front-end code as pure HTML and CSS but eventually you have to deploy the code to a master page and get it working in SharePoint. Once you have done this, it’s matter of testing and tweaking until you get it just right. SharePoint injects a number of CSS classes that can mess with even the cleanest markup and it’s never as easy as simply injecting your pristine code and calling it done.
But what about SharePoint 2010 Foundation sites? The intent with Foundation was to use the theme system to change the look and feel. This is very apparent when you look at the site settings. There are no options for selecting a new master page and rather than modifying the v4.master, wouldn’t it be better to leave that in place as a backup? Building a new master page with a name that fits your project is always preferable to modifying the existing or default master pages.
In my research I found a great solution on CodePlex called the SharePoint Foundation Master Page Picker. However, if you are not familiar with SharePoint administration installing and deploying a solution can be intimidating and there is at least one gotcha I found with this solution that you should know about.
Download the solution
To start with you need to go get the solution. Download it from CodePlex and save to a folder on your SharePoint server.
Install the solution
The next thing you need to do is install it. To do this you are going to use stsadm.exe. This is a command line application used to numerous administration tasks on your server.
1. Open a command prompt – you can select it from your program menu or select Start and type cmd in the “search programs and files” box
2. Navigate to stsadm – stsadm is located in the hive. In command prompt you navigate by typing “cd” followed by a space and folder you want to open. On my server the path to stsadm is: c:program filescommon filesmicrosoft sharedweb server extensions14bin

3. Install the solution – now that we are in the bin we can execute commands against stsadm. To install this solution you need to run the following command:
stsadm -o addsolution -filename c:{your folder name here}IBS.SharePointFoundation.Utilities.wsp
You should get a confirmation that the solution was successfully installed, if not, check your command for extra spaces or other simple errors and try it again.

4. Deploying the solution – The next step is to deploy the solution. There are things that need to go into the GAC and running the “deploysolution” command will do this for us. There is a very specific way in which you need to deploy this solution and I only discovered through trial and error. Use the following command to deploy the solution:
stsadm -o deploysolution -name IBS.SharePointFoundation.Utilities.wsp -local -allowGacDeployment

5. Activate the Feature – Installation and deployment are now complete, all we have to do now is turn the functionality on. This is a site collection feature so navigation to the site settings page of the top level site in your site collection. Under Site Collection administration you will find a link to Site Collection Features, click on this link and activate the Master Page Picker feature.

6. Select a new master page – You’re done! To select a new master page for your Foundation site, go to Site Settings>Look and Feel and select the Master Page Picker. You will see a list of available master pages allowing you to select the one you want and click OK to change the master page.

Once you have created your custom master page and dropped it into the master page gallery it too will appear on this list as an available option.


Information from Stu

Scrolling not working in IE

Recently I have been trying to get my scroll bar work proin Internet explorer with CSS attribute and inline styling but I kept getting nowhere.
I finally found a way to fix it.
In my master page and by default in the master page, the <body> tag has a property called scroll.
By default that property looks like this <body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">
Just change that scrool="no" to scroll="yes" and like magic the scrolling works :)
Hope this was helpful.

Furthermore you can add this script to the head:

function FixRibbonAndWorkspaceDimensions(){
  ULSxSy:;
  g_frl = true;
  var elmRibbon = GetCachedElement("s4-ribbonrow");
  var elmWorkspace = GetCachedElement("s4-workspace");
  var elmTitleArea = GetCachedElement("s4-titlerow");
  var elmBodyTable = GetCachedElement("s4-bodyContainer");
  if(!elmRibbon || !elmWorkspace || !elmBodyTable){
    return;
  }
  if (!g_setWidthInited){
    var setWidth = true;
    if (elmWorkspace.className.indexOf("s4-nosetwidth") > -1)
      setWidth = false;
    g_setWidth = setWidth;
    g_setWidthInited = true;
  }
  else{
    var setWidth = g_setWidth;
  }
  var baseRibbonHeight = RibbonIsMinimized() ? 44 : 135;
  var ribbonHeight = baseRibbonHeight + g_wpadderHeight;
  if(GetCurrentEltStyle(elmRibbon, "visibility") == "hidden"){
    ribbonHeight = 0;
  }

  // Override default resizing behavior
  // -- adds padding to the top of the "s4-workspace" <div> if the ribbon exists and has content
  // -- allows the ribbon to be positioned using CSS instead of JavaScript (more accessible)
  // -- checks to see if the page is inside a "no-ribbon" dialog
  if(elmRibbon.children.length > 0 && document.getElementsByTagName("html")[0].className.indexOf('ms-dialog-nr') == -1){
    elmWorkspace.style.paddingTop = ribbonHeight + 'px';
  } 

And lastly add this to the stylesheet:

body.v4master {
   overflow: visible;
   height: inherit;
   width: inherit;
}
body #s4-workspace {
 overflow: visible !important;
}
body #s4-ribbonrow {
 position: fixed;
 z-index: 1000;
}
#s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."] {
 position: fixed !important;
}
.ms-dlgOverlay {
 width: 100% !important;
}

This solution does two things: first, it will override the default appearance and behavior of the SharePoint interface, enabling scrollbars on your pages by default (much rejoicing is in order). Second, it keeps the ribbon fixed to your browser window using CSS (instead of JavaScript). Instead of resizing the s4-ribbonrow and s4-workspace divisions, I’m simply adding some padding to the top of the s4-workspace element. Every time the ribbon “resize” script runs, it bumps your content down a little to make sure you can still see your site header.
This should work on any master page that uses the “v4″ SharePoint interface. I’ll be using this method on every SharePoint site I create from this point forward, so definitely keep this in mind in your own SharePoint design ventures! Best of luck, and please let me know if this helps you in any way.

Part of this information was given by Kyle Schaeffer

Customize the Display of Quick Launch (sharepoint 2010)

 

A number of options are available to developers who want to customize the appearance and behavior of Quick Launch, the menu in the left navigational area of pages in a Microsoft SharePoint Foundation website. One very commonly used technique is to modify attributes of the control that renders the Quick Launch menu. Another approach is to replace the menu control with an altogether different type of navigational control. This topic gives examples that use both methods.

Modifying the menu control

---

You can modify the appearance of Quick Launch by setting attributes on the AspMenu control that displays its navigational nodes. For example, you can set attributes that collapse the view of the menu to headings alone and add flyout menus for displaying subordinate menu levels.

The menu control is defined in the default master page for the website. To change characteristics of the menu, you must either customize the originally installed default master page or create a custom master page and set it as the default.

To display flyout menus by modifying the default master page

1. Open your browser and navigate to the website that you want to customize.
2. Click Site Actions, and then click Site Settings.
3. In the Galleries section, click Master pages.
4. Select v4.master. Then click Edit Document on the ribbon.

The master page opens in the default editor. If Microsoft SharePoint Designer 2010 is installed on your computer, the file opens in SharePoint Designer.

5. Close your browser.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open.

6. Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"
7. Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1, as follows.

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server"

    EnableViewState="false" DataSourceId="QuickLaunchSiteMap"

    UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical"

    StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"

    SkipLinkText="" CssClass="s4-ql" />

By default, the StaticDisplayLevels attribute is set to 2. This means that when the page is rendered, the Quick Launch area of the left navigation bar has two menu levels: a series of headings and, below each heading, a set of child links. Changing the value to 1 means that only headings are shown.

The default value of the MaximumDynamicDisplayLevels attribute is 0. This disables flyout menus. Setting the value to 1 means that the first menu level below the last level on the static menu appears in a flyout menu. In this case, flyoutmenus appear for the first level below the headings.

8. Save the file and open a page in the website to see the result of your changes.

To display flyout menus by creating a custom master page

1. In SharePoint Designer 2010, open the website that you want to customize.
2. In the Navigation pane, select Master Pages.
3. Right-click v4.master, and then click Copy.
4. Right-click an empty area of the Master Pages pane, and then click Paste.

The file v4_copy(1).master is created.

5. Right-click v4_copy(1).master, click Rename, and type a new name, such as my.master.
6. Open the new file for editing.
7. Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"
8. Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1, as follows.

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server"

    EnableViewState="false" DataSourceId="QuickLaunchSiteMap"

    UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical"

    StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"

    SkipLinkText="" CssClass="s4-ql" />

9. On the File menu, click Save.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open in the browser. If this occurs, close the browser and try again.

10. In the Navigation pane, select Master Pages.
11. Right-click the name of your master page, and then click Set as Default Master Page.

Note

You can also set a custom master page as the default master by writing code that sets the value of the SPWeb.MasterUrl property.

12. Open a page in the website to see the result of your changes.

Replacing the Menu Control

---

You can replace the AspMenu control with another control, such as the SPTreeView control that displays a tree of nodes that collapse and expand.

To replace the Menu control with a TreeView control

1. In SharePoint Designer 2010, open the website that you want to customize.
2. In the Navigation pane, select Master Pages.
3. Right-click v4.master, and then click Copy.
4. Right-click an empty area of the Master Pages pane, and then click Paste.

The file v4_copy(1).master is created.

5. Right-click v4_copy(1).master, click Rename, and type a new name, such as my.master.
6. Open the new file for editing.
7. Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"
8. Right click V4QuickLaunchMenu, select Select Tag, and then press the Delete key.
9. Replace the deleted markup with markup for three new controls, an SPHierarchyDataSourceControl and an SPRememberScroll control that contains an SPTreeView control.

<SharePoint:SPHierarchyDataSourceControl

      id="MyTreeViewDataSource"

      runat="server" RootContextObject="Web"

      IncludeDiscussionFolders="true" />

<SharePoint:SPRememberScroll

      id="MyTreeViewRememberScroll"

      runat="server" onscroll="javascript:_spRecordScrollPositions(this);"

      Style="overflow: auto;height: 400px;width: 150px; ">

  <SharePoint:SPTreeView

        id="MyWebTreeView"

        runat="server"

        ShowLines="true"

        DataSourceId="MyTreeViewDataSource"

        ExpandDepth="3"

        SelectedNodeStyle-CssClass="ms-tvselected"

        NodeStyle-CssClass="ms-navitem"

        NodeStyle-HorizontalPadding="2"

        NodeStyle-VerticalPadding="5"

        SkipLinkText=""

        NodeIndent="20"

        ExpandImageUrl="/_layouts/images/tvplus.gif"

        CollapseImageUrl="/_layouts/images/tvminus.gif"

        NoExpandImageUrl="/_layouts/images/tvblank.gif" />

</SharePoint:SPRememberScroll>

This markup expands the top three nodes by default, specifies lines drawn between nodes, and specifies values for vertical padding and indentation.

10. On the File menu, click Save.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open in the browser. If this occurs, close the browser and try again.

11. In the Navigation pane, select Master Pages. Right-click the name of your master page, and then click Set as Default Master Page.
12. Open a page in the website to see the result of your changes.

Wonderful information from msdn