Create a modern breadcrumb navigation on SharePoint

Today adds the breadcrumb navigation to all SharePoint pages, using the breadcrumb style defined by the Fabric UI.

<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
<div
class="ms-breadcrumb-top">
<div class="ms-breadcrumb-dropdownBox" style="display:none;">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
<SharePoint:PopoutMenu
Visible="false"
runat="server"
ID="GlobalBreadCrumbNavPopout"
IconUrl="/_layouts/15/images/spcommon.png?rev=23"
IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
ThemeKey="v15breadcrumb"
IconOffsetX="215"
IconOffsetY="120"
IconWidth="16"
IconHeight="16"
AnchorCss="ms-breadcrumb-anchor"
AnchorOpenCss="ms-breadcrumb-anchor-open"
MenuCss="ms-breadcrumb-menu ms-noList">
<div class="ms-breadcrumb-top">
<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
</div>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="217"
NodeImageOffsetY="210"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/spcommon.png?rev=23"
RTLNodeImageOffsetX="199"
RTLNodeImageOffsetY="210"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/spcommon.png?rev=23"
HideInteriorRootNodes="false"
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:PopoutMenu>
</SharePoint:AjaxDelta></div>


<h1 name="onetidProjectPropertyTitle" class="bread_h1">
                                        <asp:ContentPlaceHolder ID="PlaceHolderSiteName" runat="server">
<ASP:SITEMAPPATH runat="server" hideinteriorrootnodes="true" rootnodestyle-cssclass="ms-breadcrumbRootNode" currentnodestyle-cssclass="ms-breadcrumbCurrentNode" nodestyle-cssclass="ms-breadcrumbRootNode" rendercurrentnodeaslink="true" sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider">
</ASP:SITEMAPPATH>                                        </asp:ContentPlaceHolder>
                                    </h1>
                                    <span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
                                     
                                    </span>
                                 


</div>




<h1 id="pageTitle" class="ms-core-pageTitle" style="display:none;">
  <SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
  runat="server"
  RenderCurrentNodeAsLink="true"
  SiteMapProvider="SPContentMapProvider"
  CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider"
  SkipLinkText=""><PATHSEPARATORTEMPLATE><SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE></SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
  </SharePoint:AjaxDelta>
  <SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">
<a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;" data-accessibility-nocheck="true">
  <span id="ms-pageDescriptionImage">&#160;</span>
</a>
<span class="ms-accessible" id="ms-pageDescription">
  <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
</span>
<SharePoint:ScriptBlock runat="server">_spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout"); </SharePoint:ScriptBlock>
  </SharePoint:AjaxDelta>
</h1>
</div>

CONVERTING SHAREPOINT 2013 QUICK LAUNCH TO ACCORDION MENU

n this article I'm going to tell you how to turn default SharePoint quick launch menu to an accordion menu. It can be useful if site structure is large and the quick launch takes too much space.

I decided that it will be better if this solution can be stand-alone, so I didn't use any frameworks. I also used a default SharePoint image file (spcommon.png) to create dropdown triangles for both expanded and collapsed levels: 

This solution also accepts a couple of parameters, so you can tweak its behaviour. Parameters are discussed in "How to use" section.

By default SharePoint quick launch menu can hold two levels of items. You can increase this number by changing StaticDisplayLevels parameter inside AspMenu control with V4QuickLaunchMenu ID in your masterpage code:

Add Master Page this control:

<SharePointWebControls:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="4" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" SkipLinkText="" />

CSS:

/* Default menu levels 3+ padding */

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > .ms-core-listMenu-item { padding-left: 60px; }

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > .ms-core-listMenu-item { padding-left: 80px; }

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > .ms-core-listMenu-item { padding-left: 100px; }

