Friday, December 23, 2011

My SP 2010 Branding Book is Finally Published!

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:

SharePoint Branding Kit Design 1

SharePoint Branding Kit Design 2

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!

Monday, November 14, 2011

SharePoint 2010 Branding Support File Statistics

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.

Friday, October 28, 2011

My SP 2010 Branding Book: Pre-Order Available!

9781430240266I wanted to share that my SharePoint 2010 Branding & Customization book is available for pre-order. You can click on this LINK to review and order my book. Or you can click on the link within the “My SharePoint Branding Book” element on the right side of My Blog.

The book will be available December 15th 2011 and will include many great branding and design topics.

Book Details:
With Practical SharePoint 2010 Branding and Customization, SharePoint branding expert Erik Swenson cuts through the fluff and discusses accessible, easy-to-understand consulting and processes to create aesthetically pleasing, highly usable branded and customized SharePoint websites, both internally and externally. Designed to be a quick reference, how-to guide that lets you dive straight into the task at hand, you'll find this book's attention to detail and pragmatism make it an attractive companion during your branding experience.

SharePoint 2010 deployments are more common than ever, as is the desire to make the environment branded and attractive to both internal and external clients. However, since SharePoint is more than just a collection of web pages, customizing the look and feel and completing the process of branding the platform itself is complex and requires a knowledge of web development, web design techniques, and a familiarity with SharePoint administration—a curious niche, to be sure. And sometimes, you just need to make quick fixes, while at other times, building an entirely customized and branded environment is a multi-step process with lots of stakeholder buy-in and development time required.

Whether you’re interested in applying just a touch of style to a team site, or you’re branding a public-facing Fortune 500 website based on SharePoint, Practical SharePoint 2010 Branding and Customization is the only book you'll need to quickly, easily, and efficiently brand and customize your environment.

Bonus:
Includes the SharePoint 2010 Branding Starter Kit! This kit has everything you need to jumpstart successful and compelling designs.

The kit includes:

  • A layered Adobe Photoshop file of a SharePoint 2010 site
  • Two pre-built visual design examples that each include
    • A layered Photoshop file
    • CSS
    • Images
    • Master Page
  • A Visual Studio solution you can use to deploy either of the designs included.

This starter kit is specifically prepared to save you substantial time kicking off your SharePoint branding project and to minimize potential roadblocks. These branding tools would cost you as much as $500 if purchased separately, but they're included with the purchase of this book at no additional charge!
Order the book today!

What you’ll learn:
Plan for branding projects, including creating wireframes and creative mockups as well as gathering requirements and estimation
Use cascading style sheets (CSS), master pages, page layouts, web parts and XSLT to customize branding
Deploy SharePoint branding to production servers using solution packages (WSP)

Who this book is for:
This book is for anyone who works within SharePoint sites and wants to make changes to how those sites look, whether they're minor changes or wholesale branding and customization efforts.

Author Bio:
ErikSwensonErik Swenson works for EMC Consulting as a Solutions Architect. He lives in Jaffrey, NH and received his bachelor degree in graphic design from Plymouth State University. Erik has been designing and developing SharePoint 2003, 2007, and 2010 sites for small to very large well-known companies over the past 7 years. His expertise is focused on SharePoint Information Architecture, Wireframes, Visual Branding, and CSS/Master Page Front End Development.

Thanks,
Erik Swenson

Wednesday, October 5, 2011

I am now on Twitter!

twitter-logoI was living in the stone age and now finally got around to getting a twitter account. Follow me @ErikJSwenson

Thursday, August 25, 2011

I am writing a SharePoint 2010 branding book!!!

Whoa, its been 3 months and no blog posts what gives??? Well I have been very very busy writing my SharePoint 2010 Branding and Customization book!!! I am sorry about no posts lately but I am very excited to say that I am halfway through the book. It has been many of long nights but I can see the light at the end of the tunnel. The book is schedule to be published and available around the early part of December of this year 2011. So that will be just in time to order one for a great stocking stuffer!

Here is a simplified TOC from the book.

  1. Introduction to SharePoint 2010 Branding
  2. Overview of UX/Branding Process
  3. Gathering Branding Requirements
  4. Creating the Visual Design
  5. Development Environment Setup
  6. Building the Design
  7. Testing the Visual Build
  8. Tips and Tricks
  9. Tools and Resources
  10. CSS Reference Guide

I want to thank everyone who has continued to follow my blog, and has posted such great comments and questions. I promise that once this book is completed I will continue to blog on this site about all things SharePoint Branding and Design. Once the book is ready, I will be adding the ability to purchase it directly from this blog site.

I will be attending the SharePoint Conference in Anaheim, CA October 3-6,2011. I hope to see you there!

