Change “SharePoint” Text in Top Left to Company Logo

By now you have noticed the “SharePoint” text in the top left corner on SharePoint 2013. What if you would like to replace this with your own text, or better yet a clickable image of your company logo? Once again PowerShell is here to help you. Note that this is a Web Application level change and will affect all sites within the Web Application.

Here is our starting point

Steps to change

Open the SharePoint 2013 Management Shell and let’s look at the default setting:

1 2	$webApp = Get-SPWebApplication http://intranet.orion.com $webApp.SuiteBarBrandingElementHtml

You can see that it’s simply taking in HTML to render the text. So, here is the HTML that I’ll use to display our company logo linked to the root Site Collection:

1 2 3

$webApp = Get-SPWebApplication http://intranet.orion.com $webApp.SuiteBarBrandingElementHtml = '<div class="ms-core-brandingText"><a href="http://intranet.orion.com"><img src="http://intranet.orion.com/SiteAssets/logo_contoso.png"/></a></div>' $webApp.Update()

The result

Pretty simple, eh?

Here is the default setting should you need to revert back:

1 2 3

$webApp = Get-SPWebApplication http://intranet.orion.com $webApp.SuiteBarBrandingElementHtml = '<div class="ms-core-brandingText">SharePoint</div>' $webApp.Update()

Remove SharePoint 2013 MaterPage in Dialog Box

Apply the following css to your master page css.

html.ms-dialog div.s4-workspace{display:none;}
html.ms-dialog div.a{display:none;}
html.ms-dialog div.b{display:none;}
html.ms-dialog div.search{display:none;}

create a custom Page Layout in share point 2013

With the new Designer Manager in SharePoint 2013 it is now much easier to create a custom Page Layout. In this blog article I ‘m providing a step by step pictorial guidance on how to create a simple custom Page Layout.

My prerequisites: I have created a site collection based on the template ‘Publishing Portal’ and installed SharePoint Designer 2013.

What I need is a simple Page Layout with two columns with different widths. These columns should be created as Web Part Zones to enable editors to place Web Parts on the page.

First I open the site settings and start the new Design Manager:

Because I want to create a custom Page Layout I click on ‘Edit Page Layouts’ …

… and create a new Page Layout (based on a predefined master page and the ‘Article Page’ content type):

It should take just a few seconds until SharePoint has created the new Page Layout.

OK - now let’s switch over to SharePoint Designer 2013. To find the newly created Page Layout I click on ‘All Files’ in the left navigation. Now I open the folder _catalogs and click on master page. I have marked the files of the newly created Page Layout with a red rectangle.

The newly created Page Layout consists of two files. Don’t touch the aspx-file! To create a custom Page Layout you only need to edit the html-file. SharePoint will create and update the aspx-file based on the changes in the associated html-file.

Let’s open the html-file to see what SharePoint has created. I check out the html-file and open it in Advanced Mode:

Now this is what you should see:

For this demo I have chosen the Article Page as the template for my new Page Layout - but I don’t want to keep most of the controls. So I scroll down to the area of the html-file where the page controls are defined.

The page controls are surrounded by <div> tags - so they should be pretty easy to find. Now I locate this line of code:

<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->

and delete everything beginning from (but excluding) the line above until (excluding) this line:

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

In other words: I delete every line of code between these two (ContentPlaceHolder) lines (but I keep these lines).

With this deletion I have removed almost every page control and the newly created custom Page Layout file should look like this (I marked the deleted area with an empty red box):

Let’s see how this empty Page Layout looks like in SharePoint 2013. I save and check-in the html-file in SharePoint Designer 2013 and switch back to SharePoint 2013. Have look on the fifth screenshot again - here I click on the name of my newly created Page Layout and SharePoint 2013 opens this page:

Looks like a pretty empty page! To better check the changes in my custom Page Layout I create another page that uses my newly created custom Page Layout.

This is what the newly created page based on my custom Page Layout now looks like:

This page is empty in edit mode too, because I just removed all page controls. Now it’s time to add two Web Part zones..

I switch back to SharePoint Designer 2013 and open the html-file in Advanced Mode again. In the gap where I deleted the page controls before I now add a simple html table like this:

Just a simple table with one row and two columns (in other words: two parallel table cells). The first column should have a width of 80% and the second one should have a width of 20%. Both columns should be top-aligned.

The next step is: I need to add two Web Part Zones: one in each table’s column. I save the changes in SharePoint Designer 2013 and switch back to SharePoint’s Design Manager.

I open this page …

… and click on Snippets:

Now the Snippets Designer is shown and I click on Web Part Zone:

The Snippets Designer creates the HTML code for a new Web Part Zone and I can copy the HTML code snippet to the clipboard. You can customize some of the parameters of the Web Part Zone (or any other snippet) before copying the snippet to the clipboard. To edit parameters click on the greyed parameter names on the right.

Now I jump back to SharePoint Designer, open the html-file again and paste the snippet to the first table column. After that I switch back to the Snippets Designer and create another (a new - that’s important) Web Part Zone snippet with a new ID (!) and copy the snippet’s code to the second table column.

My html-file looks like this now:

Did you notice the doubled Page Title in the 10th screenshot? Doesn’t look very nice - that’s why  I remove the placeholder with the ID PlaceHolderPageTitleInTitleArea. I don’t want the page title here - for my demo the name of the aspx-file is sufficient. I save the changes in SharePoint Designer 2013 and check-in the html-file again.

Let’s see how the newly created Page Layout looks like now. I switch back to SharePoint 2013 and open the site with the newly created Demo Page … and hit F5 to refresh the page:

There are now two Web Part Zones with a different width and both are top-aligned! Just to prove that this Page Layout is working as expected I add some Web Parts to the two zones and publish the page:

That’s how I wanted the custom Page Layout to look like. If you want to create a more detailed Page Layout just have a look at the snippets. There are several useful snippets you can use in your own custom Page Layout by simply getting the HTML code of the snippet and pasting it to the custom Page Layout.

Compared to former version of SharePoint creating custom Page Layouts has been simplified very much. The new Design Manager in SharePoint 2013  (together with the Snippets) makes it easier to create custom Page Layouts. Use this blog article as a short introduction and feel free to experiment with Page Content Types, snippets and custom Page Layouts on your own.

sharepoint 2013 html branding master page add an app not working

Ran into an interesting little bug this past week with SharePoint 2013 Design Manager master pages. After having a friend recreate the issue on her VM, I contacted the Microsoft product team and confirmed this is an issue they hope to solve with a future update. Essentially, if you create a master page with the Design Manager, whether a minimal master or one that has been converted from HTML and CSS, 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 snippets:

<!--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.