Monday, December 28, 2009

My Blog is back!

My blog was tagged by blogger as a spam blog and was taken down for the last 2 weeks. I am sorry for the inconvenience and hope to be adding more posts shortly. I would love to move my blog to another more reliable spot. Leave a note letting me know what blog engines work for you! I would love to have a SharePoint 2010 blog but I don’t own my own servers…

Thanks for your patience.

Thursday, December 10, 2009

SharePoint Presence Not Showing…

If you ever had the issue where your SharePoint site had presence turned on, but you could not see the presence indicator colors next to user names within lists/libraries or within the My Colleagues web part. Then Please read on for a solution.


The solution to view the presence indicators with full color is to add the site to your trusted sites.


Now when you refresh the page you will be able to see the presence indicators in full color.


Saturday, October 31, 2009

Update: Really Small SharePoint Calendar

I really was not that happy with the look of the first calendar so after some modifications and a bit of CSS magic I have come up with a really good looking small calendar. At least I think so…

Basically I have replaced the text of an event item with a color coded box. The benefit that you get out of this is that you don’t have to try and read the even within the small calendar but if you hover over and click on the color block you get the list Item display.

  • Orange is for single event items (8am-10am, etc)
  • Green is for full day events or repeat events

Another nice feature to this is that I have also simplified the visual indicator when there are more then two event items in one day. Instead of seeing the arrow and text all you see is the arrow. Once you click on the arrow it will show the other blocks of events (Right image).

image image

Here is the CSS Code: Download Here

  1. Simply place a content editor web part on the same page as the calendar
  2. Paste the code from the file above into the source of the content editor web part.
  3. Hide the Content editor web part on the page.

If you plan on making this a more global style this is an example of how the large calendar would look like.


Leave a comment and let me know how it works for you!

Friday, October 30, 2009

How to create a really small SharePoint Calendar

Well I guess I did not do my research enough and found a site that had an even smaller SharePoint calendar by just modifying the CSS.

With these styles below you can drastically transform your SharePoint Calendar view into a tiny box. Yes there is limited functionality but if you have been looking for something like this with no custom code you got it!

  (Left) No events                     (Right) Events populated



Copy this CSS code below and past it into your custom CSS!

/* Remove week blocks */
.ms-cal-weekempty {display:none;}
.ms-cal-week {display:none;}
.ms-cal-weekB {display:none;}
.ms-cal-weekB {display:none;}

/* Shrink cells */
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
.ms-cal-workitem {font-size:0px;}
.ms-cal-muworkitem {font-size:0px;}
.ms-cal-noworkitem {font-size:0px;}
.ms-cal-nodataMid {font-size:0px;}
.ms-cal-todayitem {font-size:0px;}

/* thin out header */
.ms-cal-nav {display:none;}
.ms-cal-nav-buttonsltr {display:none;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}

/* Abbreviate weekdays */
.ms-cal-weekday {letter-spacing:6px; width:22px; overflow: hidden;}

/* Adds border to bottom */
border-bottom: 1px #6f9dd9 solid;


Wednesday, October 21, 2009

How to Shrink a SharePoint Calendar View

Have you ever needed to add a Event Calendar to your Team Site with the calendar view but you didn’t because it basically took up the whole site? Well just today I was messing around with this and came up with some interesting results.

If you look at the code for a calendar view everything looks fine except for a hidden shared class at the very top of the calendar right below the webpart title.

image This image is 742 pixels wide and forces the calendar view to be minimally that width. With the CSS below you can now hide that image and allow the calendar to fit within your team site with no problems at all. By making these changes you will not change the look of the full view of the calendar when you click on the event list. The screenshot below was taken with 1024x768 resolution.

image Here is the CSS:

.ms-calheader img{
display: none;

#CalViewTable12 img{
display: inline;

white-space: nowrap;

Full Calendar View with styles applied:



Monday, August 3, 2009

SharePoint Reusable Content

I can pretty much say I know my way around SharePoint… But every once in a while you learn about a feature that you never knew was there… Most of the time its those annoying bugs that we call “features” but are true head against the wall things that make you go hmmmm… But this time its a good thing…

I was tasked with finding a way to create a header and footer for a publishing site. This header and footer would be consistent across all pages within the content area of the site. My First thought was ok I need a custom page layout, but this would not work since it needs to be easily updated via the SharePoint Interface.

So after some investigation I found out that SharePoint has a built in feature called “Reusable Content”

Basically all you need to do is simply edit the page of your publishing site and click on a content editor control. If you look at the image below there is a icon next to the image icon.

image The icon is not very obvious hence the reason why I never noticed it before… But if you click on this button you get the following list.


This is basically a list of all the reusable content that resides within that site collection.

If you don’t see what you like you can simply open up the list via the “Open List” button on the toolbar.

From that list you can now create either Reusable HTML or Text.


New Reusable HTML form:


Once you have edited your content and choosen it from the list you will see the Reusable content within a grey boxed in area within the content.


So, how many other people out there never knew this feature was there? Am I the only one? Leave a comment with your experiences.

Thursday, June 4, 2009

SharePoint Branding Build Test Checklist

During the creation of the CSS, Master Pages, and Page layouts its critical to stay on top of your Front End Development testing.

As you know many classes in SharePoint are shared classes so when you make a modification to one element you have to test, test, test.

Below are some helpful things to review before giving that oh so critical demo… Hopefully these will help you out during your development process and testing.

  • Create and test all OOTB SharePoint templates
    1. Publishing Sites
      • Publishing Toolbar
      • Page Layouts (All that are available)
    2. My Sites
      • My Profile
        • Organization Hierarchy web part
        • In Common with you web part
    3. Team Sites
    4. Meeting Workspaces
    5. Blog
      • Unique Quick Launch
      • Post date, title, content, and links
    6. Wiki
      • Functional Links (Edit, History, Incoming Links)
      • Unique Quick Launch (Recent Changes)
      • Last Modified
    7. Search
      • People search drop down options
      • Search Results
      • Advanced Search Link
      • Advanced Search Page
    8. Central Administration
      • Don’t spend to much time on these
  • Test as many SharePoint functions as you can
    1. Fly Out Menu’s/Drop Downs
      • My Links
      • Top Navigation
      • Site Actions
      • Modify Web Part
      • Quick Launch if enabled
      • Multi Tier/level if enabled
      • Document Item Drop Down
    2. Button Hovers
      • Search/Go
      • Global Links (Top Links like My Links)
      • SPLink (Welcome & Console Toolbar Buttons)
      • Toolbar View Button
    3. Quick Launch
      • Headers
      • List Items
      • Selected headers/Items
      • Tree View
    4. Breadcrumbs
      • Text
      • Hyperlinks
      • Carrots “>”
    5. Toolbars
    6. Calendar
      • Date Picker
      • Month View
      • Week View
      • Day View
      • Current Day Indicators
    7. Lists/Libraries
      • Datasheet View
      • Alternating item shade (ms-alternating)
    8. Webpart
      • Chrome/Title
      • Border color/width if selected (ms-WPBorder)
      • Separator Lines
    9. Edit Page
      • Webpart Zone Colors
      • Drag and Drop Style
      • Webpart Chrome/Title’s
      • Advanced Webpart Gallery and Options
    10. Admin Pages
      • Site Settings
      • List Forms
        • Form Background (ms-authoringcontrols)
      • Upload Document
      • Error Pages
    11. OOTB Themes
      • If you are going to allow OOTB themes you will have to test, test, and triple test that all themes work and function as expected with your custom design…
    12. Fonts/Colors
      • Stick to system Fonts so that everyone gets the same experience. (Verdana, Tahoma, Arial, Etc)
      • Page Titles
      • Body Content
      • Hyperlinks
      • Hover Text
      • Visited State
    13. Images
      • Teamsite Default Image
      • Social Meeting Workspace Image
    14. Customization/3rd Party
      • Its kinda a given but any custom web parts, 3rd Party or custom controls implemented will need to have branding applied or tested before deployment onto prod servers.

I’m sure there are some that I missed but drop me a comment if you have some that I missed and I will add to the list above.

Thursday, May 14, 2009

Rounded Corners in SharePoint

Rounded corners have become a staple in website design. But they come with a price. Don't get me wrong I really like the look of them and they really help soften the look of the site.

In most cases you can create this look by using the method below. Later on in this post I will highlight some of the things you can do and some of the things not technically possible without major custom development.

Design 1: Rounded corners to frame a site:

  1. Open up your master page and add 1 <div> tag right before the ms-main table to represent the site container (This is used to position the site and give it its width)
  2. Add 4 more <div> tags before the ms-main table to represent your 4 corners (top left, top right, bottom left, bottom right)
  3. <div id="xyz-content-corner-tl">
    <div id="xyz-content-corner-tr">
    <div id="xyz-content-corner-bl">
    <div id="xyz-content-corner-br">
  4. Add in the following to CSS attributes to represent the 4 corners

background-image: url(/_layouts/images/xyz/xyz_content_corner_tl.gif);
background-position:left top;
background-repeat: no-repeat;
background-color: #ffffff;
background-image: url(/_layouts/images/xyz/xyz_content_corner_tr.gif);
background-position:right top;
background-repeat: no-repeat;
background-image: url(/_layouts/images/xyz/xyz_content_corner_bl.gif);
background-position:left bottom;
background-repeat: no-repeat;
height: 100%;
background-image: url(/_layouts/images/xyz/xyz_content_corner_br.gif);
background-position:right bottom;
background-repeat: no-repeat;
height: 100%;

Example: Please note that the shadow effect is a bit more complex and requires two more <div> tags to represent the right side repeat and the bottom repeat.


Design 2: Rounded corners to frame content

  1. This approach can achieved the same way as per above with 4 <div> tags but just needs to included around the <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> control within the master page.



Design 3: Rounded corners around individual web parts

  1. Now this one has some tricky elements that I am still trying to work out.
  2. My Original thought was to use the approach above and simply add the 4 <div> tags around each individual webpart zone in a page layout. But there is a catch…
  3. Normally webpart zones are wrapped in a <td> that has an id of "_invisibleIfEmpty" There is some java script that basically hides that zone from rendering on the page if there is no content in it.
  4. However if you place those 4 div tags within that <td> you would assume that it would still hide that zone. But no basically its like a buffer and that JavaScript no longer thinks that zone is empty and it shows it on the page even if there is no webpart in that zone. So you end up with something like below: Notice that below the two web parts on the right there are two empty white containers with nothing in them.



So all in all its fairly easy to add in rounded corners to different areas within your design by using the approach above but there is still a need to have individual web parts with a container all for themselves.

If anyone out there has any ideas on either modifying the JavaScript to ignore the div tags and hide the empty zones or have any other approaches that have worked for them please don't hesitate to comment.


Thursday, April 9, 2009

IA and Branding Process Presentation [Video]

Click to watch the video presentation (36MB WMV), thanks to my friend Paul Galvin for taking the video.

Update: For some reason the link was not good. I have updated it and it should work now.

Wednesday, April 8, 2009

IA and Design Process Presentation Download!

I want to thank everyone for attending my presentation. It was a great success! I had a co-worker video record the session but it will take a little while to get that uploaded/edited for the masses.

Here is the link to my presentation. I have included notes on each slide for the dialog.



Thanks again, enjoy and please add your comments to this post!

Tuesday, March 31, 2009

User Experience Design Process: Teaser

As a teaser, I would like to provide a sample of my upcoming session at the SharePoint Summit 2009.


image Information Architecture –Much of the interface navigation and page structure will be driven by the Information Architect.
image Designer – Skill depends on several factors, if leveraging native features, skill is very dependent on knowledge of SharePoint.
image SharePoint Front-End Development
MOSS-FED highly specialized skill set, especially if doing CSS-based changes.

UXD Process:


Monday, March 23, 2009

Agenda for SharePoint Summit 2009 Presentation

Here is the final agenda for my presentation for the SharePoint Summit in Montreal on April 8th from 9:15 a.m. - 10:00 a.m. I only have 45mins to get it all in so wish me luck.

  • Anything is possible
  • Roles
  • Design process
    • Gathering Branding Requirements
    • Create Sitemap & Navigation
    • Create Wireframes
    • Create Visual Design
  • Tools for building the design
  • Implementation methods options
  • Additional guides/references
  • Q/A

Note: I will post my slide deck after the conference. Thanks for whoever posted that question in the comment area.

Monday, February 16, 2009

SharePoint Summit 2009 Presentation

As I prepare my slides and agenda for my presentation at the SharePoint Summit in Montreal Canada I would like your input.  Please provide your feedback/comments and if you plan on attending my session!

"IA and Branding Process: Sketches to Wireframes to Hi-Fidelity Designs".

  • Methods to gathering requirements
  • Benefits of a creative brief and Style guide
  • Understand what functional concepts are and how they can be used
  • Explore options on creating wireframes
  • Creating the Design Composition (Differences between design adaptation and custom design)
  • Building the design (CSS, Images, Master Pages, Page layouts, testing for multiple browsers and Mobile devices)


Wednesday, January 28, 2009

Hide #1 tab in Top Navigation (Home)

OOTB SharePoint will not allow you to remove the 1st tab on the main navigation through the UI. To do this you can simply use the following CSS below and add it to your custom CSS or use the CEWP page style method to just make the change just for that page.

If you look at the code, you will notice that each top navigation item has an ID.

  • zz1_TopNavigationMenun0 (Home Tab)
  • zz1_TopNavigationMenun1 (Tab #2)
  • zz1_TopNavigationMenun2 (Tab #3)
  • zz1_TopNavigationMenun... (Tab Etc)

Since the home tab is always #1 it is always given the ID of "0"

CSS Code:

#zz1_TopNavigationMenun0 {
display: none !important;

Friday, January 16, 2009

Creating a Two Tier Global Navigation

Two tier navigation is not a new concept and has been out for quite a long time. However SharePoint OOTB does not allow you to have a global navigation that spans multiple site collections.

Here are a few examples of a multi tier horizontal navigation.

Example 1: MSDN: Microsoft Developer Network

Example 2: Fed Ex

Example 3: Wall Street Journal

During a recent project I was given the task to create a global navigation that had two tiers like the examples above.

After some investigation my friend Sahil Malik had put together a great blog about creating a consistent navigation across site collections. (Thanks Buddy)

Well this is great and all but his code replaced the OOTB navigation with a custom one. So after some hard thinking I figured out that you could create your own control that drove the tier 1 global navigation (Across site collections) and a tier 2 local navigation (OOTB) that was security trimmed.

To get this to work you should use Shail's post as a guide for code but here are the basic steps:

  • Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname
  • Create a back up of the web.config on each of the web applications that you want the two tier navigation
  • Add the following to the custom web.config file

<add name="CustomXmlContentMapProvider" siteMapFile="_app_bin/mainMenu.sitemap" type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />

  • Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname\_app_bin
  • Create a file called "mainMenu.sitemap" and add in your navigation simular to something like below

<?xml version="1.0" encoding="utf-8" ?>
    <siteMapNode title="Tab 1 Home" url="/Pages/Default.aspx">
        <siteMapNode title="My Site" url="">
            <siteMapNode title="My Profile" url=""/>
        <siteMapNode title="Collaboration" url="/Collaboration/Pages/Default.aspx"/>
        <siteMapNode title="News" url="/news/Pages/Default.aspx">
            <siteMapNode title="News 1" url="/news/news1/Pages/default.aspx"/>
            <siteMapNode title="News 2" url="/news/news2/Pages/default.aspx"/>
            <siteMapNode title="News 3" url="/news/news3/Pages/default.aspx"/>

Finding out the hard way you cannot have any of the siteMap Node elements have the same url or title...

Please note that if you are placing this custom control on the mysite the relative links will have to be changed to absolute due to the fact that they reside in different web applications.

  • Next you will have to add in the custom control to your masterpage. This can be a bit tricky.
  • Copy the OOTB navigation control "<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">"
  • Place this control in a <TR> tag right above the OOTB navigation control
  • Like in Sahil's blog post rename the DataSourceID= from in the custom control from "topSiteMap" to "xmlSiteMap"
  • You will also need to modify the content placeholder and menu ID's see highlighted items below:


Once you get it finally working your new navigation will have the following functions:

  • Tier 1: Global Navigation
    • Always Consistent
    • Not Security Trimmed
    • Manually configured on the server Via XML (I'm sure if you wanted to get tricky you could hook this up to custom list or something...)
    • Globally across site collections, web applications and even external applications if you wanted (Basically anything)
  • Tier 2: OOTB Local Navigation
    • Changes based on site collection
    • Security Trimmed
    • Configured through the UI
    • Only shows navigation within the site collection

So here is a screenshot of the custom two tier global navigation control:


Have fun customizing, and drop me a line if you have created something similar!

SharePoint Meeting Workspace: The red headed step child template...

I think we all know that building a custom design and master page requires lots of patience and open ended thinking.

The SharePoint Meeting Workspace template to say the least does not play nice with all of the other templates and master pages. These templates include the following:

  • Basic Meeting Workspace
  • Blank Meeting Workspace
  • Decision Meeting Workspace
  • Social Meeting Workspace
  • Multipage Meeting Workspace


Here is what the template normally looks like:

If you attempt to apply your custom master page to any one of these templates you will see something like this:

Note that the navigation tabs are gone and you get a message on the left saying: "There are no more meeting occurrences to select from." It also removes the function on the site actions to add or manage pages.

The issues above are caused because the controls below a not included into the regular "default.master" file. Microsoft decided that all meeting workspace site should use a different master page called "mwsdefault.master". This file is located on in the global folder on the 12 hive.

The following two controls make up the function for the custom site actions menu items

  • <Meetings:CustomToolPaneManager runat="server" __WebPartId="{E5EF4B97-0A6B-4E44-B210-813789452367}" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width=""/>
  • <Meetings:PropertyBag runat="server"/>

This control is the driver for the tabs on the template.

  • <Meetings:PageTabsWebPart runat="server" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width="" __WebPartId="{80A0AA76-9C8C-45B7-B01D-FF0F3E8CB8EC}" id="g_80a0aa76_9c8c_45b7_b01d_ff0f3e8cb8ec"/>

So what do you do now?

Well the best thing I would suggest is to take a copy of the mwsdefault.master and start adding in your customizations. You should not remove or hide any of the controls above as the functionality of the meeting workspaces will be gone.

Once you have all of your changes you will need to work with your developers on feature stapling your master page to a copy of the meeting workspace site definitions.

Monday, January 5, 2009

Comments, working now...

All, I want to apologize to all who wrote comments on my blog and never saw them published to the site. I did not know that I had a rule that stated any comment left 7 days after the published date would need approval. I have published all appropriate comments to my blog.

Again, Sorry for the delay. I will review and respond to all questions as soon as I can.


Stylize Individual Web Parts with a CEWP

The following instructions describe how to change the title bar, background color, and webpart title for one or more web parts on a specific page or site.

1) Navigate to the page or site that requires the styling

2) View the browser’s source code for the page: Page > View Source (IE7) or Use IE developer Toolbar DOM Explorer

  • Search the source using the title of the web part that requires separate styling (i.e. “News”, "Links" etc.)
  • From the “td” tag that contains the web part “title”, select the “id” from the grandparent “td” tag. For example, see the web part “title” and corresponding web part “id” highlighted below:

<td id="MSOZoneCell_WebPartWPQ2" vAlign="top">
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="ms-WPHeader">
<td title="News" id="WebPartTitleWPQ2" style="width:100%;">

  • In this case, the “id” for the “News” web part is “MSOZoneCell_WebPartWPQ2”
  • Copy the “id” value

3) In the browser, edit the page: Site Actions > Edit Page

4) In one of the web part zones, add a new content editor web part. (It does not matter what zone this is added to since the web part will be hidden once editing is complete.)

  • In the “Edit” menu of the new content editor web part, select “Modify shared web part”, and then select “Source Editor”
  • In the pop-up window that appears, paste the following code, which includes the “id” value from the source code (here we use the example value in italics):


