Thursday, October 30, 2008

My Hats: The roles that I play

Like many of you out there, you have more then 1 hat. I have set a goal for myself to have a good understanding of all aspects of consulting and SharePoint with an addition to a few Specialties.

So here are my hats, drop me a comment with yours.

  • Senior Consultant: Attend sales calls, proposal creation, requirements gathering, knowledge transfers, etc..
  • SharePoint Administrator: Creating, Configuring, and Troubleshooting SharePoint systems.
  • SharePoint IA (Information Architecture): Taxonomy, Wireframe's, Layouts, Navigation.
  • SharePoint Branding: Visual Design, CSS, Photoshop, Master Pages, Page Layouts
  • SharePoint Governance: Gathering, Defining, and Delivering tailored plans. Also includes Communications, Vision, and Road Maps.
  • Mentor/trainer/Contributor: Help contribute to the community and increase productivity and delivery standards.
  • SharePoint Application Migration: Help analyze applications and function for migrations.

Monday, October 27, 2008

SharePoint Governance Meeting Breakdown

One of the things I have noticed is that if you throw out the word "Governance" you have some people say they don't have it but think it might be useful, and others who just run for d-hills. Its a normal reaction for people to not want restrictions or other people telling them how to use a system. But all in all it's best to have one.

Within this post I would like to break down some of the common elements that you might see in a SharePoint Governance Plan. Hopefully this will make it easier for scheduling meetings and for getting everyone on the same page.

I have broken out the following meetings into 4 sections: In my previous post about governance I stated that these plans are basically 1/2 Roles and Responsibilities and 1/2 Policies and Procedures. Please note that the time dedicated for each one of these meetings are estimations and should not be taken as written in stone.

  • Meeting #1: Overview
  • Meeting #2: People
  • Meeting #3: Support
  • Meeting #4: Policies/Procedures

Meeting #1:  Overview

Date/Time Meeting Topic(s) Proposed Resources
~2 Hours

Overview of Governance Checklist/Base Document
The primary objective of this plan is to establish the creation of a governing body for the usage and management of the SharePoint environments.

Core SharePoint Team
Business Units
App. Administrators

Meeting #2: People

Date/Time Meeting Topic(s) Proposed Resources
~2 Hours

