SharePoint Branding & Design

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.

My SP 2010 Branding Book: Pre-Order Available!

noreply@blogger.com (Erik Swenson) — Fri, 28 Oct 2011 14:18:00 +0000

I 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:
Erik 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

I am now on Twitter!

noreply@blogger.com (Erik Swenson) — Wed, 05 Oct 2011 21:58:00 +0000

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

I am writing a SharePoint 2010 branding book!!!

noreply@blogger.com (Erik Swenson) — Fri, 26 Aug 2011 02:06:00 +0000

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.

Introduction to SharePoint 2010 Branding
Overview of UX/Branding Process
Gathering Branding Requirements
Creating the Visual Design
Development Environment Setup
Building the Design
Testing the Visual Build
Tips and Tricks
Tools and Resources
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

Page Layout: This Control is Currently Disabled.

noreply@blogger.com (Erik Swenson) — Wed, 18 May 2011 14:43:00 +0000

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:

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

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.

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.

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.

SP 2010: View/Update Profile Status on Any Page

noreply@blogger.com (Erik Swenson) — Mon, 18 Apr 2011 20:18:00 +0000

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

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

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

noreply@blogger.com (Erik Swenson) — Mon, 18 Apr 2011 17:43:00 +0000

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

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

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:

After:

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:

20px Height:

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.

SharePoint 2010: Basics on how to apply branding

noreply@blogger.com (Erik Swenson) — Wed, 30 Mar 2011 17:44:00 +0000

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

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

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”

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.

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.

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.

SharePoint 2010: Large Search Box & Scopes

noreply@blogger.com (Erik Swenson) — Fri, 25 Feb 2011 02:51:00 +0000

My previous post did not include a style for the search scope drop down. Use the following to CSS to update the search scope from:

To:

Download updated files HERE

How to implement:

Upload the custom master page into the master page gallery
Navigate to the following location on your server: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES”
Create a folder called “LGSEARCH” and place the “lgsearch.css” and the two image files into this directory.
Apply the “lgsearch.master” to your site.

SharePoint 2010: Navigation Drop Down Styles

noreply@blogger.com (Erik Swenson) — Wed, 02 Feb 2011 16:42:00 +0000

If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS.

If you are looking for SharePoint 2007 styles see my previous blog post here.

The OOTB Navigation Drop Down CSS: “COREV4.CSS”
.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
a:link{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
text-decoration:none;
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}

Example (Not good design, but you get the point)

/* Drop Down: Container Style */
.s4-tn ul.dynamic{
background-color:white;
border:3px dashed #000;
}
/* Drop Down: Item Padding Style */
.s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
}
/* Drop Down: Hyperlink Styles */
.s4-tn li.dynamic > a{
font-size: 9pt;
font-weight:normal;
color:#000;
}
/* Drop Down: Hyperlink Hover Style */
.s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#0C0;
color:#FFF;
}

What it will look like:

Simply take the above 4 main CSS classes and add/edit/delete the properties to make your drop down style truly unique.

SharePoint 2010: Large Search Box

noreply@blogger.com (Erik Swenson) — Tue, 01 Feb 2011 15:23:00 +0000

The OOTB search box in my opinion is hidden and misplaced. In most cases it gets in the way with the top navigation especially when you have a lot of items in it.

The solution to this problem is to move the search box up to the left of the social tags and make it bigger with CSS and Images.

Here is what the search box will look like: This design consists of two images one for the search box (searchbox.gif) and the other for the button (searchbutton.gif).

Moving the Search Control:
In your custom master page simply move the s4-searcharea div up into a new <td></td> before the social tags.

The final code should look like this: Notice that I kept the div and the “s4-rp” class. This has the “float:right” attribute for the help icon.

Putting it all together:
I have placed all of the support files to create this large search box style into the following .zip file that you can download and apply to your development site.

Source Files: Download HERE

How to implement:

Upload the custom master page into the master page gallery
Navigate to the following location on your server: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES”
Create a folder called “LGSEARCH” and place the “lgsearch.css” and the two image files into this directory.
Apply the “lgsearch.master” to your site.

Presenting at SharePoint Conference Baltimore MD

noreply@blogger.com (Erik Swenson) — Fri, 28 Jan 2011 18:32:00 +0000

