SharePoint 2013 Create a Custom Page Layout

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.

Read More

SharePoint 2013 Branding Step By Step

SharePoint 2013 includes several new features and capabilities to support branding aspects that includes better support for HTML5, Design Manager, Lots of Inbuilt design templates, Composed Looks, support for Responsive web design, HTML driven MasterPage.
This post is regarding step by step Sharepoint 2013 branding to have look and feel of internet facing site. This is also example of branding our SharePoint online live site.

Testing it out

I don’t have enough time to create my own HTML design so I went on the net and looked for something that would do. I downloaded this free theme: http://demo.templateworld.com/zero/download/dusky.zip
First I started by uploading the files in a folder called Dusky under https://niaulin-public.sharepoint.com/_catalogs/masterpage/ which is the url Design Manager gave me to upload my design files.
I recommend you map yourself a drive to that location because you will probably be going back and forth making adjustments and adding files.
Uploaded the files using the same structure provided in the .zip to make sure paths continued to work.

To get started make sure user logged in has proper rights atleast design rights in order to follow below steps.
​Step 1: To create a master page go and click Site Settings icon

Step 2: Select Site Settings

Step 3: In the Site Settings --> Look and Feel --> select Design Manager.

Step 4: In the Design Manager, -->Select Upload Design Files link.

Step 5: Now open the link shown below to add content, html files, css, scripts for your new Master Page.

Step 6: Add all the content required to create new master page such as html page, css styles, scripts. Click on Files in the ribbon and start uploading files in a newly created folder.

Step 7: Create a new folder for example SPEmpower.

Step 8: After creating the main folder, add contents like css, js,images ans html page inside this folder.

Step 9: Create folders for css, javascript and images and also add html page.

Step 10: Now to add document in this folder select Upload Document from File menu and a window will open, browse your document and then click on ok button.

Step 11: Now another window will open, click on Save button to add that document inside the folder.

Step 12: Same way you can add more css in this and to add Javascript and images do the same process, First create the folder and then add documents you want to add. After that add the html page. Here browse your html page and then click on Ok button.

Step 13: After clicking on Ok button a window will open click on save to add this html page to your folder.

Step 14: After adding all the content inside folder, below is organized look of all the files of our new master page

Step 15: Next, Go to Design Manager select Edit Master Pages and then select Convert an HTML file to a SharePoint master page to convert your html page into the master page.

Step 16: Select your Master Page folder.

Step 17: Select the html page and click on insert to convert the html page into master page.

Step 18: Now to see your converted page, Go to Design Manager then select Upload Design Files and open the below link

Step 19: Now select the folder SPEmpower.

Step 20: We can see the .html file as well as the converted .master file as well.

Step 21: After doing all this. It's time to publish the content of your project. We publish every files within the folder such as css, images, .html page. To publish go to Design Manager and then click on Publish and Apply Design and then select Go to the master page Gallery.

Step 22:Go to the project folder "SPEmpower".

Step 23: Go to File menu and then select any content from the bottom by clicking on check box and then publish button will be enabled, click on publish button to publish the file.

Step 24: When you click on publish a new window will open, If you want to add any comment with that add and then click on ok to publish that document.

Step 25: Your master page is published now. By default SharePoint site uses Seattle.master page, to apply your master page to your SharePoint site. Go to SIte Settings and then select Master Page from Look and Feel

 

Step 26: Select our own master page to apply that to our site.

Step 27: Select Site Master Page and from It's drop down list select your master page.

Step 28: Select your master page as a System Master Page if you want apply custom master in system pages like Site Settings page.

Step 29: Click on Ok to apply your master page to your site.

Step 30: After applying the master page your site will look like this.

Step 31: Here the main content of your site will come at the bottom of the page after footer. so you have to cut that main content placeholder from bottom and will have to add it in the proper place. you can do it by using SharePoint Designer.

Step 32: Now first open your Sharepoint Designer and open your site from that.

Step 33: Now from Navigation select Master Pages.

Step 34: Now After doing this select your folder named SPEmpower.

Step 35: Now select your html file Sharepointempower.html.

Step 36: Now from Customization select Edit File to add any content in that file. you will not require to open Sharepointempower.master page whatever you will add in the Sharepointempower.html page,It will automatically update .master page.

Step 37: Go through the code and will go to the bottom, you can see that after footer the MainContentPlaceHolder code is there. Just cut that selected div tag and paste it in the code where Main-Content section is given.

Step 38: Paste that code in the selected section area called Main-Content.

Step 39: Once It is done. Your Master page's MainContentPlaceHolder will be there in the center of the page.

Read More