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.

image

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:
image
Page Layout Snippets:
image

Master Page Snippet Gallery: ~53 Snippets

image

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

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

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

image

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!

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.

Example:
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!

Tuesday, October 23, 2012

Session 7: SP 2013 Managed Metadata Navigation

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

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

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

Session 4: SharePoint 2013 HTML Master Page

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

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

Session 2: SharePoint 2013 Design Manager

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

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.

Tuesday, September 25, 2012

SPSNH Intro to SharePoint 2013 Branding Deck

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

image

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.

  1. Session 1 – SharePoint 2013 UI Overview
  2. Session 2 – 2013 Design manager Overview
  3. Session 3 – Working with Device Channels
  4. Session 4 – Convert HTML to Master Page
  5. Session 5 – Creating page Layouts and using Snippets
  6. Session 6 – 2013 Composed Looks
  7. 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!

Thursday, September 6, 2012

Speaking @ SharePoint Saturday NH 9/22/2012

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!

speakerbadge_newhampshire

Thursday, July 19, 2012

10+ Years of SharePoint Branding Progress

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
sharepoint-2001-main
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
sts2002
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
sps2003
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
moss2007
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
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 
2013
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!

Friday, June 15, 2012

Fix Long Quick Launch Flowing Over Footer

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:

image

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.

image

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:

image

Enjoy!

Wednesday, March 28, 2012

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

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.

  1. 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" %>
  2. 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!

Monday, March 26, 2012

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

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:

  1. 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" %>
  2. 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>
  3. 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:
image

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

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.

image

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

  1. 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>
  2. 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:

image

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

Monday, February 13, 2012

Summary View Bug: SharePoint 2010 Publishing

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:

  1. You create a SharePoint Publishing Site or you create a blank site and then enable the publishing feature.
  2. 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.
  3. You edit the publishing page and then click on a webpart zone and add the newly created links list on the page.
  4. From here instead of configuring the webpart to display in summary view you simply keep the current view and check the page in.
  5. 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.
  6. You edit the page and then modify the shared links list webpart. In the tool pane you change the view to “Summary View”.

image

  1. 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.
  2. 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.
  3. 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…
  4. 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):
image

Links (Summary View):
image


Announcements (Default View):
image

Announcements (Summary View):
image

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.

Tuesday, January 31, 2012

Hide SP 2010 Page Layout Metadata - WebControls

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" />

image

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" />

image

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" />

image

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.

<style type="text/css">               
/***** Content Area - Hidden Metadata Panel Style *****/
.company-hiddeninfo{
    background-image: url(/_layouts/images/contentFooter.png);
    background-position: top left;
    background-repeat: repeat-x;
    border: 2px #4e648a dashed;
    border-top: 8px #4e648a solid;
    background-color: #EEE;
    padding: 10px;
    margin-bottom: 20px;
    width: 600px;
    margin: auto;
}
.company-hiddeninfo-label{
    font-family: Arial, sans-serif !important;
    font-size: 20px;
    color: #4e648a;
    font-weight: bold;
    padding: 5px 0px 10px 8px;
    text-align: left !important;
}
.company-hiddeninfo-notrequired,
.company-hiddeninfo-required{
    padding: 3px 0px 3px 0px;
}
.company-hiddeninfo-notrequired .ms-formfieldcontainer{
    border-left: 3px transparent solid;
}
.company-hiddeninfo-required .ms-formfieldcontainer{
    border-left: 3px #F00 solid;
}
.company-hiddeninfo .ms-formfieldvaluecontainer{
    background-color: #FFF;
}
</style>

  • The page should look similar to the following:

image

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:

<tr>
<td class="company-hiddeninfo-notrequired">
</td>
</tr>

  • For required fields type in the following:
<tr>
<td class="company-hiddeninfo-required">
</td>
</tr>
  • 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.

<tr>
<td class="company-hiddeninfo-notrequired">
<SharePointWebControls:TextField FieldName="SingleLine" runat="server" />
</td>
</tr>
<tr>
<td class="company-hiddeninfo-required">
<SharePointWebControls:RichTextField FieldName="MultipleLines" runat="server" />
</td>
</tr>

image

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>

image

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>

image

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.

<tr>
<td>
<SharePointPortalControls:AverageRatingFieldControl FieldName="AverageRating" runat="server" />
</td>
</tr>
<tr>
<td>
<SharePointPortalControls:SocialCommentWebPart runat="server" />
</td>
</tr>

image

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:
image

Screenshot in Edit Mode:
image

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

Friday, January 13, 2012

SharePoint 2010 Chrome Type CSS Classes

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;
}
image

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

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

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

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

image

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.

image

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;
}

image


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;
}
image


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;
}
image