Roles & Responsibilities / Locations
The SharePoint environments will be managed by two types of groups made up of smaller teams: a strategic group and a tactical group.  Regardless of the title, each team has a distinct role with distinct responsibilities. 

  1. Core Team (PM's, Business Owners, Administrators)
  2. Infrastructure
  3. Service/Help Desk
  4. Application Administrators
  5. Application Developers
  6. Business Units (Owners, Contributors, Members)
  7. Trainers
  8. Business Analysis

Core SharePoint Team

~1 Hours

Governance Communication
Communications will include the type of release, schedule, impact, and list of new or changed Web Parts.

Core SharePoint Team
~.5 Hours

Definition on where users get training, and in what format.

Core SharePoint Team
Business Units

~2 Hours

Security / Permissions
Defining policies around who can grant permissions and to what level.

Core SharePoint Team
App. Administrators

Meeting #3: Support

Date/Time Meeting Topic(s) Proposed Resources

Responsibilities for relevancy settings expectation, Define Content Sources to be indexed, Usages of Keywords and Best Bets.

Core SharePoint Team


Release Schedule
Schedules for Bug Fixes, Major Minor Releases. Dev, QA, Production Cycles and who signs off on it.

Core SharePoint Team
App. Administrators
Application Developers


Service Level Agreements (SLAs)
Time estimations for site creations, Site Quotas, Escalation procedures, and Resource Availability

Core SharePoint Team
Service/Help Desk

~.5 Hours

Policies around Who, and what is required for testing. Mechanisms for testing feedback, and references to test plans

Core SharePoint Team
Business Analysis

Meeting #4: Policies/Procedures

Date/Time Meeting Topic(s) Proposed Resources

Site Policies
Defining Policies for some of the following: Templates, Upload sizes, Document Retention's, Document Management, Auditing, and Logs.

Core SharePoint Team
App. Administrators
Business Units


Site Provisioning
Defining what metadata should be captured during the creation of a site, branding, quotas, Charge back models, and naming standards.

Core SharePoint Team


Site Use Confirmation & Deletion
Policies around site monitoring, usage, and retention.

Core SharePoint Team
App. Administrators


My Sites
List of Features that will be enabled and for which users.

Core SharePoint Team
Business Units


Change Management Process
Definition of change request process, and issue ticketing.

Core SharePoint Team
App. Administrators
Service/Help Desk


Deployment / Customization
Policies around 3rd party webparts, Customization software (Visual Studio, SharePoint designer), Source Code Repositories, and Coding standards.

Core SharePoint Team
App. Administrators
Application Developers

Friday, October 24, 2008

A fix for the annoying line below the Main Navigation in publishing sites

There are some things in SharePoint that you just have to take a second to shake your head in disbelief on why it was built that way. In most cases if you have been working with SharePoint as long as I have your perception on what is normal is a little skewed... To this point on many of my designs I have worked around this little gem. In most cases it does not effect the designs or I could create a simple fix for it.

One of the functions of a publishing site the is not available for a WSS site is the  "Page Editing Toolbar".


This toolbar is only suppose to be visible if you either click on Site Actions > Edit page, or Site Actions > Show Page Editing Toolbar. This is technically not the case. If you look at the screenshot below you will see that there is a 1px high by 100% wide background color of #79a7e3 from the toolbar showing through into the design in normal mode: Normally you would think this would be a border bottom to the main navigation but it is not.

imageWhat I normally do is to take that "ms-consolemptablerow" class and just change the background color from #79a7e3 to "transparent".

This is especially important for designs that are very simple and do not need that extra line below the navigation.


Once you use the following css, the line will be removed.

background-color: transparent;

You might ask yourself well how will this look if I edit the page and show the toolbar? Well this is where you start scratching your head... It actually is hidden from view when the toolbar is visible...

Try it for yourself, make the background red and view the page in non-edit mode, and then either view the toolbar or edit the page and see what happens... Its gone like Magic.

BG Red (Non Edit Page) BG Red (Edit Page)
image image

Go figure...

Benefits of VMware Workstation for Branding

Just because I work for EMC does not mean that I have to use VMware over Virtual PC or any other Virtual OS software. I just find VMware very easy to use.

VMWareSnapshotsI have been using VMware for about 4 years now for all of my branding projects. I store them on an external drive and back it up frequently. This allows me to take all of my work on the road or to any client site as needed. As you can see from the screenshot on the left I normally start all of my projects from a base vanilla image of SharePoint. I have blurred out some of the names to protect my clients names.

On this image I have all of the tools I need to create my branding masterpieces. (SharePoint Designer, Office 2007, IE Developer Toolbar, and Visual Studio)

The great thing about VMware is that I can always go back to any of my past projects and make edits or changes as needed. Say for example you finished up a project about a month ago and you are knee deep into another project. When all of a sudden you get an email that there was this weird bug that needs to be fixed. All you would have to do is save a snapshot of your current project and open up the snapshot of the old project make the fix and you are done.

I guess the trick is to remember to save those snapshots. They really don't take up that much room on your drive.

If you have not tried out VMware you can try an evaluation copy here:

Thursday, October 23, 2008

Creating a Center Justified Fixed Width Design

If you have ever had the task of creating a SharePoint Design with a fixed width that is centered on the page here is a post that might help you. (Sorry about the length...)

In your alternate stylesheet add the following classes and properties:

text-align: center;
padding-top: 20px;
width: 980px;
border: 3px #006699 solid;
border-bottom: 0px #0066699 solid;
width: 100%;

Here is an example of what the results of the code above would look like:


Simplified HTML from OOTB SharePoint

        <TABLE class="ms-main">

Basically if you look at the the simplified SharePoint's html and Classes above you will notice we are simply applying a light background color, Top Padding, and Text-Aligning property to the <Body> tag. This helps center the site, and brand it as a container.

As for the "ms-main" class we are setting the width of the site to be 980px (you can set this to what ever you like but If majority of your users are all 1024x768 or above I would recommend using this size.) I have also added in a border to help contain the site and a background color of white, so when classes that do not have a background color specified do not show the gray <body> background.

The reason why I needed to add the #mainTable class with a width of 100% is that there is a issue with the Web part picker that when you click on Add a Web Part it uses the class of ms-main and since that class now has a fixed width it does not display properly. See screenshot below: Notice you cannot see the "advanced web part gallery and options link or the ADD, and Cancel Buttons... To see them you have to expand the window. (Not a good experience for your users)


So by using the #mainTable class properties above to set the width to 100% you get the correct display of the Web Part Picker.

imageI guess the way the webpart picker works is that there is a masterpage that lives in the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS" directory called "pickerdialog.master" and in this master page there is the following html:

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%" id="mainTable">

I have simply taken the ID of that table to fix the issue with webpart picker. The reason why this works is that on the default masterpage this ID is not present.

If you dive deeper into the file there is a content place holder called: <asp:ContentPlaceHolder id="PlaceHolderDialogBodySection" runat="server"/>

The file that defines this Content Control  is located in the same directory called "webpartgallerypickerpage.aspx". This page has the classes that define the look and feel of the Webpart selection but not the outside container of the picker. The outside shell is controlled by the Master page listed above.

Sorry about the rant on the Picker but it is very important to know about how classes are shared across many different types of pages. That is why it is always a really good idea to make sure you dedicate enough time for testing!

Wednesday, October 22, 2008

Example: SharePoint Branding Install Instructions

After all branding files have been created we as designers sometimes don't get the option to install and implement the visual design ourselves. So the creation of an Install Guide can be important in two ways.

  1. Ability for the site owner/Administrator to have a back up guide on how to re-apply the visual design in case of a Disaster Recovery.
  2. If someone other than the creator of the branding files needs to apply the branding due to security reasons/Location.

Below are some install instructions for a site with the following:

  • Publishing Site
  • Custom Master Page
  • Custom Page Layout
  • Custom CSS
  • Custom Images

Step 1: Enable Publishing Feature:

  1. Enable the Office SharePoint Server Publishing Infrastructure Feature for the top level site collection.
    • Click on Site Actions > Modify All Site Settings
    • Click on Site collection features
    • Make sure the "Office SharePoint Server Publishing Infrastructure" is Active
  2. Enable the Office SharePoint Server Publishing for the site.
      • Click on Site Actions > Modify All Site Settings
      • Click on Site features
      • Make sure the "SharePoint Server Publishing" is Active

Step 2: Images:

  1. Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)
    • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
    • Copy over the “XYZ_Images” folder.

