SharePoint Branding & Design

Small Calendar for SharePoint 2010 & 2013

noreply@blogger.com (Erik Swenson) — Fri, 12 Apr 2013 19:51:00 +0000

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;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-acal-ctrlitem,
.ms-acal-month-weeksel,
.ms-acal-title{display: none;}
.ms-acal-summary-itemrow TD DIV{height: 15px !important;}

2013 Content Editor Web Part CSS:
<style>
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-acal-ctrlitem,
.ms-acal-month-weeksel,
.ms-acal-title,
.ms-acal-month-top span{display: none;}
.ms-acal-summary-itemrow TD DIV{height: 15px !important;}
</style>

Thanks & Enjoy!

SharePoint 2013 Display Templates Overview

noreply@blogger.com (Erik Swenson) — Fri, 11 Jan 2013 20:12:00 +0000

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.

Enjoy!

SharePoint 2013 Drag and Drop Navigation

noreply@blogger.com (Erik Swenson) — Fri, 11 Jan 2013 16:19:00 +0000

I came across a new feature in SharePoint 2013 that has not been really advertised much. This is around the site navigation management and the new feature that allows you to drag and drop links directly into the left side or top navigation.

I put together this quick video to showcase how it works.

SharePoint 2013 Photoshop Layered file!

noreply@blogger.com (Erik Swenson) — Sun, 25 Nov 2012 05:31:00 +0000

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

SharePoint 2013 Snippet Gallery Default Items

noreply@blogger.com (Erik Swenson) — Wed, 21 Nov 2012 05:03:00 +0000

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

Navigation
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.

Administration
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.

Containers
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

Containers
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!

SharePoint 2013 Base Fonts and Sizes

noreply@blogger.com (Erik Swenson) — Wed, 21 Nov 2012 02:46:00 +0000

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.

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

corev15.css: Primary CSS file referenced

font-family:"Segoe UI"; (Used – 19 times)
font-family:"Segoe UI Semilight" (Used – 7 times)
font-family:"Segoe UI Light" (Used – 3 times)
font-family:"Segoe" (Used as secondary – 11 times)
font-family:Tahoma (Used as secondary – 6 times)
font-family:Helvetica (Used as third – 21 times)
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)

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

25 FREE Copies of my Book @ SP Conference

noreply@blogger.com (Erik Swenson) — Thu, 08 Nov 2012 15:03:00 +0000

25 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!

Session 7: SP 2013 Managed Metadata Navigation

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 05:05:00 +0000

In this session I will be going over how to configure your navigation to point to a managed metadata term service.

Session 6: SharePoint 2013 Composed Looks

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 05:03:00 +0000

In this session I will be going over how to change your site using composed looks (Themes) and also creating your own composed look.

Session 5: SharePoint 2013 HTML Page Layout

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 05:00:00 +0000

In this session I will walk you through creating a new HTML Page Layout and adding snippets.

Session 4: SharePoint 2013 HTML Master Page

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 04:59:00 +0000

In this session I will describe the process of taking an existing HTML file and converting it into a HTML Master Page within SharePoint 2013. The HTML file used is based on the Twitter Bootstrap responsive design.

Session 3: SharePoint 2013 Device Channels

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 04:56:00 +0000

In this session I will be reviewing what device channels are and how to use them.

Session 2: SharePoint 2013 Design Manager

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 04:54:00 +0000

In this second session I will be giving a brief overview of the 8 steps within the new SharePoint 2013 Designer Manager.

Session 1: SharePoint 2013 UI Overview

noreply@blogger.com (Erik Swenson) — Tue, 23 Oct 2012 04:51:00 +0000

This is the first of a 7 part video blog series. Thank you for your patience.

In this session I will be going over the SharePoint 2013 UI Overview and some of the design changes that have been made for the new version of SharePoint 2013.

SPSNH Intro to SharePoint 2013 Branding Deck

noreply@blogger.com (Erik Swenson) — Tue, 25 Sep 2012 17:59:00 +0000

Thanks for all the attended my session on Saturday 9/22/2012. The demo gods were with me and all things worked out. Per your request I have uploaded my presentation deck here:
Erik Swenson SharePoint Saturday NH SharePoint 2013 Branding

Because most of my presentation was in demo mode and it was not recorded, I am going to switch up my blog a little bit and start adding in some short recorded sessions.