I will be co-presenting at the SharePoint Conference in Baltimore, MD March 8th with my friend Chris Arella.

Designing for SharePoint: Avoid the Pitfalls
When: Tuesday, March 08, 2011 @ 1:45PM
Speakers: Erik Swenson

Session Details:
Applying your creative design to the SharePoint platform can be incredibly challenging. The diverse functionality offered in SharePoint 2010 is daunting, to say the least, and trying to tame all of this power into a cohesive and polished design is incredibly overwhelming. If you’re ready to start designing in SharePoint, but you’re not quite sure where to start, we’ll set you down and point you in the right direction. Learn best practices for designing in SharePoint, and discover solutions to the common pitfalls that designers often encounter.

This is going to be a great conference! For more information and to register go to: http://www.sharepointconference.org

I hope to see you there!

Change SharePoint 2010 Site Logo Via CSS

noreply@blogger.com (Erik Swenson) — Wed, 15 Dec 2010 22:27:00 +0000

I thought that I created this post before, but I guess it was either the SharePoint 2007 Logo, or the SharePoint 2010 Search Button. So here it is.

Very much like the two examples above, if you simply want to change the site logo via CSS globally, or for a single site. Without having to go to the Site Actions > Site Settings > Title and description > adding in a URL to site logo. Then simply do the following:

Copy your image anywhere users can access it
Paste in the following CSS into your custom CSS file

.s4-titlelogo{
background-image: url(/_layouts/images/centraladmin_security_48x48.png);
background-position:left center;
background-repeat: no-repeat;
}
.s4-titlelogo > a > img{
visibility: hidden;
width: 48px;
height: 48px;
}

Update the background image URL path above in red to where you uploaded the image
Change the width and height above in Blue to match the image dimensions.

Before:

After:

Hide SP2010 “My Site” link in top navigation

noreply@blogger.com (Erik Swenson) — Wed, 01 Dec 2010 17:05:00 +0000

To hide the “My Site” link in the SharePoint 2010 top navigation you can easily do this via CSS.

Simply add the following to your custom CSS.

.ms-globalnavicon{
display: none;
}

Now when you click on Site Actions > Site Settings > Top Link Bar. You can customize those links all you want and not have to worry about the “My Links” getting in the way. Its redundant/repetitive to the My Newsfeed link anyways. So I am not really sure why it was in there for the first place…

Customize My Profile Tabs for SharePoint 2010

noreply@blogger.com (Erik Swenson) — Thu, 18 Nov 2010 14:40:00 +0000

If you have a requirement to add, edit, or delete the tabs within the my profile pages its actually quite easy. The default tabs are:

Overview

URL: /my/person.aspx

Organization

URL: /my/OrganizationView.aspx

Content

URL: /my/personcontent.aspx

Tags and Notes

URL: /my/_layouts/thoughts.aspx

Colleagues

URL: /my/_layouts/MyContactLinks.aspx

Memberships

/my/_layouts/MyMemberships.aspx

You can manage these tabs by navigating to the My Site Host http://sitename/my/ or the the my profile page http://sitename/my/Person.aspx.

Click on Site Actions > Site Settings > Look and Feel > Quick Launch

You will notice that all of the tabs are managed as quick launch links. This will allow you to easily add, edit, and delete tabs.

If you want to customize the look of the tabs to be vertical or place it somewhere else on the page you simply have to modify the person.aspx page within the My Site host Site collection.