/* Webpart Header Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpheader td{
background-color: #006699;

/* Webpart Border Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpborder{
border: 1px #FFCC00 solid;
background-color: #006699;

/* Webpart Title Text Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:link{

/* Webpart Title Text Visited Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:visited{


  • Click “Save” in the pop-up window to save the changes
  • Expand the “Layout” section in the editing pane that appears on the right-side of the browser window
  • Select the check box labeled “Hidden” to ensure that the content editor web part will not be visible to users
  • Click “OK” in the editing pane to complete editing the web part

5) Determine the web part that is to be differentiated using this new styling

  • Under the “Edit” menu of this web part, select “Modify Shared Web part”
  • Expand the “Appearance” section of the web part editing pane
  • Scroll-down to the “Chrome Type” drop-down list and select “Title and Border”
  • Click “OK” in the editing pane to save the new settings for the web part

6) Repeat step 2 and add to step 4 for any additional web parts that require this styling

7) Click “Exit edit mode” in the top right of the browser to return

8) Refresh the browser to see the styling changes made to the selected web part(s)

Note: This solution only effects the current page, and if the web part changes position in its current zone, or is moved to another zone, the custom branding will follow the web part to its new position on the page. SharePoint assigns these webpart ID's as you add each webpart to the page, so if the webpart is removed and then added back to the page the styling you might get some unexpected results.

This can be considered a quick and dirty method. There are other options that will span all pages using a particular page layout by adding a div tag with a particular class around a webpart zone for which you can set a style per webpart zone area and not the webpart itself.

Thanks and happy styling!

Friday, January 2, 2009

Presenting at SharePoint Summit 2009!

I have been selected to present at the 2009 SharePoint Summit in Montreal Canada on April 8th.

My Session: IA and Branding Process: Sketches to Wireframes to Hi-Fidelity Designs

Learn about proven methods to guide you from paper napkin sketches to hi-fidelity prototypes. Explore how to transition from each process and who is involved.

This session will entail the following:

  • Methods to gathering requirements
  • Benefits of a creative brief and Style guide
  • Understand what functional concepts are and how they can be used
  • Explore options on creating wireframes
  • Creating the Design Composition (Differences between design adaptation and custom design)
  • Building the design (CSS, Images, Master Pages, Page layouts, testing for multiple browsers and Mobile devices)

This track is designed for IA’s and Developers looking for proven methods for designing and branding their sites.

My Session Bio:

My Co-worker Paul Galvin will also be presenting as well.

Paul's Session:

Paul's Session Bio:

I hope to see you all there!