I have a 7 part series that I plan on having available shortly, which includes written and video how to’s.

Session 1 – SharePoint 2013 UI Overview
Session 2 – 2013 Design manager Overview
Session 3 – Working with Device Channels
Session 4 – Convert HTML to Master Page
Session 5 – Creating page Layouts and using Snippets
Session 6 – 2013 Composed Looks
Session 7 – 2013 Managed Metadata Navigation

If you have any suggested topics that you would like me to cover please reply to this post.

Thanks!

Speaking @ SharePoint Saturday NH 9/22/2012

noreply@blogger.com (Erik Swenson) — Thu, 06 Sep 2012 12:42:00 +0000

I will be presenting a session on “Intro to SharePoint 2013 banding and design”.

Here are some of the topics that I will hopefully be able to cram into the 1 hour session. I could easily spend well over 1 hour on each one of these topics…

SharePoint 2013 UI Overview
Design Manager
Snippet Gallery
Composed Looks (Themes)
Device Channels
SharePoint Designer 2013
Managed Metadata Global Navigation

SharePoint Saturday NH Logistics:
Where: Southern New Hampshire University (SNHU), Manchester, NH
When: September 22th, 2012, Saturday
Time: Registration 8-8:30am EST
Cost: FREE!
Website: http://www.sharepointsaturday.org/nh/default.aspx
Twitter: @ErikJSwenson | #SPSNH

I will be giving away a couple of my books out as prizes! Hope to see you there and do a little meet and greet after the session!

10+ Years of SharePoint Branding Progress

noreply@blogger.com (Erik Swenson) — Thu, 19 Jul 2012 13:36:00 +0000

Since SharePoint was first introduced in 2001its standard visual design appearance has taken on quite a few different forms over the years. The base core features of document management and collaboration have stayed pretty static but the introduction of publishing and social features has transformed the product into a Swiss Army knife and can be used for many different things.

Here is a look at its progress from 2001 all the way through 2013.

Microsoft SharePoint Portal Server 2001

Core Features: Base included document management, search and what was called then a dashboard site to display webparts.
Visual Design: This was before my time but from the looks of it the design came with a standard header that you could customize the logo or title of the site.

Microsoft SharePoint Team Services 2002

Core Features: Ability to create lists and HTML pages.
Visual Design: The design got a slight change to the header and also added in page level icons. It is also the first introduction of the left side navigation “Quick Launch”.

Microsoft Office SharePoint Portal Server 2003

Features Added: In 2003 the Microsoft team added the ability to create “Topic” sites. These sites were a bit more complex than the webpart pages and were the first step towards the now publishing sites. The Search was also updated in this version.
Visual Design: The design got a major overhaul and it included many new design elements and a lot more CSS. Almost every page had a icon based on the type of site it was, however the search control was one of the hardest things to figure out how to customize correctly. They also figured out how to flip text vertically on the left side navigation…

Microsoft Office SharePoint Server 2007

Features Added: In 2007 they did another major overhaul with the ability to have publishing, master pages, and page layouts.
Visual Design: The design included a shaded background that framed in the content area. This allowed site owners to choose themes that drastically changed the look and feel of the sites. With the inclusion of the master pages designers no longer needed to modify the core CSS files on the server to customize the look of their sites.

Microsoft SharePoint Server 2010

Features Added: There were not too many core features added between 2007 and 2010 other than the introduction to the SharePoint Ribbon and an enhanced profile and social features like the newsfeed.
Visual Design: As with the previous version the design for SharePoint 2010 got a complete overhaul for its master page. It got converted to a mostly all table less design. The design was simplified and some effort was put into site performance by including sprite images and less heavy background images.

Microsoft SharePoint Server 2013 Preview

Features Added: The new features for 2013 focused on social connections, mobility, project management, communities, search, and apps.
Visual Design: The new metro inspired design is very simplistic and uses font weight and color to guide the users on the page. All colors are flat and the iconography is very simplistic and monotone. The introduction of the “Design Manager” will allow designers that don’t have any master page or page layout experience to customize the look of the sites by just using standard HTML and CSS.