Open up the site (http://sitename/my/) in SharePoint Designer 2010, and click on All Files.

Notice that 3 out of the 6 .aspx files are managed in SharePoint and the other three are stored on the server in the following location: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS

Check out the person.aspx file and edit in advanced mode.

The tabs on the profile page are actually a SharePoint:AspMenu menu control. Which has a horizontal orientation and a unique “s4-sn” css class to give it its unique look and feel.

<SharePoint:AspMenu
     ID="MySiteSubNavigationMenu"
     Runat="server"
     EnableViewState="false"
     DataSourceID="MySiteSubNavDS"
     AccessKey="<%$Resources:wss,navigation_accesskey%>"
     UseSimpleRendering="true"
     UseSeparateCss="false"
     Orientation="Horizontal"
     StaticDisplayLevels="1"
     MaximumDynamicDisplayLevels="0"
     PopOutImageUrl=""
     SkipLinkText=""
     CssClass="s4-sn">
</SharePoint:AspMenu>
<SPSWC:MySiteDataSource
     ShowStartingNode="False"
     SiteMapProvider="MySiteSubNavProvider"
     id="MySiteSubNavDS"
     runat="server"/>

This control is placed on all 6 of the aspx pages to give the effect that a user is simply changing the content on the page by clicking on a different tab and not actually going to a different page.

The key is to keep that consistency throughout your custom profile pages so that the user does not get confused when navigating the tabs.

Update: Hide First Tab in SP 2010 Navigation

noreply@blogger.com (Erik Swenson) — Thu, 04 Nov 2010 15:13:00 +0000

My original article used CSS to hide the first navigation tab, but if you want to make the change via the master page navigation control there are some simple changes that you will need to make. I originally thought by just changing the “ShowStartingNode” property it would simply hide the first node but by default it has it already set to false: ShowStartingNode="False" so the approach below is what worked for me.

Here is the base top navigation control:
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
CssClass="s4-tn"/>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

First off Remove the following:
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

And then make the following changes to the static, dynamic and site map provider:
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="2"
SkipLinkText=""
CssClass="s4-tn"/>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="CombinedNavSiteMapProvider"
          id="topSiteMap"
          runat="server"/>

The result would look something like this:

Thanks to c_marius for the comment and jsalazar80016 for the approach.

Hide custom code within SP 2010 modal windows

noreply@blogger.com (Erik Swenson) — Wed, 03 Nov 2010 17:26:00 +0000

If you have ever added custom elements to your master page above or below the standard DIV tags you will notice that they start appearing in the SharePoint 2010 Modal windows when you don’t want them to.

The simple fix is to use the class “s4-notdlg” on your custom element to hide it when viewing the modal pop up windows.

To give you a better idea of what I am talking about I added in a simple DIV tag right above the s4-ribbon row DIV: The inline CSS below is just to make it stand out.

<div class="my-customdiv">Here is my custom header</div>
<style>
.my-customdiv{
    background-color: #009;
    border-bottom: 4px #FFF solid;
    text-align: center;
    color: #FFF;
    font-size: 10pt;
    font-weight: bold;
    padding: 10px;
    height: 30px;
}
</style>

Here is what the site looks like with the custom header applied:

If I create a new list item or upload a document, the Modal Window shows my custom div above the input form. Not good…

To fix this you simply have to add the “s4-notdlg” CSS to the custom DIV tag to hide it from the modal window.

Example:
<div class="s4-notdlg my-customdiv">Here is my custom header</div>

Now the modal window will not show my custom DIV:

Convert Folder Breadcrumb to Traditional Style

noreply@blogger.com (Erik Swenson) — Tue, 02 Nov 2010 17:41:00 +0000

Update 11/4/2010: I found that by using the default SiteMapProviders="SPContentMapProvider" in the original post it was throwing errors when creating a publishing page.

So I have updated my approach below to utilize how breadcrumbs were done in MOSS 2007.

Basically you should simply replace the existing PlaceHolderTitleBreadcrumb placeholder with the following:

I have updated the post below to reflect the above changes.

I have received a lot of feedback about the OOTB breadcrumb control for SharePoint 2010 not being useful and hard to find. People would ask me: Where did the standard breadcrumb go? I know it was there in SharePoint 2007… Well to find it in 2010 you have to look hard (Which in my opinion is not a good thing). To find it. look in the ribbon for that little folder icon with the green arrow that is next to the site actions…

If you click on it, it will display a pop up menu with a hierarchy from the top of that site collection.

So to get the 2007 breadcrumb look and feel back you have to do some simple configurations.

First open up your custom master page and search for: “PlaceHolderGlobalNavigation”

Within this control there is another place holder called “PlaceHolderTitleBreadcrumb”

Simply delete the “PlaceHolderGlobalNavigation” Code and add in the following simplified code right above the “s4-mainarea” DIV.

The result should look like this: A bunch of Span and <a> tags.

Now it is time to add in CSS to make it look more like a traditional breadcrumb. Add in the following CSS to your global CSS file or master page:

The breadcrumb should now look something like this:

You can download the sample master page HERE with the updated code above to get you started.

Enjoy!

Sorry for the changes, but I am sure you will enjoy this better without the errors!

Hide First Tab in SharePoint 2010 Navigation

noreply@blogger.com (Erik Swenson) — Thu, 16 Sep 2010 16:12:00 +0000

I created a blog post on this for SharePoint 2007 HERE: But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element.

You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags.

Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application:

.s4-tn li.static > a{
display: none !important;
}
.s4-tn li.static > ul a{
display: block !important;
}

Enjoy!

Modal Pop-Up for a Unique Content Type

noreply@blogger.com (Erik Swenson) — Mon, 13 Sep 2010 15:14:00 +0000

To continue the conversation with the modal pop up window, I was asked the following great question:

“What if your list has different content types, each having their own form? Is there a way to make this pop-up specific to the form of a certain content type?”

The answer is yes it is quite easy to link the pop-up modal window to a unique content type: You would use the same approach but you would add in the Content Type ID to the end of the URL string:

<a onclick="javascript:NewItem2(event, "http://sitename/_layouts/listform.aspx?PageType=8&ListId={49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D}&ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&RootFolder=");
javascript:return false;"
href="/_layouts/listform.aspx?PageType=8&ListId={49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D}&ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&RootFolder="
target="_self">
Add a Unique Content Type Item</a>

To find the custom content type ID, simply click on the list settings, within the content type section right click on the custom content type and then click on properties. Within the Address URL, the ID is at the very end after the “ctype=”

Simply Replace the above blue ID with your own custom one. This will allow you to have links to custom content types within the same list and not have to worry about the default content type settings.

Ways to extend the SharePoint Modal Window

noreply@blogger.com (Erik Swenson) — Thu, 09 Sep 2010 21:05:00 +0000

So in my last post I simply wanted to show an input form in a SharePoint 2010 modal window. This got my creative juices flowing and I wanted to experiment a little. I found out that you can easily display anything in the Modal window that you wanted.

Web Site: Bing
<a onclick="javascript:NewItem2(event, "http://www.bing.com");
javascript:return false;" href="http://www.bing.com/" target="_self">Show Bing In Modal Window</a>

Image
<a onclick="javascript:NewItem2(event, "http://sitename/Images/image.png");
javascript:return false;" href="/images/image.png/" target="_self">Show Image</a>

Video/Games
This does not really work since most video’s open up in a separate application like Window Media Player and not within the browser. However you can use things like flash .swf files to show in the modal window.
<a onclick="javascript:NewItem2(event, "http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf");
javascript:return false;" href="http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf" target="_self">Flash Game</a>

So basically you can show basically anything that you have a link to and can be visible within a browser.

Enjoy, and let me know what creative things you have placed in your modal window…

How To: Create Hyperlink to Modal Pop-Up Form

noreply@blogger.com (Erik Swenson) — Thu, 09 Sep 2010 14:54:00 +0000

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…)

