Sunday, November 25, 2012

SharePoint 2013 Photoshop Layered file!

Thanksgiving just past and I was in the mood for giving! I just finished my SharePoint 2013 Layered Photoshop file. I have created these and shared them in the past for 2007 and 2010.

For this version I added in a couple of different templates and even some alternative background images for you to mess around with. All text, images, icons, logos, are editable and in their own layer. All fonts are to exact size per the OOTB RTM version of 2013.


Use this file as your starting point for all your new 2013 branding projects. Provide feedback by replying to this post!

Template Layers:

  • Team Site
  • Community
  • Publishing Portal

Download PSD File

Wednesday, November 21, 2012

SharePoint 2013 Snippet Gallery Default Items

When I attended the SharePoint conference 2012 a group of dream team SharePoint designers all came together over lunch to chat about design and the new design features within SharePoint 2013. One of the topics of conversation was around the Snippet Gallery and if there was a list of all the standard OOTB snippets. No one knew of any such list so I figured I would take a stab at it. See below the two galleries one for Master Pages and the other for Page Layouts.

Master Page Snippets:
Page Layout Snippets:

Master Page Snippet Gallery: ~53 Snippets


Top Navigation: The navigation snippets provide common navigation links and menu items on a site page.

Vertical Navigation: The navigation snippets provide common navigation links and menu items on a site page.

Search Box: Place the search box component on your page to allow users to search your site.

Site Title: Using the site title snippet rather than hardcoding the title gives non-designers simple control over the site's brand, which users with administrative permissions can change in Site Settings.

Site Logo: Using the site logo snippet rather than hardcoding the title gives non-designers simple control over the site's brand, which users with administrative permissions can change in Site Settings.

Sign In: Only authenticated users can see the ribbon. To give anonymous users a way to log into your site, insert the sign in snippet, which authenticated users won't see.

Edit Mode Panel:
To display content, including snippets, to contributing site authors only, place it inside an Edit Mode Panel.

  • Show Only in Edit Mode
  • Show Only in Regular Mode

Security Trim: To display content only to those users who have a specified level of security permissions, you can use a Security Trim Control. Specify one or more permission levels in the Behavior section of this control's properties. You can set it to many common permission levels, including the option to show content to no one but contributing site authors or site administrators. Then, insert the component on your page and place any content - including other SharePoint components - inside of it.

  • Show to Authors
  • Show to Authenticated Users
  • Show to Administrators

Device Channel Panel: A Device Channel Panel displays the content defined within it to one or more specified Device Channels. Device Channel Panels are typically used on Page Layouts to selectively hide certain regions and functionality from or show them to specified channels, and define channel-specific CSS.

Web Parts
Media and Content
Media Web Part: Use to embed media clips (video and audio) in a web page.
Content Editor: Allows authors to enter rich text content.
Get started: This web part displays a set of tiles with common SharePoint actions.
Image Viewer: Displays a specified image.
Page Viewer: Displays another Web page on this Web page. The other Web page is presented in an IFrame.
Picture Library: Use to display a slideshow of images and photos from a picture library.
Script Editor: Allows authors to insert HTML snippets or scripts.
Silverlight Web Part: A web part to display a Silverlight application.

Dynamic Content
Content Query:
Displays a dynamic view of content from your site.
Summary Links: Allows authors to create links that can be grouped and styled.
Table of Contents: Displays the navigation hierarchy of your site.
Timeline: Use this timeline to show a high level view of data from another webpart or tasks list.
Relevant Document: Displays documents that are relevant to the current user.
XML Viewer: Displays documents that are relevant to the current user.
Content Search: Content Search Web Part will allow you to show items that are results of a search query you specify.
Term Property: Displays the specified property of a Term.