SharePoint has definitely had an interesting design history and I think is going in the right direction. Yes the design is drastic but its just a shell for us to add our own flair. The design trend for what I have seen is hedging on the “Minimalistic” approach. Take for example Facebook, its easy on the eyes and people at first were mad because they could not customize the look of it, but now people don’t care about that. They just want to know what Mary Sue did on her last vacation or want to share with everyone that they going to see the next batman movie…

Overall I am very excited for our next branding adventure with SharePoint 2013 and will be sure to share my experiences, tips, tricks, Etc. with you all!

Fix Long Quick Launch Flowing Over Footer

noreply@blogger.com (Erik Swenson) — Fri, 15 Jun 2012 18:24:00 +0000

In some cases when you need to add a footer to a custom brand you will notice that on pages that have really tall left navigations (Quick Launch) and a small content area the left side navigation will overflow and display on top of your custom footer.

The reason for this is that your left side navigation is floating to the left of the content area. And therefore it is no longer being considered for height and will ignore your footer. By default your content area will push your custom footer down as it grows larger.

Here is an example where the left navigation is really long and floats on top of the custom footer:

To fix this you will need to set the footer div to have a inline-block property and also set the width to 100%. Your custom footer will be included right below that DIV. See below example.

<div id="s4-bodyContainer">
    <div id="s4-mainarea">
        <div id="s4-leftpanel"></div>
        <div class="s4-ca”></div>
    </div>
    <div class="custom-footer"></div>
</div>

Here is some sample CSS that you can use to fix this:

Before:
.custom-footer{
    padding: 20px 0px 20px 0px;
    background-color: #21374c;
    color: #FFF;
    text-align: center;
    width: 100%;
}

After:
.custom-footer{
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    padding: 20px 0px 20px 0px;
    background-color: #21374c;
    color: #FFF;
    text-align: center;
}

The top margin is just used to give some extra space between the footer and the left navigation.

This is how the page should look now.

For Center fixed width designs you would have something like this:

body #s4-workspace{
    background-color: #000;
}
body #s4-bodyContainer{
    width: 900px !important;
    margin: auto !important;
    background-color: #FFF;
}
.custom-footer{
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    padding: 20px 0px 20px 0px;
    background-color: #21374c;
    color: #FFF;
    text-align: center;
}

And the result would look like this:

Enjoy!

How To: Add Audience Field Control to SharePoint 2010 Publishing Page Layout

noreply@blogger.com (Erik Swenson) — Wed, 28 Mar 2012 20:08:00 +0000

I just recently needed to add in the default audience field control to a publishing page layout. So that when you edit the page you can easily specify the target audience for the page without having to go to “Edit Properties” in the ribbon. The only issue is that it is not as simple as you would think. In my previous post I provided detail on how to Hide SP 2010 Page Layout Metadata – WebControls however the “Audience” field control requires some additional references to the Microsoft.Office.Server.UserProfiles field types.

I found this blog here: Showing the Audience Target field in an EditModePanel #SharePoint #SP2010 #in #ProjectServer #PS2010 that really helped with solving my problem.

So basically to add in the audience field control to the page in edit mode you would simply have to do the following within your custom page layout.

Add in the following to the reference section near the top of your page layout.
<%@ Register TagPrefix="OfficeWebControls" Namespace="Microsoft.Office.Server.WebControls.FieldTypes" Assembly="Microsoft.Office.Server.UserProfiles, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
Then add in the following code within the edit mode panel control.
<OfficeWebControls:SPFieldTargetToControl ID="Audience" runat="server" FieldName="Audience" />

If you do not already have a hidden menu control on the page you can simply add the following:

<PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
<OfficeWebControls:SPFieldTargetToControl ID="Audience" runat="server" FieldName="Audience" />
</PublishingWebControls:editmodepanel>

Thanks Giles Hamson for your post!

How To: Add Time/Date to Layouts or Master Page

noreply@blogger.com (Erik Swenson) — Mon, 26 Mar 2012 15:28:00 +0000

If you ever needed to add in the local time and a date for the logged in user to your custom page layout or master page below are some ways that you can achieve this.

Option #1
The first method uses a SharePoint Portal Web Control to display the logged in users current time. This control is normally used on the profile pages to show current time for the profile that you are viewing. One benefit that you get from this approach is that if you have users that view the site from multiple locations around the world they would see the current time based on the time zone that they have set in their my site Profiles.

To add this web control to your master page do the following:

Add in the following registration to the top of the master page:
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
Add in the the following code right below the welcome control “IdWelcome” DIV in your master page.
<div class="currenttime">
<SPSWC:ProfilePropertyLoader runat="server"/>
<SPSWC:LocalTimeControl runat="server" />
</div>
Then add in some quick styles to your custom style sheet so that the time is set to white.
.currenttime{
    color: #FFF;
    text-align: right;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
}

Your site should look something like this:

Notice the time below the users name. Now if the logged in user changes the time zone in their profile it will automatically update the time on all the pages that use this master page.

I am not aware of any web control that displays the date/month/year. If you know of one please reply to this post.

Option #2
The second option is that you could use JavaScript within your page layouts or in your master page to display the current time and date of for the logged in user. The time zone is based on the settings from the computer that is accessing the site.

To add this JavaScript to your page layout do the following:

Add in the following code anywhere within your page layout:
<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="company-homepagetime" valign="top">
            <script type="text/javascript">
                function getClockTime()
                {
                    var now    = new Date();
                    var hour   = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
                    var ap = "<span class='company-homepagetime-ampm'>AM</span>";
                    if (hour   > 11) { ap = "<span class='company-homepagetime-ampm'>PM</span>";}
                    if (hour   > 12) { hour = hour - 12;      }
                    if (hour   == 0) { hour = 12;             }
                    if (minute < 10) { minute = "0" + minute; }
                    if (second < 10) { second = "0" + second; }
                    var timeString = hour +
                        ':' +
                        minute +
                        " " +
                        ap;
                    return timeString;
                } // function getClockTime()
                    var clockTime = getClockTime();
                    document.write(clockTime);
            </script>
        </td>
    </tr>
    <tr>
        <td class="company-homepagedate" valign="top">
            <script type="text/javascript">
                var months=new Array(13);
                months[1]="January";
                months[2]="Febuary";
                months[3]="March";
                months[4]="April";
                months[5]="May";
                months[6]="June";
                months[7]="July";
                months[8]="August";
                months[9]="September";
                months[10]="October";
                months[11]="November";
                months[12]="December";
                var day=new Date();
                var lmonth=months[day.getMonth() + 1];
                var date=day.getDate();
                var year = day.getFullYear();
                document.write(lmonth + " " + date + ", " + year);
            </script>
        </td>
    </tr>
</table>
Then Add in the following CSS to give it a little style
.company-homepagetime{
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 30px;
    text-align: left;
    padding: 10px 0px 0px 15px;
}
.company-homepagetime-ampm{
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 20px;
    text-align: left;
}
.company-homepagedate{
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: left;
    text-transform:uppercase;
    padding: 0px 0px 0px 17px;
}

The result should look similar to the following:

You could add in a content placeholder in your master page above the left navigation, or in another location so that the time can be displayed anywhere you want.

I think the second option that is using JavaScript is a lot more flexible and allows you to customize the display and format of the time and date. For example if you wanted to truncate the months to three characters all you would have to do is simply type in what it should display in the code.
Example:(Change “February” to “Feb” or “November” to “Nov”).

Post a comment if you found this useful or have any other type of solution that worked for you.

Thanks for listening,

Erik Swenson (Author)
My Book: Practical SharePoint 2010 Branding and Customization

Summary View Bug: SharePoint 2010 Publishing

noreply@blogger.com (Erik Swenson) — Mon, 13 Feb 2012 22:34:00 +0000

Have you ever struggled with the summary view for Links, Announcements, Events, Documents, Discussions or any other major type of SharePoint 2010 list or library on publishing pages? Well if so I hope this post will help with the identification/resolution of this bug. Hopefully Microsoft will supply a fix for this someday...

Here is a common scenario:

You create a SharePoint Publishing Site or you create a blank site and then enable the publishing feature.
From that publishing site you create a simple links list. You add in a few links and want to then display it on your publishing page.
You edit the publishing page and then click on a webpart zone and add the newly created links list on the page.
From here instead of configuring the webpart to display in summary view you simply keep the current view and check the page in.
You then edit/check out the page again and decide to modify the links list to show in “Summary View” to get it to display like a bulleted list of links.
You edit the page and then modify the shared links list webpart. In the tool pane you change the view to “Summary View”.

