0

I worked on SharePoint 2010 in the past and little bit of branding. In 2010 I learned to edit home.aspx and add webparts and change layouts but never used custom page layouts before.

Now in 2013 which brought some new concepts of designing and my requirement is to develop a custompage layout in which I would create a table with two rows and add webpart zones and inside webpart zones I want to add content query webpart and paste the html i want.

I dont want to this using EDIT page and add instead i want to do it through designer and then create a homepage based on the custompage layout.

I just dont know how to do it or whats the best way to do it. Any guidance or tutorial will be helpful.

2 Answers 2

1

The best way that I know of to do this is by going into the Design Manager, making a copy of seattle.master (or oslo.master if you prefer), opening up your copy for preview, and then using the Snippets thing to add the SharePoint parts you want. 2013 is kind of made to allow you to design master page in a standard HTML page editor... but IME it is really not. What Microsoft has done instead of allowing you to directly edit the .aspx is to require you to edit HTML and then, if you ever do want to add or change around the .aspx portions of the page, to either cut and paste the existing code which is already in the HTML file (and which is locked away behind comment tags) or utilize the snippets in Design Manager.

I prefer to start with the look and feel of seattle.master and then make changes from there. All of the Placeholder sections, the navbar, and so on, still exist in the HTML version of the file, they're just, as noted, locked away behind comments. That has the added issue that Designer will no longer provide you with contextual help when, for instance, editing the side navbar to make it vertical rather than horizontal (Which can still be done in 2013). You can always add your own javascript and css sheets. You do have to locate them in the right places. Here's a site that will help get you started:

http://www.cardinalsolutions.com/cardinal/blog/portals/2013/04/ways_to_brand_sharep.html

The good news is that once you get the CSS and Javascript links in the right place, the existing stylesheets will generally not touch the HTML you put down on your page. So if you add a header and a footer and stick the ContentPlaceHolderMain item in between them, it should behave normally (although you'll probably need to go into the developer tools, figure out what CSS tag that placeholder is attached to, and then adjust where on the page it shows up so that it doesn't conflict with your own CSS... that's not really any different from prior branding issues though).

So once you've created your masterpage, you can then pretty easily (at least compared to creating the masterpage) make custom page layouts via the same Design Manager / Preview / Snippets / SPDesigner for editing combination. Here's a quick guide on where to find each piece:

http://sharepointontop.blogspot.com/2013/03/create-page-layout-in-sharepoint-2013.html

That doesn't really tell you how to do what you're doing except that a. just like previous versions, all you're doing is adding content to the PlaceHolderMain component and others as you see fit, b. you don't have the benefit of the split screen in SPDesigner anymore, and c. you just have to use the Snippets to add web part zones to your page rather than inputting the ASP code directly.

I'm not going to say that it's easier, and I certainly don't think it's easier than the way 2010 or 2007 had you edit masterpages and layouts, but I guess there's a certain logic to it (if you have no experience whatsoever with SharePoint or ASP, it's now at least semi-possible to create masterpages and page layouts where it wasn't really before).

-1

In SharePoint designer, go to "All Files" -> "_catalogs" -> "masterpage", all of the source files for your page layouts live in that folder. You should be able to open and modify the HTML, CSS, Javascript directly. Copy and paste a file, then just play with it.

I highly recommend starting from this template (Responsive SharePoint project from Eric Overfield and team).

https://responsivesharepoint.codeplex.com/releases/view/112845

It comes with lots of great examples. You are given a starting publishing .aspx master page, multiple page layouts (with lots of example layouts which are pretty simple to modify), and a team.aspx master page.

I dont like any of the new design manager, and recommend avoiding that all together. You can upload the files, apply the master page and update all from sharepoint designer.

Main benefit is your site will become instantly "Responsive", meaning it will resize depending on if you are on a desktop, tablet, or phone, and move your content accordingly.

A good operational knowledge of HTML, Javascript, and CSS is recommended.

4
  • No, you can't actually directly edit the masterpages in 2013 anymore. You can edit the attached HTML files but that's what you need the snippets et al for. Mar 3, 2014 at 0:14
  • Guys thank you for all the comments. I have gone through how to develop masterpage, design mananger and all and I also know like Craven said play with HTML only and this is what i am doing i do not touch aspx. What my question is how to modify the layout of HOME.aspx using SPDesigner or the other way round? I have a working masterpage with header and footer...my requirement is to come up with a contentpage (home.aspx) in which i want webpart zone and in that zone i want CQWP (Content query webpart) where i can place my code..do i need to create custompagelayout, add new page based on custom?
    – user24080
    Mar 3, 2014 at 3:17
  • @JohnCraven, not true, you cant DIRECTLY edit the out of the box master page because it is intrinsically linked between the aspx and the html file, but that is not to say that you cannot use your own. Look up Randy Drisgill's starter master pages, and "directly edit" to your hearts content. Or the link I provided with the bootstrap framework, you start with your own master page and page layouts. Mar 4, 2014 at 13:59
  • Just to correct myself here, you can in fact directly edit the masterpage files; you need to unhook the HTML files from them first and this is not supported but it is nevertheless possible to do. Jun 17, 2014 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.