Thanks again and make sure to add me to your RSS feed list.

Erik Swenson

Wednesday, May 18, 2011

Page Layout: This Control is Currently Disabled.

Update: Quick fix at the bottom of this post.

Here is a SharePoint 2010 Bug that needs to be fixed. If you have a custom design and you moved the site actions out and below the Ribbon Control, you will notice that when you go to change a publishing page layout via the ribbon the option is disabled.

Here is what the SharePoint 2010 publishing site Ribbon Page Layout Chooser looks like when active:

image

If you move the Site Action Control <SharePoint:SiteActions out and below the Ribbon Control <SharePoint:SPRibbon something similar to this:

image

And then edit the page and try to change the publishing page layout you will notice that some of the ribbon buttons are now disabled.

image

The key issue here is that the site actions control is removed from the SPRibbon control and placed BELOW it. If you move it out of the ribbon control and above it it seems to work fine.

image

image

Thanks to my friend Chris Arella he was able to figure out why this was happening. A big thank you to JulesAnime who was able to provide the quick fix about a year ago from this thread.


THE QUICK FIX:

  • Make sure the page is checked out and editable
  • Click on the Save & Close Drop down arrow button
  • Click Save and Keep Editing
  • This will refresh the page and now you should be able to click on the page layout drop down.

image

Monday, April 18, 2011

SP 2010: View/Update Profile Status on Any Page

If you want to allow your users to view/update their personal Status on any page in SharePoint 2010 follow these simple steps.

1.) As with my previous post you need to add the following to the top of your custom master page right before the doctype:
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

2.) In your custom master page search for “s4-trc-container-menu” and add in the following before the “Welcome” control:
<SPSWC:ProfilePropertyLoader runat="server" />
<SPSWC:StatusNotesControl runat="server"/>
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>

image

**Note that if you do not have the <SPSWC:ProfilePropertyLoader runat="server" /> control specified your users will not be able to update their status…

3.) Add the CSS from this file: Download HERE. Into your own custom CSS file.

Your Result should look something like this:

image

So when I said anywhere, Its only where this custom master page is used… The other thing to note is that it adds significant amount of space to the ribbon area… So if you are cool with that then I hope this works for ya!

Display user profile picture next to welcome name

Here is a simple way to add in the logged in users profile picture right before or after the users name in the SharePoint 2010 ribbon.

1.) Add the following to the top of your custom master page right before the doctype:
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

image

2.) Add in the following control right before the welcome text:
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>

image

A nice feature that you can customize is if you don’t want to show a placeholder image if a users has not uploaded a custom picture you can simply change ShowPlaceholder="true" to “false”. and it will only show a picture if someone has specified a custom one in their profile.

Before:
image

After:
image

If you want to have the image on the right simply move the control after the welcome and muiselctor controls, also remove the float:left in the picture style:
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>

<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>

<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>

The 20px height is that golden number because any larger and the image will get cropped off on the bottom in IE7 and in IE8 you will start to see some separation and cropping of the ribbon when viewing the other ribbon tabs.

30px height:
image

20px Height:
image

The inline CSS above on the control is just to keep this blog post simple, Its recommended to move that inline style into your custom CSS file.

Wednesday, March 30, 2011

SharePoint 2010: Basics on how to apply branding

So, I have gotten a lot of great feedback within the comments of my blog. I have heard from quite a few people that they either just been tasked with branding SharePoint and don’t know where to start. Or they have a basic idea about SharePoint, CSS and HTML but don’t know where or how to reference the custom CSS. This is a long post so hold on to your hat!

Within this post I am going to focus this topic on SharePoint 2010 but the approach could be used either for 2007 or 2010.

Step 1: The first thing that you have to consider is how the SharePoint site that you are branding is configured?

  • Is it SharePoint 2007 or 2010?
  • Is it WSS or Full SharePoint Server?
  • Will Publishing be enabled?
  • What site templates will be branded?
    • Publishing
    • Team Collaboration
    • Meeting Workspaces
    • Search Center
    • My Sites
    • Administration Pages “_layouts/”
    • Other?

Step 2: Be prepared and gather all design support files from your visual designer

  • Support Images optimized for web
  • Style Guide
    • Hex colors for all design elements
      • Text body colors
      • Text link colors
      • Text link hover colors
      • Text header colors
      • Background colors
    • Heights and widths of design elements
      • Ribbon
      • Header
      • Logo
      • Navigation Container
      • Navigation Links
      • Left Side Navigation
      • Content Area