You click on Apply or Ok and it seems to look correct, however as soon as you check the page in or publish the page the view that you set on the webpart is back to the default.
At this point you are frustrated and have no idea what when wrong. You spend about 2 hours banging your head against the wall… Finally you resort to removing the webpart, add it back in, change the view to summary and then publish the page hoping that it will be fixed.
And then to your surprise it worked and your link lists displays as normal… Now you are completely confused and just happy that it is working…
Sound familiar?

The key part of this bug is that the webpart was not set to summary view before it was checked in/published. If the page was just saved and not checked in there would not be an issue. It has something to do with the versioning of pages and the publishing feature with pages. This is not an issue with sites that do not have publishing pages where you simply save and close the page (Blank/team sites).

To quickly fix a webpart that will not go into summary view you will have to remove the webpart from the page and then add it back in. Once it is back on the page change it to summary view, it will then take the updates. This happens for all lists and library summary views. It is very confusing as a user that is building a page in stages that if they save the page and check it in for later editing the views are cached or saved in that state and cannot be changed.

The summary views are actually really helpful as they transform a basic looking list view into something that is more graphical and usable.

Links (Default View):

Links (Summary View):

Announcements (Default View):

Announcements (Summary View):

Hopefully this will be addressed in some future hotfix so that we do not have to remove our webparts from publishing pages to get them to display differently.

Write a comment if you found this to be useful or found yourself in this same situation.

Hide SP 2010 Page Layout Metadata - WebControls

noreply@blogger.com (Erik Swenson) — Tue, 31 Jan 2012 18:42:00 +0000

In this post I will walk you through the process of adding in “Hidden” metadata to your page layouts so that they are only visible when editing the page. For example if you want to create a news article with categories, start date, end date, keywords, and other metadata that might not be relevant to the consumer then instead of forcing your content authors to create content in the edit mode and then force them to update metadata by editing the page properties why not have them all on the page. This allows for a single page authoring experience.

This post also provides the specific field names for the most common SharePoint 2010 base columns and web controls. (Really good stuff)

Microsoft.SharePoint.WebControls Namespace
Standard columns that are used for most metadata column types.
URL: http://msdn.microsoft.com/en-us/library/ms413880.aspx
Example:
<SharePointWebControls:RichTextField FieldName="MultipleLines" runat="server" />

Microsoft.SharePoint.Publishing.WebControls Namespace
Enhanced publishing controls that are used for rich media, rich content, and links.
URL: http://msdn.microsoft.com/en-us/library/ms551164.aspx
Example:
<PublishingWebControls:SummaryLinkFieldControl FieldName="SummaryLinks" runat="server" />

Microsoft.SharePoint.Portal.WebControls Namespace
These controls will need a reference added to the top of your page layouts and can include the ratings and note board functionality.
URL: http://msdn.microsoft.com/en-us/library/ms519088.aspx
Example:
<SharePointPortalControls:AverageRatingFieldControl FieldName="AverageRating" runat="server" />

Step 1: Creating the hidden container for your metadata
In this first task you will be creating a hidden container for the metadata that will be applied to your publishing page.

Create a new page layout and open it up in SharePoint Designer.
Add in the following control within a <TD> near the bottom of your page:

<PublishingWebControls:editmodepanel runat="server" id="editmodepanel1"></PublishingWebControls:editmodepanel>

Basically anything that gets added within this control will only display in edit mode.
Then to add some visual style to this control so that your authors feel comfortable that this content is not visible add in the following HTML within the control above:

<table cellpadding="0" cellspacing="0" width="100%" class="company-hiddeninfo">
<tr>
<td class="company-hiddeninfo-label">Hidden SharePointWebControls:
</td>
</tr>
</table>

Then Add in the following CSS your custom style sheet or at the top of your page layout within the AdditionalPageHead placeholder.

The page should look similar to the following:

Step 2: Creating Additional columns within pages library
In this step you will be adding in some basic columns to the pages library. You could get more fancy by creating your own custom content type and make your custom site columns available within the whole site collection. However in this example to keep it simple we are simply just adding in regular columns to a single pages library.

Navigate to the pages library where you are going to be storing your pages.

(Requires site collection Publishing infrastructure and site publishing feature to be turned on within the site.)

Within the ribbon click on the “Library” tab and then click on “Create Column”
A dialog window will appear. Simple type in a column name (I would suggest not using spaces) Example: “StartDate”
Then Choose the appropriate column type.
Do this for as many columns as you need.