Step 3: Styles:

  1. Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)
    • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
    • Copy over the “XYZ_Styles” folder.

Step 4: Upload Master Page and Page Layout:

  1. From the top level site collection do the following:
    • Click on Site Actions > Modify All Site Settings
    • Click on “Master pages and page layouts”
    • Upload both the “XYZ_Custom.master” and “XYZ_PageLayout.aspx” files. Make sure these files are Checked in as a major version, and Accepted if approval is required.
    • Change the XYZ_Custom.master file properties to the following:
      • Content Type: Publishing Master Page
    • Change the XYZ_PageLayout.aspx file properties to the following:
      • Content Type: Page Layout
      • Content Type Group: Page Layout Content Type
      • Content Type Name: Welcome Page

Step 5: Apply Master Page and Alt CSS:

  1. From the top level site collection do the following:
    • Click on Site Actions > Modify All Site Settings
    • Click on “Master page”
    • Choose the “XYZ_Custom.master” for both the Site Master Page, and the System Master Page.
      • Check off the boxs to reset all sub sites.
    • At the bottom of the page click on Specify a CSS to be used… and paste in the following path:
      • /_layouts/1033/styles/xyz_styles/xyzstyle.css
      • Check off the box to reset all sub sites.

Step 6: Apply Page Layout:

  1. From the top level site collection do the following:
    • Click on Site Actions > Edit Page
    • In the Toolbar click on the “Page” button then “Page Settings”
    • Under Page Layout section choose “xyz_PageLayout.aspx” from the drop down

Drop me a note if you found this useful!

Tuesday, October 21, 2008

Knowing the basics of CSS (Cascading Style Sheets)

If you want to know more about CSS and how to use it, there are many great resources out there that can help you get started: I would start with

Here are the basics that you will use:

selector {property: value;}

External Style Sheet - (Added within the <head> tags)
<link rel="stylesheet" type="text/css" href="style.css" />

Internal Style - (Added within the <head> tags)
<style type="text/css">
selector {property: value;}