Step 3: Choose your implementation approach

  • Store all CSS and Images on the server
    • This approach allows you to store all of your CSS and images in a custom folder on the server within the 14 hive, 12 hive for 2007.
    • SharePoint 2010 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
    • SharePoint 2007 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\customfolder
    • This approach allows you to have a single source for all of your CSS and images. Note that it is recommended to create a solution package with all of your files and deploy it especially if you have more than one web front end server. This will push all of the files to the correct location on each web front end so you do not have to do it manually.
  • The other option is to Store all CSS and Images within SharePoint Style Library (Publishing Infrastructure and Site Publishing Feature need to be enabled)
    • This approach allows you to have version control over your CSS and images. However these files will need to be added to each site collection the branding will be applied to so if you have a lot of site collections there will not be a single source for your files. AKA if you update one it will not update the branding globally.

Step 4a: If you choose to go with storing all of your CSS and images on the server, below are the steps to get you started.
I will walk you through the manual process of adding in the files, a solution would be created to add these files in normally. Please note that this should be done in a development environment first.

  • log into your web front end as a administrator
  • Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES
  • create a new folder within the styles library that is either your company name or project name or what ever makes sense
  • upload all of your optimized images into this folder
  • right click > new > text document
  • rename it custom.css
  • Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

  • Save the custom CSS file

Step 4b: If you choose to go with storing all of your CSS and images within SharePoint, below are the steps to get you started.

  • first you need to make sure that you have the publishing infrastructure and publishing feature activated within your site.
  • To verify click on Site Actions > Site Settings > Site Collection Administration > Site collection features

image

  • Then to verify the site feature click on Site Actions > Site Settings > Site Actions > Manage site features

image

  • by activating the publishing feature it creates a style library at the root of the site collection where you will be able to store and reference your custom CSS and images.
  • navigate to the new style library:
    http://sitename/Style%20Library/Forms/AllItems.aspx
  • you will normally see four folders
    • en-us
    • Images
    • Media Player
    • XSL Style Sheets
  • create a new folder at this root location that is either your company name or project name or what ever makes sense
  • upload all of your optimized images into this folder
  • on your local machine create a new text document in notepad
  • save it as “custom.css”, make sure you save as type “All Files” and Encoding “UTF-8”

image

  • Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

  • Save the custom CSS file

Step 5a: Apply your server side custom CSS to your site.
You now have a few choices on how you want to apply your custom CSS to your site/page. If you want more details about other approaches see my blog post here: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

  • Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
    • For non-publishing Click on Site Actions > Site Settings > Galleries > Master pages
    • For publishing Click on Site Actions > Site Settings > Galleries > Master pages and page layouts
    • hover over v4.master and click on Send To > Download a Copy
    • Save this copy of v4.master onto your local machine
    • Rename it customv4.master
    • Open up the master page in notepad.
    • ** Do not try to open it locally with SharePoint designer, it will add in a bunch of weird references and your master page might get errors.**
    • at the end of the head tag add the following code
    • <SharePoint:CssRegistration name="custom/custom.css" After="corev4.css" runat="server"/>
    • Save the master page and upload it into the master page gallery.
    • Make sure that you publish it as a major version and approve it as needed.
    • to apply your custom master page when publishing has been enabled click on site actions > site settings > look and feel > master page
    • If Publishing is not enabled you will have to use SharePoint designer to set this custom master page, there will not be an option to do this through the UI.

image

    • Change the Site Master page and the System Master page to your customv4.master and then click on ok
    • Now You will finally see that you branding has been applied.

image

  • Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
    • Click on site actions > site settings > look and feel > master page
    • Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
    • add in the following path:
    • _layouts/1033/styles/custom/custom.css
    • then click on ok
    • your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
    • ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
  • Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
    • Add the content editor web part to the page
    • Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
    • paste in the following:
    • <link href="/_layouts/1033/styles/custom/custom.css" rel="stylesheet" type="text/css"/>
    • Save/Publish the page. Just this page will now have the custom branding applied.

Step 5b: Apply your Style library custom CSS to your site.
You have the same options as above but with different URL paths.

  • Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.
    • Use same method above to create your custom master page but use the following reference at the end of the HEAD section.
    • <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/custom/custom.css %>" After="corev4.css" runat="server"/>
  • Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.
    • Click on site actions > site settings > look and feel > master page
    • Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”
    • add in the following path:
    • /Style Library/custom/custom.css
    • then click on ok
    • your site should now have the custom branding applied to this site and if you choose to any existing sub sites.
    • ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **
  • Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.
    • Add the content editor web part to the page
    • Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source
    • paste in the following:
    • <link href="/Style Library/custom/custom.css" rel="stylesheet" type="text/css"/>
    • Save/Publish the page. Just this page will now have the custom branding applied.

I hope this helps any new front end developers out there trying to get their feet wet with SharePoint 2010 branding.