Other Web Parts 

  • Blog
    • Blog Notifications
    • Blog Tools
    • Blog Archives
  • Document Sets
    • Document Set Properties
    • Document Set Contents
  • Forms
    • HTML Form Web Part
  • Social Collaboration
    • Site Users
    • User Tasks
  • Search-Driven Content
    • Catalog-Item Reuse
    • Pages
    • Items Matching a Tag
    • Web Pages
    • Pictures
    • Popular Items
    • Recently Changed Items
    • Recommended Items
    • Videos
    • Wiki Pages
  • Search
    • Taxonomy Refinement Panel
    • Refinement
    • Search Results
    • Search Box
    • Search Navigation
  • Forms
    • InfoPath Form Web Part

Custom ASP.NET Markup
Custom ASP.NET Markup:
In the background, we convert your HTML Master Pages and Page Layouts to ASP.NET files. If you have any ASP.NET elements you'd like to include that aren't available in the Snippet Gallery, paste the markup for those elements into the text box below, click the Update button, and paste the resulting HTML Snippet into your page.

Page Layout Snippet Gallery: ~72 Snippets


Page Fields

Content Fields 1:

  • Page Image
  • Page Content
  • Summary Links
  • Summary Links 2

Content Fields 2:

  • Content Type
  • Name
  • Title
  • Document Modified
  • Document Created
  • Comments
  • Scheduling Start Date
  • Scheduling End Date
  • Contact
  • Contact E-Mail
  • Contact Name
  • Contact Picture
  • Page Layout
  • Rollup Image
  • Target Audiences
  • Hide physical URLs from search
  • Browser Title
  • Meta Description
  • Meta Keywords
  • Hide from Internet Search Engines

Web Part Zone:
For site content authors to be able to add, edit, and delete Web Parts on a SharePoint page, add Web Part zones to the Page Layout.

All Other Containers, Web Parts, and Custom ASP.NET Markup are the same for both Master Page and Page Layout.

Looking at this list and what is provided via SharePoint designer or visual studio it is hard to determine if anything was left out. If anything it is easier to add and find the elements that you want to add to your master page or page layout.

I hope this helps!

Tuesday, November 20, 2012

SharePoint 2013 Base Fonts and Sizes

After reviewing the main CSS files that make up the base look and feel for the SharePoint 2013 look and feel. The number one font is “Segoe UI” which is applied to the global BODY element.

One thing to note that for having over 13,660 lines of CSS within the corev15.css to only have 46 font-family references and 30 of them being the primary ones that shows the consistency and reduction in the amount of CSS used for this new version of SharePoint.

font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

corev15.css: Primary CSS file referenced

  1. font-family:"Segoe UI"; (Used – 19 times)
  2. font-family:"Segoe UI Semilight" (Used – 7 times)
  3. font-family:"Segoe UI Light" (Used – 3 times)
  4. font-family:"Segoe" (Used as secondary – 11 times)
  5. font-family:Tahoma (Used as secondary – 6 times)
  6. font-family:Helvetica (Used as third – 21 times)
  7. font-family:Arial (Used as fourth – 27 times)

The base font size that is used on the body is 13px. This is important because almost all other font sizes used are now “EM” based versus “PT”. The EM font size basically uses that 13px as its base “1.0” and anything above 1 is bigger than 13px and anything below 1 such as .8 is smaller.

In pervious versions of SharePoint such as 2010 it was primarily PT based which is not best practics in web based sites. Below are the most common font sizes used. To learn more about EM, PX and PT visit this site:

corev15.css: ~88 font-size references (45 EM, 16PX, and 10 PT)

  1. font-size:1em;(Used – 12 times)
  2. font-size:.85em; (Used – 8 times)
  3. font-size:8pt; (Used – 7 times)
  4. font-size:1.46em; (Used – 6 times)
  5. font-size:1.3em; (Used – 3 times)
  6. font-size:.9em; (Used – 3 times)

Thursday, November 8, 2012

25 FREE Copies of my Book @ SP Conference

978143024026625 FREE copies of my book will be given out Tuesday Nov. 13th 1pm at EMC Booth #629.

I will be there to Sign the books and provide a Q&A session after. Come on by to say hello!

Add this event to your MySPC calendar!