Jan 15, 2013

How to Create HTML Page Layouts for SharePoint 2013

Just like in SharePoint 2010, you can create custom PageLayouts in SharePoint Designer or Visual Studio as .aspx files, either from the scratch or by copying an existing PageLayout and modifying the copy. These files can be included either in a branding solution or a design package. But in SharePoint 2013 also PageLayouts can be created as HTML files and converted to PageLayouts in Design Manager.

To To create an HTML PageLayout, follow these steps: 
  1. Create a starter PageLayout in Design Manager
    To get started with your custom HTML PageLayout, you need to create a starter PageLayout in Design Manager and edit the HTML file created in the process. Note that this also creates the .aspx file, do not edit that file!

    So, navigate to Design Manager (Gear-menu > Design Manager) and click on Edit Page Layouts. Click on Create a PageLayout. Type a name for your PageLayout and select the default MasterPage and Content Type for the PageLayout.

  2. Open the HTML file for editing
    Navigate to the MasterPage Gallery (Site Settings > Galleries > Master Pages and Page Layouts) in SharePoint Designer 2013 and open the created .html PageLayout file for editing or download a copy of the file and edit & upload back to gallery after editing or create a mapped folder of the gallery and open the file for editing in your application of choice.
  3. Replace the default page layout structure with your own
    To create your own layout structure for the PageLayout, clear all the content inside the
    <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
    ...
    <!--ME:</asp:ContentPlaceHolder>-->

    tag, and insert your own HTML code there instead:

  4. CSS styles?
    If you are using your own custom MasterPage that already points to a custom CSS stylesheet, you can add the CSS styles for the PageLayout in that same stylesheet. The browser reads the stylesheet when it loads the MasterPage.

    If you want to create the PageLayout styles independent of any MasterPage, or you don't have one, you can insert styles or a link to a separate stylesheet in the PageLayout's ContentPlaceHolder AdditionalPageHead:

    <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->        <link href="SCpagelayoutstyles.css" type="text/css" rel="stylesheet" ms-design-css-conversion="no"/><!--CE:hide left navigation--><!--MS:<style type="text/css">-->
            <!--#sideNavBox{ display:none;} #contentBox {     margin-left: 20px!important;}-->
    <!--MS:</style>-->

    Note the additional attribute in the link-tag, and how the inline styles need to be placed inside some comments similar to other elements on the page; otherwise the styles get ignored when the PageLayout is converted to the .aspx file used as the actual PageLayout

  5. Add SharePoint controls as snippets to your PageLayout
    In Design Manager, click the PageLayout file link to open it in preview. Click the Snippets-link in the upper right corner o the page, to open the snippet gallery page.



    On the snippet gallery page, select the controls (one by one) you want to add on your PageLayout, customize the properties if needed and copy and paste the code snippet on your page.





    To insert multiple similar controls or fields on the PageLayout, e.g. multiple Web Part Zones, use the Reset button in between to genereate new IDs for each control/field.



    Save your work and refresh the preview to check out the changes.
  6. Publish and start using your PageLayout
    When you are happy with the outcome, close the HTML file and Snippet gallery, and navigate to the MasterPage Gallery. Publish the HTML PageLayout file by using the dropdown menu of the file. You might also want to add a friendly title for the PafeLayout by editing its properties; do this before you publish the PageLayout.

    Then navigate to a page where you want to use the PageLayout and select Edit Page in the Gear menu. Select your PageLayout in the PageLayouts dropdown  on the Ribbon Page tab.



10 comments:

kuhkjhkh said...

Hello,

I'm trying to insert the Web Part Zone snippet into my page layout HTML. Every other thing that I have read tells me to replace it where class="DefaultContentBlock" is. I can't find this coding within the page layout. Where would I would put this snippet for it to successfully show up on my preview?

SM said...

Hi,

Inside the code block there is by default a whole lot of content. To add your own web part zone snippet, you can clear out all of the content inside of the tag and create your own html page structure.

Pebbles said...
This comment has been removed by a blog administrator.
Jorris Besselink said...

Hi, I've got the whole thing working up to the point where I can see the "default webpart" I have added within the web part zone snippet (added as a snippet also replacing the DC comment) when I view the page layout. It's the default content search webpart. But then when I add new pages that use the pagelayout, the default webpart is not included in the new page, instead the web part zone is empty. Do we need to jump through a few more hoops in order to provision new pages using the page layout (doing that old-skool via feature) with the default web part that we add to the html version with snippets within the web part zone snippet? If so, could you post an example on how this would work?

SM said...

Hi @Jorris,
Adding web parts to pages succesfully in 2013 has proven to be a rather difficult issue. I have tried it in design package and in traditional VS full trust solution, doing it in several different ways, none of which are fully succesful. So unfortunately I do not have an answer to this problem; the only working solution I have seen for 2013 was a rather complex solution of web template and tweaking the default.aspx and running it all under some amount of custom code.

Jorris Besselink said...

Ok, thanks for your response, it seems it wasn't just me, but "SharePoint" once again (feel the frustration?)
One thing I cannot wrap my head around then is the purpose of the html snippets for web parts. The ones you get from the Design Manager that then tell you to paste the snippet in the html.
Could you clarify how we should use these if they cannot be succesfully placed within the html of the page layout?

SM said...

I admit that after trying these HTML-thingys a couple times and running in to problem after problem, I have pretty much given up on them; I never seem to be able to do all that is needed with them (e.g. I have not figured out how to make the logo snippet actually show your own logo as the default logo etc.). So now I either do it the full trust way, or simply make my own master pages and page layouts as .master and .aspx pages and skip the HTML... seems to work with design packaging as well.

Ernie Jones said...

Can you supply these instructions for SharePoint Foundation 2013 also? It's not easy finding solutions with SPF.

SM said...

@Ernie, SPF does not support publishing features, so this particular topic does not apply to SPF at all.

Leslie Lim said...

I read, enjoy and learn from your blog. Thanks! Keep on posting.

Bunch
www.imarksweb.org