Inline Style- (Added within the <body> tags)
<tag style="property: value">

Or use the following table with some of the most basic Properties. I am using the .MS-Main class as a reference for all of the examples below.



Other Values




background-color:  #000000



background-image:  url(imgname.gif);




background-position:  top left;

top center
top right
bottom right
x% y%
xpos ypos
(Many Others)


background-repeat:  no-repeat;



background-attachment: fixed;






border:  1px #000000 solid;


Element Position and Visibility




Note:  You will never use display none for the body of you website.

display: none;

(Many others)


visibility: hidden;



position: relative;
top: 10px;
left: 10px;


Heights and Widths




height: 400px;

length (px)


width: 980px;

length (px)

Fonts and text treatments




Font-family: arial, sans-serif;

Times, Serif
(many Others)


Font-size: 12pt;




Font-style: italic;





Font-style: bold;

(Many Others)


Text-align: center;



Text-decoration: underline;



Line-height: 20px;

length (px)

Spacing of Elements




Padding: 20px;

(Many Others)


margin: 10px;

(Many Others)





Note: you apply this pseudo class after the class name to achieve a hover state effect.

.MS_Main:hover {
Background-color: #CC0000;


Note: You can make a class’s opacity to give it a transparent look.

.MS_Main: {
-khtml-opacity: 0.5;
opacity: 0.5;

!Important tag

Note: Sometimes your css will not override hardcoded inline styles or ids so you can simply force the style with the !important tag.

Background-color: #CC0000 !important;

Differences between Classes and ID's

A class is referenced in the HTML as the following:
<td class="ms-main"></td>

Notice the class does not have the "." period in front of it. To add style to this class you would use the following syntax:
.ms-main {color: red;}

A ID is referenced in the HTML as the following:
<DIV ID="ms-main"></DIV>

To add style to this class you would use the following syntax:
#ms-main {color: red;}

So if you can remember that Classes use (.) periods and ID's Use (#) Pound signs you should be golden.

Thursday, October 16, 2008

Pimp My Portal Theme

I have been in a giving mood lately, so I thought I might Package up my Pimp My Portal Theme and distribute it out to the masses.


I have included the install instructions within the zip file called Read Me Install Instructions.txt and all of the support files here: Download

This theme comes in really handy when April 1st comes around...
Hint, Hint, Wink, Wink...

And yes, if you have animations turned on in your browser settings you will get an extra special surprise with the hopping car. Old School at its best.


Tuesday, October 14, 2008

OOTB SharePoint Layered Photoshop File

I have created a Photoshop layered file, based on the OOTB SharePoint look and feel. This file includes the following:

  • Nested Folders
  • Labeled Layers
  • Editable Text
  • Exact Font Colors and Type
  • Separation of background elements
  • Resolution set to 1024x768


You can download this file here: Download


Write me a comment if you find this useful!

Monday, October 13, 2008

Brand your site by using: Features, Site Definitions, and Custom Master Pages

I will walk you though a few steps to implement your branding by using custom Site Definitions, Master Pages, and Features.


Place all modified images in a new folder in the following directory

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\Custom


Create a separate CSS file and place it in a new folder in the following directory.

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\Custom

Application Master Page: *Modify only if you want Farm Wide System pages to have a consistent look and feel.

Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS
  • Add a <link type="text/css" rel="stylesheet" href="" /> in the head of the Application.Master to your alternate stylesheet.

Site Definition:

Go to the following directory on the server (if there are more than 1 web server make sure this is done on each)

  • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\SiteTemplates
  • Make a copy of the “STS” folder and re-name it to something like "CUSTOMSTS".
  • Go to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\1033\XML
  • Copy the “WEBTEMP.XML” File, Re-Name it.
    (Ex: WEBTEMPCUSTOM) and change all references from STS to CUSTOMSTS. This post does not effect any of the MPS or Meeting workspace sites. So delete all Templates that refer to MPS.

Create Feature:

I will refer to this post for creating this part of the process:

Install Feature:

Open up a command prompt

  • Type the following:
  • “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN\stsadm.exe” –o installfeature –filename CUSTOMSTSMasterPage\feature.xml

Perform an IISREST:

Open up a command prompt and type “IISRESET

**** Make sure the permissions that are set to that new folder are the same as the original or basic users will get prompted for authentication because they don’t have permission for the images/styles ****

Delete all temporary internet files from your browser and then refresh the page

Here is a diagram that explains how this all works:


Thursday, October 9, 2008

Functional SharePoint Branding Style guide

As part of our normal delivery on branding projects we usually supply a SharePoint style guide. This document is intended to be used by site owners/developers to support the branding once the project is complete. I have created many variations of this type of document, What I find really helpful for the consumers of this document is to provide some of the following:

Branding Requirements: Example

# Properties
1 Branding will be applied at the site collection level
2 Any Changes to branding (CSS, Images) will automatically get updated to the site. Admin will not have to force or re-apply styles
3 When a sub-site is created, it will automatically have branding applied.
4 All _layout application pages will have branding as well.

As we all know there are many ways to add lipstick to the pig, so what I would suggest is to add the following as well: Make sure you work closely with the site owner and educate them on the pro's and Con's of each method.

Write in the implementation method related to those Requirements and how they will be met: Example

# Met
Approach Known Issues
2, 3, 4

Modify Core Server CSS File:
Including Custom CSS at the end of the Core.css file on each one of the web front end servers

This will be applied to all sites, sub-sites, application pages, and My Sites. However if another application needs to have their own branding it will have to override the custom CSS. All default files will need to be backed up in case of service pack updates or upgrades.

*For the first release this would be recommended as the best method.

2, 3, 4

Modify All Core Server Master Pages:
Adding a CSS Reference to all major master page files on the server. Application.master, default.master, simple.master

Same as modify core CSS file. (This approach is not a best practice)
2, 3

Modify Server Default.Master:
Adding a CSS Reference to the server side default.master

This will not modify the system pages located in the _layouts pages.
1, 2, 3, 4*

Custom Site Definitions and Ref. Alternate Style sheet:
Create Custom Site Definitions, reference Custom CSS file in all Default.aspx pages, and Reference an alternate CSS file at the top level site collection.

This method meets all of the required elements but the following is a known issue

*The Alternate Style sheet will have to be applied to every top level site collection and not all system pages will be branded…

1, 2, 3

Custom Site Definitions
Create Custom Site Definitions, reference Custom CSS file in all Default.aspx pages.

This method will not brand system pages.
1, 2, 4

Custom Master Page within UI and Ref. Alternate Style sheet:
Create custom Master page and store it in the Master Page and Page Layouts Gallery with reference to Custom CSS file on the server. At the top level the alternate Style sheet will need to be referenced within the UI.

This approach is the most flexible and is the best practice for brand implementations per site collection. However the custom master page will have to be uploaded and applied for every site collection. When new WSS sites are created the brand will not be applied automatically
1, 2

Custom Master Page within UI
Create custom Master page and store it in the Master Page and Page Layouts Gallery with reference to Custom CSS file on the server.

This approach will not touch any system pages.

Custom Theme
Create a custom theme and apply it to each site.

This approach is defined per site and cannot be pushed across all sites. If design is modified it will not be visible until an IISREST and the theme is removed and then applied again.
1, 2, 4

Alternate Style Sheet
Reference the Alternate Style sheet at the top level site collection.

This approach does not get applied when a new site is created.

The last but really useful thing that I started to add to my Style Guide and CSS is Zone Numbers and Comments.

I will use my personal favorite design that I have created as an example: Pimp My Portal...

Zone 1:

Preview Main Classes
image .ms-globalbreadcrumb
image .ms-globallinks,
.ms-globallinks a

Zone 2:

Preview Main Classes
image .ms-globalTitleArea

image #SRSB

In the Alt. Style sheet I would provide the following comments to match up the zones: This allows an easy way to find the modified classes.

/* Zone 1: Top Navigation Styles */
background-image:none !important;
background-color:transparent !important;
border-bottom: 0px #2d5696 solid;
padding:3px 10px 0px 10px;

/* Zone 2: Global Title Area */
background-position:right top;
background-color: transparent;
height: 63px;

/* Zone 2: Search box Positioning */
    padding-top: 15px;

Some of the other parts of the SharePoint Branding Style Guide would include:

  • Approved Logos
  • Approved Corporate Color Palette
  • Image and CSS Locations
  • Installations Instructions
  • List of Modified Images