Step 3: Adding Newly Created Columns to Page Layout
In this step we will be editing the page layout to add those custom columns to the hidden section within your custom page layout.

Open up the page layout in SharePoint Designer 2010.
For non-required fields type in the following:

For required fields type in the following:

Then to add in your custom fields this is where it will get a little tricky.
For all common SharePoint.WebControls they will be using the following format:
Red is the Class name Example: TextField
Blue is the Field Name Example: SingleLine

<SharePointWebControls:Class FieldName="Name" runat="server" />

To find the Field Name simply navigate to the library settings of your pages library.
Within the section called “Columns” right click on the column title that you want and choose “Properties”
Within the Adderess URL find the part where it shows “Field=” right after that will be your field name.
Each field type needs to have the correct class or the page will error out.
Below is a table that you can use to figure out what class to be used with each field/column type.

Field/Column Type	<SharePointWebControls:
Single Line Of Text	TextField
Multiple Lines Of Text	RichTextField
Choice - Drop-Down Menu	DropDownChoiceField
Choice - Radio Buttons	RadioButtonChoiceField
Choice - Checkboxes	CheckBoxChoiceField
Number	NumberField
Currency	CurrencyField
Date and Time -	datetimefield
Lookup	LookupField
Yes/No	BooleanField
Person or Group	UserField
Hyperlink or Picture	UrlField
Calculated	CalculatedField

So now that you have the field name and the class type you can then add them within the required or not required TD’s within the hidden page layout element.
In the example code below there are two custom columns being displayed. The first is the single line of text column that is not required. The second is the multiple lines of text column that is required. Notice the red visual indicator shown on the left added by the custom CSS.

Step 4: Adding your own labels and description text
Some web forms are confusing and we want our content authors to provide the best data possible. This is why we need to clearly label and guide our users on what type of information to provide and in what format. To do this we can easily add in our own labels to the control tabs and also provide instructional text for each control.

If you want to change the labels on the form elements you can simply add in the InputFieldLabel="" Which will the allow you to change the title to what ever you want. See Red Text below:
You can also add in descriptive text below the control so that you can provide instructional text for your content authors. See blue text below

<tr>
<td class="company-hiddeninfo-notrequired">
<SharePointWebControls:TextField FieldName="SingleLine" InputFieldLabel="Single Line Of text" runat="server" />
<div style="padding: 0px 0px 10px 10px;">
This short description will be limited to <b>255</b> characters
</div>
</td>
</tr>

Step 5: Adding in Publishing Web Controls
Some of the basic publishing web controls for Welcome and Article page layout content types includes the Page Content, Page Image, and a Summary Links. Since these columns are already created you can easily just add them to your page by doing the following:

For all common SharePoint.WebControls they will be using the following format:

Note that the start of the control begins with “Publishing” and not “SharePoint”.

Red is the Class name Example: TextField
Blue is the Field Name Example: SingleLine

<PublishingWebControls:Class FieldName="Name" runat="server" />

As with the others each field type needs to have the correct class or the page will error out.
Below is a table that you can use to figure out what class to be used with each publishing field/column type.

FieldName=””	<PublishingWebControls:
PublishingPageContent	RichHtmlField
PublishingPageImage	RichImageField
PublishingRollupImage	RichImageField
SummaryLinks	SummaryLinkFieldControl

So now you can add in the following to display the page image and summary links.

Note: For some reason I was not able to place the publishing page content control into the hidden area.

<tr>
<td class="company-hiddeninfo-label">Hidden PublishingWebControls:
</td>
</tr>
<tr>
<td class="company-hiddeninfo-notrequired">
<PublishingWebControls:RichImageField FieldName="PublishingPageImage" runat="server" />
</td>
</tr>
<tr>
<td class="company-hiddeninfo-notrequired">
<PublishingWebControls:SummaryLinkFieldControl FieldName="SummaryLinks" runat="server" />
</td>
</tr>

Step 6: Adding Ratings and Note Board to your Page Layout
One quick way to add some social fun to your pages is to include the ratings and note board feature to your custom page layout.

Fist you will need to turn on the ratings feature within the pages library. Navigate to the pages library settings and click on “Ratings Settings”. Then choose “Yes” to allow items in this list to be rated.
Next add in the following control registration at the top of your custom page layout to allow for SharePoint Portal Controls.

