Skip to main content

SharePoint 2013 Display Templates Overview

SharePoint 2013 Display templates are one of the many new features in SharePoint 2013 Publishing site Design Manager.

In the following video blog I walk you through creating a mocked up wireframe that includes a image rotator, document, blog post, and task query. I created a custom Page layout and also walked through the process of customizing and creating your own display template. This is all possible with the use of the new Content Search Web Part.



Erik said…
What an excellent video! Thanks for posting this. I look forward to using the content search web part in the near future.
kashkumar said…
This is an awesome video. Thanks for that..I also have another question which is not relating to this video. What is the best way to do SharePoint 2013 Foundation branding?? If you could please share your experience that would be great. Thanks, will wait for your reply.
I am William..I just browsing through some blogs and came across yours! Excellent blog, good to see someone actually uses for quality posts.Your site kept me on for a few minutes unlike the rest :) Keep up the good work!Thanks for sharing a important information on
dillonmarsh said…
its not more complicated but wildcard people are usually serch few thing about Sharepoint 2013,one thing is that new functionality is not fully working page is in edit mode duw to some extra encoding of the query string in edit mode.
pmatthews05 said…
Hi Erik, I've watched your video, and near the end when you goto in SharePoint designer 'All Files > _catalogs > masterpage > Display Templates> Content Web Parts' the video displays .js files and .html files. However whenever I look in any of the Display Template folders I only see .js files. This is the same if I navigate to the Master Page Gallery within SharePoint site itself. It's as if I have a filter on, but it's pretty much a new on-prem instance of SharePoint 2013. Do you have any ideas why this is? I've checked both farms I've created and the same happened in both. Both site are using HNSC paths (don't know if that's makes a difference, but I doubt it).
pmatthews05 said…
I've worked out that if I use publishing site, or turn the publishing feature on, the HTML files are created. Can you confirm that the Display Templates are for publishing sites only?
Erik Swenson said…
Hey Paul, You are correct I should have stated that more clearly. But the display templates and the Design Manager is only available if you create a Publishing Portal site collection or if you enable the publishing infrastructure on the site collection. Thanks for following my posts and reviewing the videos. I should have more soon.

Erik S.
Unknown said…
Do you know how to work around the 50 item limit?
Erik, thanks for your videos, it always helps me to see and hear when learning a new subject. Your videos are much appreciated!

I have a question, I've put together a web part page with a Content search slideshow on top, then three content search WPs below it showing some two line displays. Mine doesn't look nearly as smooth as yours though. I have a large gap between the rows. Did you use custom CSS in your page layout?
You r the Best Eric..... Thank you
I saw your video, it was really useful.I am using 2016 version.I couldn't find the page layout tab,I have only the text layout.could you tell me where can i find it?

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
body #s4-leftpanel
display: none;
margin-left: 0px;
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}