SharePoint branding tricks and tips


I’ve just been looking into this for a tabbed web part zone and recreated some script found online here to work with SharePoint 2013 ​​​​​​. I’ve modified it to take the image from the web part header as well so it renders it in the tab.

​(function ($) {

$.fn.wpTabify = function () {
 if($(‘.ms-WPAddButton’).size() == 0){
      return this.each(function(i){
        var tabList = $(‘<ul class=”wpt-ui-tabs-nav”/>’);
        var panels = $(‘<div class=”wpt-ui-tabs-wrapper”/>’);
       $(this).find(‘div[id^="MSOZoneCell_"]‘).each(function(j){
 $(tabList).append(‘<li>’ + ‘<img src=”‘ + $(this).find(‘h2.ms-webpart-titleText img’).attr(‘src’) + ‘”/>’ + ‘<a href=”#ui-tab-panel’ + i + j + ‘”>’ + $(this).find(‘h2.ms-webpart-titleText’).text() + ‘</a></li>’);
          var thisPanel = $(‘<div id=”ui-tab-panel’ + i + j + ‘” class=”wpt-ui-tabs-panel”/>’);
           var panelContents = $(this).detach();
          $(thisPanel).append($(panelContents).find(‘.ms-WPBody’).html());
    $(panels).append(thisPanel);
});
if($(tabList).find(‘li’).size() > 0){
          $(this).prepend(panels);
          $(this).prepend(tabList);
          $(this).tabs();}
});
}
else {
return false;
}
};
})(jQuery);​​

Use this to call the function

<script type=”text/javascript”>
$(document).ready(function(){
  $(“div.my-web-part-tabs”).wpTabify();
});
</script>​

It uses jQuery UI to render. so use the bellow links.

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css” />​

Recently I’ve used the Meanmenu script on a project to render a mobile menu. This was in SP 2007 and worked great with a little editing of the script for SharePoint as it is originally developed to work with a UL element. SharePoint 2007’s navigation is formed with tables.

Now this all worked on all mobiles including IPhones. Since the IOS 8 update and the release of the new IPhone 6 and 6+ the menu didn’t render on IOS 8 devices. After updating to IOS 8 on my IPad as well I found the same issue.

With a lot of investigation and help from the telerik app developer software I got to the root of the problem. The issue was for some unexplained reason IOS 8 was rendering the navigation with span tags nested in a div. I had to create a separate script that would render this markup to a mobile menu. Problem solved.


I had an issue with this when I started up my SharePoint 2013 VM. I couldn’t start the MSSqlserver due to a log on error.

I found these steps that seemed to fix the issue.

Steps are:

  • Right click on the Service in the Services mmc
  • Click Properties
  • Click on the Log On tab
  • The password fields will appear to have entries in them…
  • Blank out both Password fields
  • Click “OK”

If that doesn’t work try adding the account and password again.


I’ve seen a number of blogs about adding script to the page to render promoted links without pagination and while some work others don’t. Some of the ones that do work now either seem not to work due to an update from Microsoft or don’t work with more than one promoted links web part on the page.

if you’re finding the same issues there is an extremely easy fix, Custom CSS. Add this snippet bellow to a script editor on the page and it’ll fix all your issues.

<style type=”text/css”>.cell-margin {
margin: 10px;
}.ms-promlink-body {
position: relative;
width: 100%;
height: inherit;
float: left;
left: 0px;
}.ms-promlink-header{display:none;}

</style>


First thing to note with editing the master page on SP 2013 is that it isn’t the master file you’ll be editing it’s the html element of the master page. Creating your own from scratch is simple to do if you know HTML and CSS. Just create your html as you would a web site and then upload it, Design manager gives you the code snippets to add the many SharePoint controls and then all you’ll need is to publish it.

 

One issue you’ll probably find and which is a know issue is the editing of the oslo.html file will break the add an app and change the look pages. Luckily there is a fix for this which is reasonably simple just by setting these place holders to visible=”true” it’ll work again, that’s if they are set to false in the first place which you probably find is the case. Place holders that need changing are DeltaPlaceHolderLeftNavBar, PlaceHolderLeftNavBar, DeltaPlaceHolderPageTitleInTitleArea, and PlaceHolderPageTitleInTitleArea.


On a recent project I was asked to add a custom column to the people search results and thought I’d share the steps. The column name was for the Telephone Extension, change this in the code bellow with your column name.

  1. In central admin go to Application Management > Manage service Applications
  2. Select User Profile Default SA and click the Manage User Properties
  3. Select New Property and fill in the details as bellow

Untitled-1

  1. Once this has been done Run a full crawl.
  2. Navigate to the Search site on the site collection
  3. Edit the page and edit the “People Search Core Results” web part
  4. Open the “display properties” menu and uncheck the “Use Location Visualization” checkbox
  5. Click the “XSL Editor” button
  6. Search for the line  <xsl:variable name=”haswph”       select=”string-length(workphone) &gt; 0″/> and add this line of xsl after it on the line bellow <xsl:variable name=”haste”       select=”string-length(telephoneextension) &gt; 0″/>
  7. Then search for this few lines of code

<xsl:if test=”$haswph”>
<li id=”PhoneField”>
<xsl:apply-templates select=”hithighlightedproperties/workphone” />
</li>
</xsl:if>

And add the following below it


<xsl:if test=”$haste”>
<li id=”TelephoneExtension”>
<xsl:choose>
<xsl:when test=”hithighlightedproperties/telephoneextension”>
<xsl:call-template name=”HitHighlighting”>
<xsl:with-param name=”hh” select=”hithighlightedproperties/telephoneextension” />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select=”telephoneextension” />
</xsl:otherwise>
</xsl:choose></li>
</xsl:if>

  1. Save and then edit the properties window above the xsl editor option . select all and add this code over it removing the present code with the code listed bellow

<Columns>         <Column Name=”WorkId”/>      <Column Name=”UserProfile_GUID”/>                <Column Name=”AccountName”/>           <Column Name=”PreferredName”  HitHighLight=”true”/>            <Column Name=”YomiDisplayName” HitHighLight=”true”/>           <Column Name=”JobTitle” HitHighLight=”true”/>                 <Column Name=”Department” HitHighLight=”true”/>   <Column Name=”WorkPhone”  HitHighLight=”true”/>    <Column Name=”TelephoneExtension”  HitHighLight=”true”/> <Column Name=”OfficeNumber” HitHighLight=”true”/> <Column Name=”PictureURL”/>               <Column Name=”HierarchyUrl”/>               <Column Name=”WorkEmail”  HitHighLight=”true”/>       <Column Name=”Path”/>                 <Column Name=”HitHighlightedSummary”/>     <Column Name=”HitHighlightedProperties”/>   <Column Name=”Responsibility” HitHighLight=”true”/>    <Column Name=”Skills” HitHighLight=”true”/>   <Column Name=”SipAddress” HitHighLight=”true”/>         <Column Name=”Schools” HitHighLight=”true”/>             <Column Name=”PastProjects” HitHighLight=”true”/>      <Column Name=”Interests” HitHighLight=”true”/>          <Column Name=”OrgNames” HitHighLight=”true”/>          <Column Name=”OrgUrls”/>      <Column Name=”OrgParentNames” HitHighLight=”true”/>            <Column Name=”OrgParentUrls”/>        <Column Name=”Memberships” HitHighLight=”true”/>   <Column Name=”AboutMe” HitHighLight=”true”/>         <Column Name=”BaseOfficeLocation” HitHighLight=”true”/>         <Column Name=”ServiceApplicationID”/>           <Column Name=”SocialDistance”/> </Columns>

12.   Once this is done and the search crawl is finished save the page and search for a person making sure their profile has the Telephone Extension property filled in


Something that always has a big affect on the branding of SharePoint is the browser support.

Looking at the current support for browsers it’s not looking too bad with them removing IE7 now as well as IE6. The planed support is listed below

Browser Supported Supported with limitations Not supported
Internet Explorer 9
32-bit 64-bit
Internet Explorer 8
32-bit 64-bit
Internet Explorer 7
X
Internet Explorer 6
X
Google Chrome (latest public release version)
X
Mozilla Firefox (latest public release version)
X
Apple Safari (latest public release version)
X
Follow

Get every new post delivered to your Inbox.