<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Then within SharePoint Designer instead of adding the controls into the hidden area add them right above it.

Step 7: Download a sample layout to get started!
I have created a sample page layout that includes all of the base controls. Make sure that you remove the SharePoint Web Controls that are in the hidden element or your page will error out.
Download it here: HiddenProperties.zip

Screenshot in Display Mode:

Screenshot in Edit Mode:

Thanks! Add a comment if you found this helpful!
Erik Swenson

SharePoint 2010 Chrome Type CSS Classes

noreply@blogger.com (Erik Swenson) — Fri, 13 Jan 2012 16:27:00 +0000

For content authors the ability to stylize web parts with just a few simple clicks is a big win. In some cases you might want to emphasize a web part on the page and make it stand out. There are basically 4 main web part styles/chrome that you can apply to any webpart.

You will notice below that the chrome type “None” and “Title Only” do not have a unique class name so they will share the same style. The “None” style simply does not show the web part title.

Chrome (None):
.ms-WPBody{
font-size:8pt;
font-family:verdana,arial,helvetica,sans-serif;
}

Chrome (Title Only):
.ms-WPBody{
font-size:8pt;
font-family:verdana,arial,helvetica,sans-serif;
}

Chrome (Title and Border):
.ms-WPBorder, .ms-WPBorderBorderOnly{
border-color:#9ac6ff;
border-width:1px;
border-style:solid;
}

Chrome (Border Only):
.ms-WPBorder, .ms-WPBorderBorderOnly{
border-color:#9ac6ff;
border-width:1px;
border-style:solid;
}

Since Title and Border and Border Only have their own unique classes you can apply custom styles properties and make them unique.

The next step is to learn how to apply these types of chrome types. First simply edit the page, click on the web part title arrow, and choose “Edit Web Part”.

Second, a panel will appear on the right side, click on the plus icon next to “Appearance”. From here you will be able to change the web part title and the chrome type.

Once you have chosen the Chrome Type simply click on the “OK” button and then save'/publish the page.

This is where the real fun begins. Now that you know how to apply the Chrome Type and you also have the class name for each one, you can easily create some really interesting styles for you web parts.

Example 1: (Title only/None with changes to the font)
.ms-WPBody{
font-size:14px;
font-family: Arial, sans-serif;
line-height: 20px;
letter-spacing: -.2px;
}

Example 2: (Title and Border with additional padding for text also includes custom border style and update web part title)
.ms-WPTitle{
font-weight:bold;
font-family: Arial, sans-serif;
font-size:16px;
color: #C00;
}
.ms-WPBorder{
border: 3px #C00 dashed;
background-color: #EEE;
}
.ms-WPBorder .ms-WPBody{
padding: 10px;
font-size:12px;
color: #000;
line-height: normal;
letter-spacing: 0px;
}

Example 3: (Border only with custom border color and background image)
.ms-WPBorderBorderOnly{
border: 2px #7ea0dd solid;
background-image:url("/_layouts/images/MYSITEBG.GIF");
background-position:top left;
background-repeat:repeat-x;
}
.ms-WPBorderBorderOnly .ms-WPBody{
padding: 10px;
font-size:14px;
font-weight:bold;
color: #000;
line-height: normal;
letter-spacing: 0px;
}

My SP 2010 Branding Book is Finally Published!

noreply@blogger.com (Erik Swenson) — Fri, 23 Dec 2011 13:38:00 +0000

After 6 months of hard work my SharePoint 2010 Branding Book: Practical SharePoint 2010 Branding and Customization
is finally available for order from Amazon!!! If you are quick and order now, you can get it under your tree by tomorrow!

This book is a great deal as it comes with 2 pre-built visual designs, a visual studio solution for applying the designs, and of course a great resource book to help you on your branding journey.

The two Visual designs included in the SharePoint Branding Kit:

Many thanks to Chris Arella, Matt Lally, Robert Dornbush, and the team at Apress. This would not be at all possible without the support from my family and friends!

Happy Holidays!

SharePoint 2010 Branding Support File Statistics

noreply@blogger.com (Erik Swenson) — Mon, 14 Nov 2011 18:52:00 +0000

