SharePoint branding tricks and tips


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

SharePoint 2013 Blog app


Looking into SharePoint 2013 and I found this neat little app that connects you to your blog site using word.

Once you’ve created your blog site you’ll notice the usual Blog tools web part in the right hand corner of your page content, there’s a few new items in the list one of which is the Launch Blogging app.

Make sure you’ve got you’re site open in Internet Explorer and click on the link. This will open word and ask you to enter the information for your new SharePoint Blog account, enter the URL and click OK it’ll ask you to log in and then you’ll see your Word Blog post template. Entering content and then all you’ll need to do is publish and it’ll post your article onto your blog site. Easy as that.

If you’ve created more than one blog site you’ll have the option to switch between the two so you don’t need to log into the different sites to upload a post.


Content place holders in a master page can be useful things used for rendering controls on a page layout in a different area of the master page or to remove a control from a specific layout. Also it helps to get around not being able to add a web part or web part zone to a master page and then not being able to edit it in the browser ( even though it involves having to have custom page layouts if you want it to render).

The great thing is you’re not fixed with the Out of the box SharePoint place holders you can create as many as you want as long as the ID doesn’t conflict.

on the master page add the content place holder  <asp:ContentPlaceHolder id=“CustomName” runat=”server”></asp:ContentPlaceHolder> and add this to your page layout <asp:Content runat=”server” ContentPlaceHolderID=”CustomName”></asp:Content>. You’ll now be able to place a control or web part into the page layout and it will render in the master page, So now editing the page you’re using in the browser will allow you to edit the web part or alow you to add one if you’re using it as a web part zone.


One issue that come up when using custom master pages is this error when editing a Team site page and then trying to save the it.

Image

All that causes this is simply a Place holder missing from the Main area of your master page. Even if you’ve moved it to a asp:Panel and declared it as false at the bottom of your master page you’ll still get the error. All is needed is to move content place holder <asp:ContentPlaceHolder id=“PlaceHolderPageTitleInTitleArea” runat=”server”></asp:ContentPlaceHolder> within the s4-bodyContainer div , within the s4-ca div seems to work best. Save the master page and that’s that no more irritating message.

You’ll notice this adds the page title to your master page you will either need to style it, place it in the area you want to display this or hide it if you don’t want to display it


Recently had an issue when debugging code that the ULS viewer stopped showing results in the log. After a bit of digging I managed to find out that when the free space gets below 1GB it stops getting information from the logs.

So its an easy fix when you know what the issue is, free up more space.

Hope that helps someone.


Starter MasterPages from 3rd party sites are not a great starting point when beginning to brand your SharePoint site. You may be wondering why I don’t think they are, well read on.

Based on my experience of using other people’s starter MasterPages they always seem good from a high level but when you start to use them on a variety of sites you realise they are missing controls which reduces the overall functionality of SharePoint.

A good test to see if your starter MasterPage has one of the common controls missing is to activate the Meta Navigation and see if it appears. Another common fault can be found on my colleagues blog post http://sharepointbrandingteam.wordpress.com/2012/05/15/sharepoint-2010-ribbon-functionality-in-a-custom-site/

The best starter MasterPage is one that you create yourself, this way you know what controls you have to work with and if you remove any you know which ones they are if you need to add that functionality later. A good starting point for a team site is the v4.master and for a publishing site the nightandday.master.

 


I think a lot of people have been using “Starter” master pages from different sites and have a similar issue with the functionality of the ribbon.

Ribbon activated but header not hidden

You’ll notice on an Out of the box v4.master that when you click any of the ribbon buttons to show the ribbon the header and the top navigation disappear. Using the custom master pages this functionality is missing. WHY you ask, Simple there is a div with the id of s4-titlerow that the jquery looks for to hide when the ribbon is visible. With the custom master pages this is missing , removing the functionality. To get it to work just place the class around the header and navigation and you’ll have the functionality back.

Ribbon deactivated

Ribbon activated


Page Layout

Just a quick and basic explination on creating and editing page layouts in SharePoint 2010

Creating a page layout.
  • In your SharePoint site click Site actions > Site settings > master page and page layout (under the Galleries heading)
  • Click documents in the ribbon

Ribbon - document

  • Select the new document icon and then select page layout. Fill in the relevant details and press ok
  • Go to the Master Page galerie and you can assign it a content type by editing the properties
  • Once editied check it in and publish the file in the master page gallery as it won’t be visible in the page layout drop down when you go to select it
  • Make sure the page layout is added to the Page Layout and Site Template Settings page as this will allow you to change the page layout if it isn’t set to “Pages in this site can use any layout”
Changing the page layout
  • Once on the page you want to use your new layout
  • Site actions > Edit Page
  • Select the page tab in the ribbon
  • Click the page layout tag and select the page layout.
  • Click save and close and your new page layout will be displayed
  • Now you can open,edit and style it in SharePoint designer.
Adding web part zones to your page layout in SharePoint designer.
  • Open your page layout in SharePoint designer
  • If the code is highlighted in orange this prevents you from editing the code. To activate editing select the advanced mode in the ribbon.

Advanced mode

  •           Place the cursor on the area your intending to add the zone to( make sure the page is saved otherwise the option to add web zones will be grayed out.)

  •          Select the insert tab in the ribbon

Insert

  • Click the web part zone tab and this will add the zone to the page

Web zone toolbar

·         Click save and close and your new page layout will be displayed.

Follow

Get every new post delivered to your Inbox.