/* Switch level 2+ padding */

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .switch { padding-left: 0px; background-color:#09476e ; }

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > .switch { padding-left: 40px; }

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > .switch { padding-left: 60px; }

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > ul.static > li.static > .switch { padding-left: 80px; }

/* Collapsed and expanded levels */

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item{ padding-left:0px;}

.ms-core-listMenu-verticalBox li.static>.ms-core-listMenu-item{ padding-left:0px;}

.ms-core-listMenu-verticalBox li.expanded > ul{  list-style:outside none none;}

.ms-core-listMenu-verticalBox li ul {height: 0;overflow: hidden;background-color:#09476e ;}

.ms-core-listMenu-verticalBox li.expanded > ul {height: auto; background-color:#09476e ;}

/* Switch styles */

.switch { float: left; width: 20px;height: 25px; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;  }

.switch span { display: block; width: 10px;height: 15px; margin: 5px; overflow: hidden;}

.switch img {position: relative; left: -254px;top: -184px;}

.expanded > .switch img{ left: -254px;top: -144px; }

SP2013Accordion.js:

var SP2013QLAccordion = {

  // Options

  useAnimation: true, // Animation is supported in IE9+

  collapseOtherLevels: false, // Collapse sibling levels on expanding

  expandTransition: 'height 0.15s ease-out',

  collapseTransition: 'height 0.15s ease-out',

    

  // Initialization function

  init: function (){

    var levels = document.querySelectorAll('.ms-core-listMenu-verticalBox li');

    

    if (levels.length) {

      for (var i = 0; i < levels.length; i++) {

        if (levels[i].querySelector('ul')) {

          // Create switch elements and append them to levels with sublevels

          var switchSpan = document.createElement('div');

          

          switchSpan.className = 'switch';

          switchSpan.innerHTML = '<span><img alt="" src="/_layouts/15/images/spcommon.png"/></span>';

          levels[i].insertBefore(switchSpan, levels[i].firstChild);

          

          // Add 'expanded' class to selected branch and 'collapsed' to all other

          levels[i].className += (levels[i].querySelector('.selected') || levels[i].className.indexOf('selected') != -1) ? ' expanded' : ' collapsed';

        }

      }

    

      // Detect IE8 or lower to turn off animation

      if (document.all && !document.addEventListener) SP2013QLAccordion.useAnimation = false;

      

      var switches = document.querySelectorAll('.ms-core-listMenu-verticalBox .switch');

      // Add collapse/expand event to switch nodes

      if (switches.length) {

        for (var j = 0; j < switches.length; j++) {

          AddEvent(switches[j], 'click', ExpandCollapse);

        }

      }

    }

    // Function to get height of a hidden node

    function CalculateHeight (node) {

      var initialStyles = node.style.cssText,

        nodeHeight;

      

      node.style.position = 'absolute';

      node.style.visibility = 'hidden';

      node.style.height = 'auto';

      nodeHeight = node.offsetHeight;

      node.style.cssText = initialStyles;

      return nodeHeight;

    }

    // Expand/Collapse function

    function ExpandCollapse (param) {

      var level = this.parentNode,

        sublevel = level.querySelector('ul'),

        sublevelHeight = CalculateHeight(sublevel),

        otherLevels = level.parentElement.children;

      // Close other levels on expanding

      if (SP2013QLAccordion.collapseOtherLevels && level.className.indexOf('collapsed') != -1 && !param) {

        for (var i = 0; i < otherLevels.length; i++) {

          if (otherLevels[i].className.indexOf('expanded') != -1) ExpandCollapse.call(otherLevels[i], 'collapse');

        }

      }     

      

      if (SP2013QLAccordion.useAnimation) {

        // Animated collapse

        if (level.className.indexOf('expanded') != -1 || param == 'collapse') {

          sublevel.style.height = sublevelHeight + 'px';

          level.className = level.className.replace(' expanded',' collapsed');

          sublevel.style.transition = SP2013QLAccordion.collapseTransition;

          sublevel.offsetHeight; // Force repaint

          sublevel.style.height = 0;

        // Animated expand

        } else {

          sublevel.style.height = 0;

          level.className = level.className.replace(' collapsed',' expanded');

          sublevel.style.transition = SP2013QLAccordion.expandTransition;

          sublevel.offsetHeight; // Force repaint

          sublevel.style.height = sublevelHeight + 'px';

          sublevel.addEventListener('transitionend', function transitionEnd(event) {

            if (event.propertyName == 'height') {

              sublevel.removeAttribute('style');

              sublevel.removeEventListener('transitionend', transitionEnd, false);

            }

          }, false);

        }

      } else {

        // Not animated collapse

        if (level.className.indexOf('expanded') != -1 || param == 'collapse') {

          level.className = level.className.replace(' expanded',' collapsed');

        // Not animated expand

        } else {

          level.className = level.className.replace(' collapsed',' expanded');

        }

      }

    }

    // Crossbrowser event attachment helper function

    function AddEvent (htmlElement, eventName, eventFunction) {

      if (htmlElement.attachEvent)

        htmlElement.attachEvent("on" + eventName, function() {eventFunction.call(htmlElement);}); 

      else if (htmlElement.addEventListener)

        htmlElement.addEventListener(eventName, eventFunction, false);

    }

  }

};

// SharePoint default DOM onLoad function

ExecuteOrDelayUntilBodyLoaded(SP2013QLAccordion.init);

Responsive Design

Category Archives: SharePoint 2013

Responsive Design

Refer this link:

http://cedricgervasoni.wordpress.com/category/microsoft/sharepoint/sharepoint-2013/

Custom Master Page In Sharepoint

Sharepoint Master Pages provide the look and feel for all of the pages in your site SharePoint master page and its customization is a predominant aspect to consider in the process of SharePoint development. To add vibrancy and present your business as a livelier prospect, we at Synthesis World have got a dedicated team for SharePoint master page designers. Why it is so imperative to get this done through experts? This is because we have recurrently seen the visual impact of SharePoint sites hampering just because technical aspect is in highlight majority of times. This is the prime reason we lay ample stress on providing duly customized master pages when creating, arranging and designing SharePoint sites. When you present such customized SharePoint master pages, you are sure to reap business rewards. Master pages provide the look and feel and standard behavior that you want for all of the pages in your site. Because Microsoft SharePoint is built on top of Microsoft ASP.NET, it supports master pages for defining elements that are common to all pages. You can specify all of the shared elements of your site in the master page or pages, and add page-specific elements to content pages. We at Synthesis Technology design The master page in Responsive pattern, we use Bootstrap, HTML5 , J-Query, CSS3, Grid layouts, etc. to apply the Responsive Web Design principles in sharepoint master page.

Page Element file in Sharepoint

Page Module Element File:


<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Pages" Url="$Resources:cmscore,List_Pages_UrlName;">
    <File Path="Master Page\Intranet\IntranetHome.aspx" Type="GhostableInLibrary" Url="IntranetHome.aspx" IgnoreIfAlreadyExists="TRUE">          
      <Property Name="Title" Value="Home" />
      <Property Name="PublishingPageLayout" Value="/_catalogs/masterpage/Intranet/IntranetHome.aspx, Home" />
       <Property Name="ContentTypeId" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
    </File>
  </Module>
</Elements>

MasterPage Element File in SharePoint 2013

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Master Page" Url="_catalogs/masterpage"  List="116" RootWebOnly="TRUE">
    <File Path="Master Page\Intranet\IntranetHome.aspx" Url="Intranet/IntranetHome.aspx"  Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE">
      <Property Name="PublishingAssociatedContentType" Value=";#Home;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="Title" Value="Home"/>
      </File>
    <File Path="Master Page\Intranet\Intranet.master" Url="Intranet/Intranet.master" Type="GhostableInLibrary"/>
   

    <File Path="Master Page\Intranet\Property-Management.aspx" Url="Intranet/Property-Management.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE">
      <Property Name="PublishingAssociatedContentType" Value=";#Property Management;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="Title" Value="Property Management"/>
    </File>
    <File Path="Master Page\Intranet\Sales.aspx" Url="Intranet/Sales.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE">
      <Property Name="PublishingAssociatedContentType" Value=";#Sales;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="Title" Value="Sales"/>
    </File>
    <File Path="Master Page\Intranet\Lettings.aspx" Url="Intranet/Lettings.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE">
      <Property Name="PublishingAssociatedContentType" Value=";#Lettings;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="Title" Value="Lettings"/>      
   
    </File>
  </Module>
</Elements>

SharePoint 2013 master page sample

Sample Master page:

<%@Master language="C#"%>
<%@Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@Register TagPrefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>
<%@Register TagPrefix="wssucmui" TagName="MUISelector" Src="~/_controltemplates/15/MUISelector.ascx"%>
<%@Register TagPrefix="PublishingRibbon" TagName="PublishingRibbon" Src="~/_controltemplates/15/Ribbon.ascx"%>
<!DOCTYPE HTML >
<SharePoint:SPHtmlTag runat="server" id="SPHtmlTag" dir="&lt;%$Resources:wss,multipages_direction_dir_value%&gt;">
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />      
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <SharePoint:RobotsMetaTag runat="server">
        </SharePoint:RobotsMetaTag>
        <SharePoint:PageTitle runat="server">
            <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
                <SharePoint:ProjectProperty Property="Title" runat="server">
                </SharePoint:ProjectProperty>
            </asp:ContentPlaceHolder>
        </SharePoint:PageTitle>
        <SharePoint:StartScript runat="server">
        </SharePoint:StartScript>
        <SharePoint:CssLink runat="server" Version="15">
        </SharePoint:CssLink>
        <SharePoint:CacheManifestLink runat="server">
        </SharePoint:CacheManifestLink>
        <SharePoint:PageRenderMode runat="server" RenderModeType="Standard">
        </SharePoint:PageRenderMode>
        <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">
        </SharePoint:ScriptLink>
        <SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">
        </SharePoint:ScriptLink>
        <SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">
        </SharePoint:ScriptLink>
        <SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">
        </SharePoint:ScriptLink>
        <SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">
        </SharePoint:ScriptLink>
        <SharePoint:CustomJSUrl runat="server">
        </SharePoint:CustomJSUrl>
        <SharePoint:SoapDiscoveryLink runat="server">
        </SharePoint:SoapDiscoveryLink>
        <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
            <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
            </asp:ContentPlaceHolder>
            <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">
            </SharePoint:DelegateControl>
            <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">
            </asp:ContentPlaceHolder>
        </SharePoint:AjaxDelta>
        <SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">
        </SharePoint:CssRegistration>
        <SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
            <WebPartPages:SPWebPartManager runat="server">
            </WebPartPages:SPWebPartManager>
        </SharePoint:AjaxDelta>
     
        <meta charset="utf-8" />
     
        <SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/Intranet/css/style.css %&gt;" runat="server" after="SharepointCssFile"/>
        <SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/Intranet/css/base.css %&gt;" runat="server" after="SharepointCssFile"/>
        <SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/Intranet/css/icons.css %&gt;" runat="server" after="SharepointCssFile"/>
    </head>
    <body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();">
<SharePoint:SPClientIDGenerator runat="server" ServerControlID="DeltaPlaceHolderMain;DeltaPlaceHolderPageTitleInTitleArea;DeltaPlaceHolderUtilityContent"/>
<SharePoint:ImageLink runat="server"/><SharePoint:SharePointForm onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}" runat="server" __designer:Preview="&lt;table cellpadding=4 cellspacing=0 style=&quot;font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow&quot;&gt;
              &lt;tr&gt;&lt;td nowrap&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;SharePointForm&lt;/span&gt; - Unnamed6&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;/table&gt;" __designer:Values="&lt;P N=&#39;Method&#39; T=&#39;post&#39; /&gt;&lt;P N=&#39;Name&#39; ID=&#39;1&#39; T=&#39;aspnetForm&#39; /&gt;&lt;P N=&#39;TagName&#39; T=&#39;form&#39; /&gt;&lt;P N=&#39;ID&#39; T=&#39;ctl05&#39; /&gt;&lt;P N=&#39;Page&#39; ID=&#39;2&#39; /&gt;&lt;P N=&#39;TemplateControl&#39; ID=&#39;3&#39; /&gt;&lt;P N=&#39;AppRelativeTemplateSourceDirectory&#39; R=&#39;-1&#39; /&gt;"><asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
     
     
     
        <SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss,master_turnonaccessibility%&gt;" EncodeMethod="HtmlEncode">
                    </SharePoint:EncodedLiteral>
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss,master_turnoffaccessibility%&gt;" EncodeMethod="HtmlEncode">
                    </SharePoint:EncodedLiteral>
                </a>
            </div>
        </SharePoint:SPSecurityTrimmedControl>
        <div id="ms-designer-ribbon">
          <PublishingRibbon:PublishingRibbon runat="server" />
         
        </div>
         <SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">
            <wssucw:Welcome runat="server" EnableViewState="false">
            </wssucw:Welcome>
        </SharePoint:SPSecurityTrimmedControl>
     
        <div id="s4-workspace">
            <div id="s4-bodyContainer" class="s4-hide-bg">
                <header class="s4-notdlg">
                    <div class="logo left">
                        <a href="/">
                            <img src="/Style Library/Intranet/images/Intranet_logo.png" width="279" height="149" />
                        </a>
                    </div>
                    <div class="row left">
                        <!--row div starts here-->
                        <nav id="menu_navigation">
                            <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="true"

SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
StartingNodeUrl="sid:1002"
runat="server"
/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"

EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
Editable="false"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"
SkipLinkText=""
/>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

                        </nav>
                        <!-- end of navigation -->
                        <div class="search_bar left">
                            <!--search_bar  div starts here -->
                         

   <div class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<div id="searchInputBox">
 <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
</div>
  </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>

                         
                        </div>
                        <div class="search_button left">
      <div class="mms-srch-sb-searchLink">
                        <a title="Search" class="mms-srch-sb-searchLink" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr').search($get('ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox').value);})" href="javascript: {}"><img class="" id="searchImg" alt="Search" src="/Style Library/Intranet/images/search.png" width="70" height="30" margin-left="10"></a>
                     
                        </div>
    </div>
                     
                        <!--search_bar  div starts here -->
                    </div>
                    <!--row div ends here-->
                </header>
                <div class="cl">
                </div>
                <div class="main">
                <div class="s4-notdlg welcome-mnu">
               <SharePoint:SPSecurityTrimmedControl runat="server">
            <wssucw:Welcome runat="server" EnableViewState="false">
            </wssucw:Welcome>
        </SharePoint:SPSecurityTrimmedControl>
        </div>
                <div class="content_wrapper">
                        <!--content_wrapper div starts here-->
                     
                        <div class="col-1 left s4-notdlg">
                        <div class="site-actions">
                         
                         Site Actions
                      <span class="ms-siteactions-root" id="siteactiontd">
  <SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/style library/Intranet/images/spcommon.png?rev=23"
ThemeKey="spcommon"
MenuAlignment="Left"
MenuNotVisibleHtml="&amp;nbsp;"
LargeIconMode="false"
>
<CustomTemplate>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true"
>
 <SharePoint:MenuItemTemplate runat="server"
 id="MenuItem_ShareThisSite"
 Text="<%$Resources:wss,siteactions_sharethissite%>"
 Description="<%$Resources:wss,siteactions_sharethissitedescription%>"
 MenuGroupId="100"
 Sequence="110"
 UseShortId="true"
 PermissionsString="ViewPages"
 PermissionMode="Any" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
 Text="<%$Resources:wss,siteactions_editpage15%>"
 Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
 ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=23"
 MenuGroupId="200"
 Sequence="210"
 PermissionsString="EditListItems"
 ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreatePage"
 Text="<%$Resources:wss,siteactions_addpage15%>"
 Description="<%$Resources:wss,siteactions_createpagedesc%>"
 ImageUrl="/_layouts/15/images/NewContentPageHH.png?rev=23"
 MenuGroupId="200"
 Sequence="220"
 UseShortId="true"
 ClientOnClickScriptContainingPrefixedUrl="OpenCreateWebPageDialog('~siteLayouts/createwebpage.aspx')"
 PermissionsString="AddListItems, EditListItems"
 PermissionMode="All" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
 Text="<%$Resources:wss,siteactions_addapp15%>"
 Description="<%$Resources:wss,siteactions_createdesc%>"
 MenuGroupId="200"
 Sequence="230"
 UseShortId="true"
 ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/addanapp.aspx')"
 PermissionsString="ManageLists, ManageSubwebs"
 PermissionMode="Any" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_ViewAllSiteContents"
 Text="<%$Resources:wss,quiklnch_allcontent_15%>"
 Description="<%$Resources:wss,siteactions_allcontentdescription%>"
 ImageUrl="/_layouts/15/images/allcontent32.png?rev=23"
 MenuGroupId="200"
 Sequence="240"
 UseShortId="true"
 ClientOnClickNavigateUrl="~siteLayouts/viewlsts.aspx"
 PermissionsString="ViewFormPages"
 PermissionMode="Any" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_ChangeTheLook"
 Text="<%$Resources:wss,siteactions_changethelook15%>"
 Description="<%$Resources:wss,siteactions_changethelookdesc15%>"
 MenuGroupId="300"
 Sequence="310"
 UseShortId="true"
 ClientOnClickNavigateUrl="~siteLayouts/designgallery.aspx"
 PermissionsString="ApplyThemeAndBorder,ApplyStyleSheets,Open,ViewPages,OpenItems,ViewListItems"
 PermissionMode="All" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
 Text="<%$Resources:wss,siteactions_settings15%>"
 Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
 ImageUrl="/_layouts/15/images/settingsIcon.png?rev=23"
 MenuGroupId="300"
 Sequence="320"
 UseShortId="true"
 ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/settings.aspx')"
 PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
 PermissionMode="Any" />
 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_SwitchToMobileView"
 Visible="false"
 Text="<%$Resources:wss,siteactions_switchtomobileview%>"
 Description="<%$Resources:wss,siteactions_switchtomobileviewdesc%>"
 MenuGroupId="300"
 Sequence="330"
 UseShortId="true"
 ClientOnClickScript="var mswlh = window.location.href; if (mswlh.indexOf('?')==-1) { window.location = mswlh + '?mobile=1'; } else { window.location = mswlh + '&mobile=1'; }" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
 </SharePoint:SiteActions> </span>

                            </div>
                      <nav class="left_navigation">
                      <SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-navigation" role="navigation" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
<a id="startNavigation" name="startNavigation" tabIndex="-1"></a>
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server" />
<div class="ms-core-sideNavBox-removeLeftMargin">
<SharePoint:SPNavigationManager
id="QuickLaunchNavigationManager"
runat="server"
QuickLaunchControlId="V4QuickLaunchMenu"
ContainedControl="QuickLaunch"
EnableViewState="false"
>
<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">





<Template_Controls>
<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" />
</Template_Controls>
</SharePoint:DelegateControl>
<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="3" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" SkipLinkText="" />
</SharePoint:SPNavigationManager>
<SharePoint:SPNavigationManager
id="TreeViewNavigationManagerV4"
runat="server"
ContainedControl="TreeView"
CssClass="ms-tv-box"
>
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/15/viewlsts.aspx" id="idNavLinkSiteHierarchyV4" Text="<%$Resources:wss,treeview_header%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"
CssClass="ms-tv-header" />
<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
<Template_Controls>
<SharePoint:SPHierarchyDataSourceControl
runat="server"
id="TreeViewDataSourceV4"
RootContextObject="Web"
IncludeDiscussionFolders="true"
/>
<SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);"
style="overflow: auto;">
<SharePoint:SPTreeView
id="WebTreeViewV4"
runat="server"
ShowLines="false"
DataSourceId="TreeViewDataSourceV4"
ExpandDepth="0"
SelectedNodeStyle-CssClass="ms-tv-selected"
NodeStyle-CssClass="ms-tv-item"
SkipLinkText=""
NodeIndent="12"
ExpandImageUrl="/_layouts/15/images/tvclosed.png?rev=23"
ExpandImageUrlRtl="/_layouts/15/images/tvclosedrtl.png?rev=23"
CollapseImageUrl="/_layouts/15/images/tvopen.png?rev=23"
CollapseImageUrlRtl="/_layouts/15/images/tvopenrtl.png?rev=23"
NoExpandImageUrl="/_layouts/15/images/tvblank.gif?rev=23"
>
</SharePoint:SPTreeView>
</SharePoint:SPRememberScroll>
</Template_Controls>
</SharePoint:DelegateControl>
</SharePoint:SPNavigationManager>
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">
<div class="ms-core-listMenu-verticalBox">
<SharePoint:ClusteredSPLinkButton
runat="server"
id="idNavLinkViewAll"
PermissionsString="ViewFormPages"
NavigateUrl="~site/_layouts/15/viewlsts.aspx"
Text="<%$Resources:wss,AllSiteContentMore%>"
accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"
CssClass="ms-core-listMenu-item ms-core-listMenu-heading" />
</div>
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
  </SharePoint:AjaxDelta>
</nav>
</div>
                       
 <div class="col-2 left">
                <div data-name="ContentPlaceHolderMain">
                 
                 
                    <SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                        <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
<div class="DefaultContentBlock MasterBlock">
         
     
                            </div>
                        </asp:ContentPlaceHolder>
                    </SharePoint:AjaxDelta>
                 
               </div>
               </div>
  </div>
             
               </div>
             
            </div>
        </div>
    <SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server">
    <asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">
<SharePoint:formdigest runat="server" /></asp:ContentPlaceHolder></SharePoint:AjaxDelta>
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" BlockElement="true" runat="server">
    <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
 
   </asp:ContentPlaceHolder>
    </SharePoint:AjaxDelta>
  </SharePoint:SharePointForm>
    <SharePoint:AjaxDelta id="DeltaPlaceHolderUtilityContent" runat="server">
 
    <asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server" /></SharePoint:AjaxDelta>

    <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" Visible="False" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" Visible="False" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" Visible="False" runat="server" />
    <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" Visible="False" runat="server" />

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" Visible="False" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderSiteName" Visible="False" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageImage" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderMiniConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderNavSpacer" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="WSSDesignConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="SPNavigation" Visible="False" runat="server" />

</body>
</SharePoint:SPHtmlTag>

App an app in Site Content Design Manager Bug – SharePoint 2013

The Site Contents > Add an app page will not allow you to add apps or lists to your site. This issue also impact the out of the box Oslo master page. Here is what you should see when you go to the Add an App page:

With this bug you end up never seeing the Apps you can add section. Sometimes you will see the “Working on it…” message and other times you will just see the Noteworthy apps.
The key to fixing this problem is to make sure your master page includes: DeltaPlaceHolderLeftNavBar, PlaceHolderLeftNavBar, DeltaPlaceHolderPageTitleInTitleArea, and PlaceHolderPageTitleInTitleArea and that each of them is not set to Visible=False. To do this in an HTML master page with Design Manager you would add the following

<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" runat="server">-->

<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">-->

<!--SPM:</asp:ContentPlaceHolder>-->

<!--SPM:</SharePoint:AjaxDelta>-->

<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->

<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->

<!--SPM:</asp:ContentPlaceHolder>-->

<!--SPM:</SharePoint:AjaxDelta>--> 


With these lines in place, the Apps you can add should show up again. Note, if you aren’t making a Design Manager HTML master page you will still want to ensure these controls (without the DM comments) are included somewhere in your master page and not marked as Visible=False.

Deploying Branding Solutions for SharePoint 2010 Sites using Sandboxed Solutions

SharePoint 2010 Sites using Sandboxed Solutions:

http://msdn.microsoft.com/en-us/library/gg447066(v=office.14).aspx

http://www.ilikesharepoint.de/2013/03/sharepoint-2010-deploy-set-custom-masterpage-per-feature/