Have you ever wondered what are the major font types, sizes, colors, and images for SharePoint 2010? This post will cover some of the major statistics that are related to SharePoint Branding.

This post originally spawned the topic of why SharePoint uses PT’s for font sizes when PX or EM’s are much better. Kyle Schaeffer created a very nice post about why you should use one format over the other: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.

Over 75% of all font sizes declared in the standard SharePoint 2010 base style sheets use a font-size in Points.
Example: font-size:8pt;

Below are some other interesting statistics when it comes to other SharePoint 2010 support file statistics.

Server Side Files: Not surprisingly there are a lot of images that are used to make SharePoint look the way that it does. The number would be slightly larger if the sprite images were broken out. There a ton of CSS files and what surprised me most is the amount of unique master pages. There are three main master pages for SharePoint 2010 (v4.master, minimal.master, mwsdefaultv4.master). The main three CSS files are (COREV4.CSS, controls.css, search.css).

Server Side Files:	Number
Images	2,950
CSS Files	98
Master Pages	30
Publishing Page Layouts	16

Template Details: The standard templates that come with SharePoint are majority collaboration/content based templates and meeting workspaces.

Template Details:	Number
Site Templates	26
List Templates	14
Library Templates	8

Font Family: It is interesting to see that majority of all fonts in SharePoint 2010 are Verdana and Tahoma. There is really no elements that use Arial at all.

Font-Family Corev4.css:	Number
verdana	41
tahoma	16
Segoe UI	8
sans-serif	1
Other	12

Font Size Types: This to me was very surprising. There are 68 instances of “PT” used just within the corev4.css file.

Size Type Corev4.css:	Number
PX	969
PT	68
EM	72
%	63

Font Sizes: Majority of all of the font sizes used are 8pt. The second largest is the 1em which is equal to the 8pt specified as the base font size on the body within the corev4.css file.
body{
font-size:8pt;
}

Font-Size Corev4.css:	Number
8pt	47
1em	20
1.3em	7
1.1em	6
10pt	5
11pt	4
1px	4
1.4em	4
16pt	1
inherit	1
Other	30

Base Colors: This was hard to track real good numbers as there was no good way of finding all of the top used colors. What you get out of the bottom table is that all of the main base colors are either dark or light blue. The main hyperlink color is the “#0072BC” color.

Colors Corev4.css:	Number
transparent	85
#FFF (White)	83
#0072BC (Light Blue)	41
#000000 (Black)	34
#FFFFFF (White)	28
#003759 (Dark Blue)	24
#91cdf2 (Light Blue)	12
#83b0ec (Light Blue)	11
#3b4f65 (Dark Blue)	10
#005372 (Dark Blue)	10
#4c4c4c (Dark Gray)	10
#666666 (Dark Gray)	9
#23272c (Dark Dark Blue)	8
#6f9dd9 (Light Blue)	8
#44AFF6 (Light Blue)	7
#5d6878 (Blue Gray)	6
#003399 (Blue)	6

Display: Majority of all of the elements that are displayed are inline-block or block. It is interesting that over 20 elements are using the display:none element. This might be because of things that use JavaScript to add in inline CSS to make the what was hidden element visible. Such as drop down menus or other dynamic elements.

Display Corev4.css:	Number
inline-block	56
block	46
none	21
inline	13
table	1

Float: The stats on floating elements give you the impression on how many elements are floating and could have potential display issues with your custom branding.

Float Corev4.css:	Number
left	39
right	18
none	6

Position: There are more absolute positioned elements than relative.

Position Corev4.css:	Number
absolute	22
relative	19
fixed	2
static	1

Image Types: As noted below, GIF files still lead the pack in file types but PNG files are making a strong upswing due to better browser support, transparencies, color values, and file size. I am pretty surprised to still see BMP files in the list.

Image Details:	Number
GIF	2,026
PNG	883
JPG	24
ICO	11
BMP	4

Image Sizes: I am happy to see that majority of all of the images used in SharePoint are below 10KB. There is one that is 26qkb but has many icons included in it (formatmap32x32.png).

Image Size Details:	Number
0-10 KB	2,852
10-100 KB	96
250 KB +	2

Overall SharePoint 2010 has come a long way of updating the CSS, Images, and files to get them to the 21 century. However there are still a lot of changes that I would like to see in SharePoint 2015.