I basically took the code directly from the “Add new item” and the “Add Document” link within the list view.

What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page.

This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name.

Full Code For a List Item:
<a onclick="javascript:NewItem2(event, "http://SiteName/_layouts/listform.aspx?PageType=8&ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&RootFolder=");
javascript:return false;"
href="/_layouts/listform.aspx?PageType=8&ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&RootFolder="
target="_self">
Submit Feedback</a>

Full Code for a Library Item:
<a href="http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&
RootFolder=" onclick="javascript:NewItem2(event, "http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&RootFolder=");
javascript:return false;"
target="_self">
Upload a Document</a>

What you need to change:
URL: Change “SiteName” to your URL
List ID: Change the list ID to your custom list/library ID

To find out the list/library ID, simply navigate to the list/library you want to display and then click on list settings
Look at the end of the URL.
You will get something similar to this: ~~%7B~~94AC86A8%2D6774%2D4822%2DA197%2DA98542251678~~%7D~~
Remove the first %7B and the last %7D
Then change all %2D’s to “-“
So the final would be 94AC86A8-6774-4822-A197-A98542251678

You could also add in an image right within the <a> tag and make a nice button for users to click on. Once you have customized the code you can now simply add the code to any page on the site and you will get the following results:

Site Collection 2 hyper linking to a list on Site Collection 1

How To: Hide Left Side Navigation on Home Page

noreply@blogger.com (Erik Swenson) — Wed, 18 Aug 2010 22:13:00 +0000

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. "

There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.

<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>

Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin.

Once you are done, simply modify the web part and hide it on the page.

If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.