First of all let’s start out by defining what a data breach is. According to the ITRC a breach is defined as an event in which an individual name plus Social Security Number (SSN), driver’s license number, medical record or financial information/credit/debit card is potentially put at risk in either electronic or paper format. (ref – ITRC – Data Breaches) The information I have just listed is often known as Personal Information (PI) or in the environment I support Personally Identifiable Information (PII).

Ok, we know what a data breach is now, but so what? If you look at the list of breaches you don’t see SharePoint mentioned anywhere so why should this matter to me?

Here’s why……..

On 01 March of this year the new Massachusetts data security law went into effect and the client, customer or company you support could be held financially responsible if your SharePoint farm is compromised. The gist of the new law is that if you are storing any type of PI/PII on an individual that resides in the state of Massachusetts within your system, regardless of where the databases are located, you are required to follow the guidelines as they have been set forth in 201 CMR 17.00. Fail to do so and suffer a breach where the POTENTIAL for that information to be exposed exists and your client, customer or company risks being fined $5,000 per violation and record lost. Suppose you have 100 employees working for you in an office in Boston and your database server in Reston, VA gets hacked and you find that PI/PII related to those employees was potentially exposed, that’s only $500,000. You might want to touch up that resume!

What steps does this new Massachusetts law require of you? Let’s take a quick look at a few of the stipulations as I understand them:

• Companies must maintain a comprehensive Written Information Security Program (WISP) that includes technical, administrative and physical safeguards to protect any stored PI/PII.
• The WISP must be appropriate to the size of the business. Obviously the construction company down the road that has 20 guys working for it is going to have a WISP that is vastly different from the financial management company that has several thousand people working for it in downtown Boston.
• The law mandates encryption of all data in motion and at rest including on laptops, hard drives, smartphones, MP3 players, USB drives etc…
  • Data in motion – traveling across the network in case you were wondering.
  • Data at rest – stored on some form of storage media.
• There must be an individual or team that functions as the official data security coordinator.
• You are required to take normally accepted steps to secure your data; password protection, up to date anti-virus protection, firewalls, keep patches up to date on your server etc…

“So what!” you say, “We don’t have anyone in Massachusetts!” Maybe not, but as of this writing there are approximately 46 states that have data security breach related laws in place. Most of those revolve around what to do after the fact or after a data breach has been discovered. The new Massachusetts law is among the first to be proactive and address prevention as opposed to reaction. Conventional wisdom should lead us to believe that PREVENTING a breach would be considered a best practice as opposed to reacting to a breach after one has occurred. That being said it’s only a matter of time before states and/or the federal government wake up and see this fact for what it is and begin to move in that direction. I don’t know about you but I would like to be way ahead of that curve when it starts rolling down the road towards us.

Lo and behold there are currently at least 3 bills on the floor of the Senate or House that cover the topic:

• S.139 Data Breach Notification Act
• H.R.2221 Data Accountability and Trust Act
• S.1490 Personal Data Privacy and Security Act of 2009

What has all of this got to do with SharePoint? Well, think about how your client, customer or company is using SharePoint. Are they doing any of the following?

• Using SharePoint to manage internal job openings, applications and referrals.
  • Resumes and job applications are going to store personal contact information such as home address and phone numbers. These would be considered PI/PII
• Using SharePoint for “Open Enrollment” and managing health or retirement benefits
  • Managing health and/or retirement benefits would generally require social security numbers of not only the employee but perhaps family members as well.
• Managing Continuity of Operations efforts (COOP)
  • Contacts lists used in managing COOP efforts would generally require home phone numbers and/or addresses.
• Allowing photographs to be associated with an individuals profile
  • Photographs are considered PI/PII because they associate a piece of information (the picture) with an individuals name.
• Managing travel requests or maintaining travel profiles for employees.
  • Managing travel requests may require that credit card numbers, hotel rewards cards and frequent flyer miles be tracked. All of these would most likely include names, billing addresses, home phone numbers etc…
• Human Resources functions
  • HR could possibly be your largest focal point of concern if you manage employee records, resumes, external recruiting, onboarding documents, etc…
• Accounting
  • Payroll activities will include every piece of PI/PII you can imagine.
• Contractor verification
  • If your client, customer or company does any kind of bidding on work you may have a system in place to evaluate potential partners and/or contractors. It’s a pretty good bet that the system will include resumes of people being considered for potential positions on the contract being bid on.

This list could go on………and on……….and on……

In reality this should all be part of your governance policy but it’s probably not something a lot of SharePoint Administrators think about because it either doesn’t occur to them, the organization they support hasn’t put a governance plan in place or they aren’t fully aware of what their SharePoint farm is being used for. Another thing to think about is this……….how many SharePoint Administrators are COMPLETELY up to speed on how their SQL servers are configured, what the backup schedules/plans are, are the drives encrypted?

Looking at how individual states are reacting as more and more data breaches occur and how it appears that the federal government is beginning to get involved and I think that it’s safe to say that it’s just a matter of time before we have laws in place at both the state and federal level that address data security from a prevention stand point as opposed to being reactionary as most current laws are now. As you move forward with planning your migration to SharePoint 2010 or are going through the yearly review, assessment and update of your policies (or lack thereof) this might be something you want to take into consideration.

Some fast facts regarding data breaches between 2005 and 2009 (there were not a lot of statistics before 2007):

• In 2009 74% of all data security breaches were electronic, 26% were paper.
• In 2009 of 498 reported breaches only 6 reported that they had encryption or other strong security features protecting the exposed data.
• In 2008 reports of breaches jumped almost 46%
• Financial, banking and credit sectors were the most proactive in terms of data.
• In the government/military sector breaches have dropped almost 50% between 2007 and 2009.
• In 2008 only 2.4% of all breaches had encryption or other strong security measures in place
• In 2008 only 8.5% of all breaches involved password protected systems.

Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine (RTM)

On the page there are actually 2 downloads.

Virtual machine “A” contains the following installed software:

• Server 2008 R2 Standard Evaluation Edition x64 (running AD, DNS, WINS)
• SQL Server 2008 R2 Enterprise (includes analysis, notification and reporting services)
• Office Communications Server 2007 R2
• Visual Studio 2010
• SharePoint Server 2010 Enterprise Edition
• Office Web Applications
• FAST Search for SharePoint 2010
• Project Server 2010
• Visio 2010
• Project 2010
• Office Communicator 2007 R2

Virtual machine “B” contains the following installed software:

• Server 2008 R2 Standard Evaluation Edition x64 (joined to VM A’s domain)
• Exchange Server 2010

The evaluation period is 180 days and servers WILL require activation.

Microsoft has made great improvements in the SharePoint suite of products over the last several years. There is one area however that needs to be improved that they seem to be ignoring for some reason. I know that making dramatic improvements in SharePoint navigation isn’t as sexy as bringing in better permissions management, more robust reporting, new services that leverage Access, Excel and Visio but the fact of the matter is if your navigation sucks or is difficult to use your users will do all they can to get out of using your shiny new SharePoint portal no matter what version it is and what other features it may offer.

If you’re like me and are a true “Non-Developer” you have may have taken the time to do some reading and research regarding “Web Usability”. One of the keys that I have seen in both the books I have read and websites I have viewed is setting up a navigation scheme or structure that is consistent across the breadth and depth of your site. I personally think that this should apply to SharePoint as well and Microsoft has let us all down by not addressing the ability to easily implement a consistent navigation structure across multiple site collections.

Note that I said “easily”! If you have an architecture that has site collections with nothing but sites under the top level you could probably claim that you were able to easily set up a consistent navigation scheme. But what about those architectures that have a site collection at the top level and then have a mixture of sites and site collections that falls underneath that top level? It isn’t so easily done then.

The Problem

You have built out your environment following best practice guidelines to keep your content databases under 100GB by implementing multiple site collections. Unfortunately as part of your architecture you have identified a number of functional areas that really don’t have a requirement to be a site collection but that should fall under a top, or secondary, level site collection that might have multiple sub site collections under it. Consider the following example:

Your architecture consists of 4 top level “containers” (besides the Home site) each of which is a site collection. They are:

• Offices – This site collection consists of your corporate offices and it is pretty much a given that all the users in this group are going to use SharePoint for is calendars, some tasking and minimal document management. There is no way that any of the sites under the offices site collection will need to be a separate site collection.
• Divisions – This site collection consists of your organizations divisional offices. In the course of the requirements gathering process you have determined that at least two divisions are going to heavily use SharePoint and that there is the potential for a large amount of content to be generated in the sites for those divisions. On the flip side of that you also determine that at least two divisions will not use SharePoint heavily and can be housed as sub sites of the Divisions site collection.
• Products – This division is designed to support the business process surrounding your company’s products. Two products will generate a great deal of content for storage in SharePoint while two products are no longer in production and the sites supporting them will be used only for sustainment purposes and thus will not generate a significant amount of content.
• Support – This site collection is designed to house 3 support locations for your company only one of which, Graphics Support, will generate a significant amount of content and will require its own site collection.

So how do you build a navigational scheme that works across all site collections, sites and sub sites that is consistent?

That’s the situation I recently ran into and while the initial answer sounded pretty simple, build a custom site navigation solution; this was anything but the case (well for me anyway). There’s a lot of information on the internet about doing this but most of it is either incomplete, assumes you know something you don’t or requires programming/scripting skills (something I do not have).

What follows is documentation of how I solved this problem. I will:

1. Lay out the framework of the solution I came up with.
2. Identify to you the drawbacks of this solution.
3. Identify to you the benefits of this solution.
4. Provide step-by-step instructions on how to replicate my solution complete with screenshots.

The Solution

When I started looking into solutions for the problem I was facing I came up with three potential choices:

1. Configure navigation manually – there are at least 2 disadvantages to this choice:
   1. The sheer amount of administrative overhead involved.
   2. Designed behavior on the part of SharePoint where in those sites where you have the Publishing feature activated SharePoint will display a tab for the site you are working in to the direct left of the home tab in your global navigation tabs. You can hide that using CSS but you really shouldn’t have to worry with it.
2. Write custom code to leverage an external data source – if you’re a developer or have scripting skills this would be the way to go. A couple of the most obvious data sources to use would be a SQL database or a SharePoint list. Personally I think if you leverage the SharePoint list you’ll find that managing your site navigation might be simpler because you could delegate the ability to add sites to your site administrators.
3. Create a custom XMLSiteMapProvider – this is the solution I have come up. We will use a custom site navigation provider that reads the portal structure from an XML file stored in the _app_bin folder and renders that structure to a custom master page.

The steps we are going to follow to implement our solution are:

1. Create an XML sitemap file.
2. Edit the web.config file of our website to enable the use of our new sitemap.
3. Make 5 changes to the default.master page of our site collection.
4. Create a custom feature that will allow us to activate our customized master page on any site collection in our farm.

The Drawbacks

As with any solution or fix there are going to be drawbacks, some of the most obvious drawbacks to the solution I am proposing follow below:

1. Links in the navigation menus are not security trimmed.
2. The sitemap file is not dynamic. Anytime you make a structural change to your portal (add a new site or site collection you want included in the navigation scheme) you’ll need to update the sitemap file manually. In environments where there is rigid configuration management controls in place this could be problematic.
3. Implementation of this solution requires access to your SharePoint web front ends. This may also be an issue in those environments where access is tightly controlled.
4. The web.config file for the web application you are applying the solution to will have to be modified. If you have multiple front ends or have extended your web application you will have to maintain multiple instances of the file.
5. Customizations will not apply to pages in the /_layouts/ directory which uses application.master rather than default.master. Modifying application.master is NOT supported by Microsoft.
6. This solution is not exceptionally scalable. It works well for those environments where you might have 20 – 30 site collections.

The Benefits

As there are drawbacks there are also benefits to any proposed solution:

1. One consistent navigation scheme across your site collections and sites.
2. No .dll to be deployed to the GAC.
3. Minimal coding.
4. Can be extended to modify the quick launch.
5. Navigation the way you want it and not the way that SharePoint thinks you should get it.

You’ll have to determine if this solution is viable for your environment and/or skill set.

Step-by-Step Instructions

Create the XML sitemap file.

The sitemap file is simply an XML file that consists of three components; an xmlns reference, a group of sitemap nodes or elements and within each node (element) several attributes.

Let’s take a look at the components of the sitemap file:

1. siteMap xmlns – a reference to the sitemap schema at Microsoft.com. This file defines the elements that can appear in the sitemap file and the attributes that can be associated with those elements.
2. siteMapNode – the siteMapNode defines the navigational element, tab, dropdown or flyout, of your SharePoint architecture.
   1. Keep in mind that like HTML all of your XML elements must be “closed” for example where you have a <siteMapNode> you must also have a </siteMapNode) closing element somewhere in the file.
3. Element attributes:
   1. Title – kind of obvious that this would be necessary. This will be the test of your link in the tab, dropdown or flyout(s) of your navigation.
   2. Description – optional and it would probably be good to include attribute. Briefly describing the site here would be beneficial to any person assuming your duties at some point in time.
   3. URL – required, relative url’s do work here and using them to me would be a best practice. I try and use relative url’s anywhere I can as a matter of practice.

The following screenshot shows a portion of my siteMap code. I have provided a .zip file at the end of this article that contains the siteMap file as well as all other components of the solution.

Save the file as mainMenu.sitemap in the _app_bin/ folder of Inetpub on your SharePoint server. You could also store the file in the _layouts/1033 folder in the 12 hive if you so desired.

Adding a child node to your navigation scheme.

Inevitably somewhere along the line you are going to add another site collection or site to your farm that also needs to be added to your navigation scheme. As I mentioned one of the drawbacks to this solution is that is not dynamic. So it will be necessary to edit the sitemap file you’ve created and add a reference to your new site collection or site.

1. Start by finding the parent node in your sitemap file.
   
2. Remove the trailing forward slash in the siteMapNode element
   
3. Add a child element directly under the parent.
   
4. Close the child node siteMapNode element with closing forward slash />
   

For example if I wanted to add a site for Requisitions under my purchasing Department node I would alter my code as follows:

Before

After

Don’t forget, it is absolutely critical that you close the child node siteMapNode with the trailing forward slash as shown in the screen shot.

Now that the sitemap file has been created where to store it? By default SharePoint uses a layouts.sitemap file that is stored in the _app_bin folder of your SharePoint servers virtual directory in Inetpub. That is where we are going to store our custom sitemap file. I have seen where some people will store their custom sitemap file in the _layouts\1033 folder. This will work as well as the _app_bin folder. I have looked to see if I could find the benefits of one over the other but couldn’t find any kind of concrete evidence that would lead me to believe that one option was significantly better than the other. Maybe one of the web folks here could chime in with their .02 on that.

Edit the web.config to reference our custom sitemap

With our sitemap file created and saved to the appropriate location we’ll move on to adding a single line of code to the web.config file of our SharePoint server. This line of code will tell SharePoint the name of our custom sitemap, where to find it, what “type” or class the custom sitemap provider is using, what version, the culture, and the PublicKeyToken.

Locate the web.config file in the virtual directory of your SharePoint server and take the following steps BEFORE you do anything else.

1. Right click the web.config and copy the file.
2. Right click and paste your copy of the web.config back into the virtual directory. This will create a file named “Copy of web.config”

Open the web.config with either Notepad, Visual Studio or Notepad++. Never, ever, use Wordpad to edit the web.config. Wordpad has a lamentable tendency to replace certain characters in your web.config with question marks (?) which tens to break things and can be extremely frustrating and time consuming to fix.

1. Find the siteMap node in the web.config. It should be about line 156 and will identfiy the default siteMap provider of your SharePoint portal.
2. Directly under the <siteMap defaultProviders line you’ll see a <providers> node. Just before the </providers> closing tag add the following line of code

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

1. Save your changes.
2. Restart IIS.

The line we are adding tells SharePoint that there is another sitemap provider available, it’s name, and where the sitemap file is located.

Create the custom master page

We need to create a custom master page that will allow us to leverage our custom sitemap provider and to display flyouts off of our drop downs in the global navigation tabs. Note that I did not say “make modifications to the default.master”. Best practice; never edit the default.master, make a copy and make your changes there. This is what we are going to do.

1. Open your SharePoint site using SharePoint Designer.
2. Navigate to the default.master page. The path is _catalogs/masterpage/. If, for some reason, one or both of these folders are empty you’ll need to refresh the view. In the toolbar click “View” and then “Refresh”.
3. Find the default.master and right click > copy
4. Make sure that you do not have a folder highlighted and then right click > paste into the masterpage directory. You should now see a file named “default_copy(1).master”.
5. Double click the new file to open it. If you are prompted to check it out click OK to do so.
6. We are going to make 5 changes to this file.
   1. Switch to code view
   2. Find the SharePoint:AspMenu element in the page. In my page it was about line 113.
   3. Change the “DataSourceID to “mainMenu” which was the name I saved my sitemap file as. Note that you do not include a file extension here.
   4. Next find the MaximumDynamicDisplayLevels element and change it from the default of 1 to 4. This will allow you to display links 4 levels deep. Be aware that taking your navigation too many levels deep can adversely effect your servers performance.
   5. Next find and copy the “SharePoint:DelegateControl” node. Paste the code you’ve copied directly under the </SharePoint:DelegateControl> closing tag.
   6. In the code you just pasted in change the following 3 items.
      1. Change the ControlId to CustomNavigationDataSource
      2. Change the SiteMapProvider to CustomXmlContentMapProvider
      3. Change the id to mainMenu
7. Save the file to your desktop. I chose to call it MyCustom.master

    

The following 2 screenshots show the changes along with notes.

Create the feature to implement our custom master page

Lastly we are going to create the custom feature necessary to push the custom master page we just created across our site collections. A feature is simply a small piece of codethat adds additional functionality to SharePoint. The feature consists of at least 2 xml files, feature.xml and elements.xml, our feature will also include a folder called MasterPages.

Take the following steps to create your feature;

1. Navigate to the features folder in the 12 hive of your SharePoint server \12\template\features\
2. Create a new folder in the features folder. Call it CustomMasterPage
3. Within your new CustomMasterPage folder create another folder named MasterPages and add the MyCustom.master master page you just created to it.
4. Using your text editor of choice create the feature.xml file and add the following:
   1. Feature Id – this is a GUID or Global Unique Identifier. This can be done using Visual Studio or if you don’t have VS you can use GUIDGen.com. Each feature MUST have a UNIQUE identifier.
   2. Title – “Custom Master Pages” this is the title of your feature and is what you’ll see in the site collection features list.
   3. Description – do yourself a favor and add a description so you know exactly what this feature is being used for.
   4. Version – the SharePoint version in this case 12.0.0.0
   5. Scope – this is the scope that the feature will be deployed at. It could be Farm (the entire farm), Site (this is the Site Collection level) or Web (the site level). We’ll do “Site”
   6. Hidden – is the feature hidden or viewable by site collection and farm administrators. You could hide it and activate using stsadm if you wanted to. We are going to leave it viewable.
   7. DefaultResourceFile – my understanding that this attribute references the core.css file
   8. Xmlns – what xml schema is being used.
   9. ElementsManifest – the location of the Elemnts.xml file we will create in the next step.
5. Using your text editor of choice create the feature.xml file and add the following:
   1. ModuleName – the ModuleName element allows you to add one or more files to a SharePoint website
   2. URL – where the fileis going to be added, in this case _catalogs/masterpage
   3. Path – the location where the file is located within the file system
   4. RootWebOnly – should the file or page only be available in the root SharePoint site. In this case no.
   5. File Url – your filename in this case MyCustom.master
   6. Type – GhostableInLibrary this specifies that SharePoint store the file in a Document Library.
6. Now that the files have been created you will need to use stsadm to install your new feature. From the command prompt run the following command:
   1. Stsadm –o installfeature –name custommasterpage
   2. I always run an IIS reset as a matter of practice after I have done anything using stsadm.

Provided that your fetaure has installed correctly when you go to your SharePoint site and navigate to the Site Collection Features link in your Adminitrative UI you should see “Custom Master Pages” as one of your features. Click the “Activate” button to activate the feature (you could do this using stsadm as well if you wanted to).

After the fetaure has been activated go back to site settings and then click on Master page. Click the drop down and you should now see MyCustom.master as an option. Set both the Site Master and System Master pages to MyCustom.master and click “OK”.

Navigate back to the main page of your site and you should now see your custom navigation.

Navigation before our changes

Navigation after our changes

And that’s all there is to it. Now someone is going to say that this isn’t really a “non-developer” solution, I would argue that to a certain extent. It’s just my opinion but every SharePoint Administrator should have the ability to write some basic XML and that’s really all we have done here. One note; don’t forget XML IS CASE SENSITIVE and are the cause of most of the errors I saw when working through this solution.

Now, is this the right solution for you? Well, I think the answer there is the standard SharePoint answer when you’re taking about capabilities or requirement solutions; “It all depends”. I think that for a small to medium environment that this solution would work well. If you’re managing a large environment that has several hundred site collections and/or sites I would strongly suggest you look into the solution that Peter covers in his article. My requirement was complicated by the fact that I am not allows to take code, scripts or any kind of .NET code, off the internet and implement it without going through a long drawn out vetting process. Add to that my obvious lack of programming skills and you see what I came up with.

I hope you’ve found this solution at least interesting and hopefully usefull. If you have any questions please don’t hesitate to ask!

As promised here is a link to a .zip file that has the custom master page, my feature files, the mainMenu.sitemap file and a copy of my web.config. While you can add my custom master page to your implementation don’t try to replace your web.config with mine. Use mine as a reference.

Consistent Navigation Files

Until the next time…

CSS Best Practices (includes reference links) – these lists are primarily intended for any classes of your own that you may add as part of a customization or for better organization of your custom CSS file. Some of these are simply common sense from my standpoint, some are from Smashing Magazine and some are from Microsoft (references are noted).

From Smashing Magazine – 70 Expert Ideas for Better CSS Coding:

• Organize your CSS-styles. You can do this using comment blocks or by breaking the style sheet down into 3 or 4 specific sections (Navigation, Body, Web Parts and Headers perhaps).
• Keep style properties to a minimum. If you don’t need it and it’s already there remove it. If it isn’t there and you don’t need it don’t add it. This will be especially true in those classes where you have removed an image file. There will likely be additional properties that should be removed for efficiencies sake.
• Use a common naming system for any classes you may add. Being consistent will make your life (or your successors) much easier somewhere down the road.
• Where you’ve changed colors consider using “shorthand”. In CSS when you use a hexadecimal color notation you can write that notation in a more efficient manner by omitting every second digit. For example #000 is the same as #000000
• Any CSS classes you add MUST be unique. It is also important to know that if you are styling a class your selector will start with a period, if you are styling an Id the selector will start with a # sign. An example would be if you were attempting to style the sblink class your selector would start as follows; .ms-sblink. If you were attempting to apply styling to a specific navigational tab in the globaltopnav your selector might start as follows; #zz1_TopNavigationMenu0.

From Microsoft – How to Optimize a SharePoint Server 2007 WCM Site for Performance

• Elements should be positioned using CSS2 and not tables
• All ornamental lines, borders, background colors and -images, underlines and other decorational elements should be rendered with CSS2.
• Text should be formatted with CSS1, not with font tags.
• All style sheets should be included in reusable, centrally maintainable, and cacheable external CSS files, not as redundant code within the HTML files.

Simply common sense as I see it

• Never, ever make any changes to the core.css file. Either make or get a copy of the core.css and make your changes to the copy.
• In your copy of the core.css any classes or Ids you are not making a change to should be removed. The core.css file is some 4300+ lines of code; you don’t want SharePoint to have to run through all that code twice. By removing anything that has not been edited from your custom.css file you will make the file more manageable for both SharePoint and yourself.
• If you make a change add a comment documenting what the effect of the change is. This will help you as well as anyone that may take over for you while you are on vacation, travel or after you have moved on to other responsibilities. Aside from that most folks would consider doing so common courtesy, I know I would.
• If you have more than one custom.css file come up with a naming convention for your CSS files and stick with it. I use SiteName_Custom.css for my custom CSS files.

This is just a short list but you get the idea. We assume that Microsoft is following generally accepted best practices and make sure that any classes we add follow them as well. As I mentioned above I would strongly recommend organizing your CSS files if at all possible. I think you’ll find that it makes it much easier to locate a class you are looking for in the style sheet.

How CSS Style Sheets are applied to a SharePoint Master Page

This section is best described by Heather Solomon. Her write up is far better than anything I can put together. I’m going to add a short version of her breakdown on how styles are pulled into SharePoint and a link to her page at the end of this section. I strongly recommend taking a few minutes to read over, and understand it.

• If your master page links to a custom CSS file the custom file will be pulled before the core.css
• If your master page links to a custom css file and core.css has been unghosted for the site the custom.css will be pulled after the core.css
• If you specify your custom.css through the Administrative UI (Site Actions > Site Settings > Master Pages) your custom.css file will be pulled after the core.css. You should note that any styles defined in your custom.css that apply to _layout pages will be applied successfully.
• Any styles listed or linked to in the PlaceHolderAdditionalPageHead ASP content placeholder will get pulled after the core.css file. There are problems to be noted per Heathers article about using this approach.
• Styles listed in the master page file (not linked to but actually listed out in a set of STYLE tags) will be pulled after all css files including the core.css
• Any master pages deployed via a feature will pull the core.css after your custom.css file.
• Note that inline styles (styles embedded into the master page) will override any other CSS.

Heather Solomon – CSS Options with Master Pages

How can you apply your custom.css file?

There are a number of different ways to apply your custom.css file. One other thing you will have to take into consideration is where do you want to store your CSS files? As with anything else we have done there will be advantages and drawbacks to whichever option you choose, you’ll have to decide which option best fits your environment.

• Reference your custom.css via a link in the master page also known in some circles as “relative CSS”. The obvious drawback here is that you will be customizing your master page. That may, or may not, be allowable in your environment. One thing to take into consideration here would be how many different custom.css files are you deploying? If it’s a significant number this might not be an option you want to consider.
• Reference your custom.css file through the Master pages setting of the Administrative UI. There is a mix of advantages and drawbacks to using this method. For me the advantages outweighed the drawbacks and this was the method I chose for my most recent deployment.
  • Advantages
    • No server access is required
    • Because the custom.css file is stored in the styles library for your site collection it is also stored in the content database for your site collection.
    • You can turn versioning on in the styles library and if you manage to mess something up you do have the ability to revert to an earlier version.
    • Because files are not stored on the server itself they are easily modified or replaced.
  • Drawbacks
    • Because files are not stored on the server itself they are easily modified or replaced. This can be a two-edged sword if you don’t have good governance or change control processes in place.
    • Could be labor intensive if you have lots of sites that will use different custom style sheets.
    • Requires MOSS with the publishing feature activated. This is something I normally do anyway but there are those that don’t see a need to have the publishing feature activated unless it is absolutely necessary. For a WSS instance or a MOSS instance with no publishing activated you’ll need to select a different method of applying your style sheets.
• I haven’t tested this yet but fully intend to over the next few weeks but I think you could probably take your custom.css and convert it to a custom theme. If that’s the case while you would need server access or the assistance of your server team you would be able to push your theme to any site you wished regardless of activated features or version of SharePoint being used in your organization. More on that in a few weeksJ.

Some of the lessons I’ve learned along the way

• Working with CSS in SharePoint can, and will, frustrate you to the point of pulling handfuls of your hair out. You will find that when it gets especially frustrating the best thing you can do is put everything down and walk away for a bit. Of course that could be said of a lot of things couldn’t it? It just seems more apparent lately for me I guess.
• Document, document, document, I hate writing documentation but it is absolutely essential in this case. Several times while I was working through all this I struggled with getting something to work and when I finally did get it right found that I had neglected to add comments to my code so I would know what I had done and where I had done it. Those tend to be those “I’m not smarter than a 5^th grader” moments.
• There are going to be instances where the order of your classes WILL make a difference. You will find this to be true especially when working with modifying the behavior of your links, in particular the “Hover’” property.
• Plan ahead! Put some thought and planning into color schemes, how you’ll handle navigation, font colors and behaviors, and how you’ll structure your custom.css file.
• The Internet Explorer Developer tools are your best friend. Todd Bleeker’s CEWP script works very, very well in those environments where the IE Developer tools are not allowed but if you can get them, use them!

Article References

Smashing Magazine – 70 Expert Ideas for Better CSS Coding

Microsoft – How to Optimize a SharePoint Server 2007 WCM Site for Performance

Heather Solomon – CSS Options with Master Pages

A Little Before and After

And as promised a copy of my commented CSS file for you. You’ll need to remove/change images where appropriate but other than that it should work. Also, you should note that I have not organized this file in any way as I mention above in the Best Practices section. Nor have I removed any unnecessary code, I wanted you to see what is there by default for the most part.

 MyCustom.CSS

Well friends and neighbors that’s it for now. I don’t claim that this series is the work of a know all, end all, expert. These are my experiences documented in hopes that they will be helpful to someone else. As I mentioned early on, please, PLEASE, make sure that you test anything you pull off the web before dropping it into production.

More to come very soon…

All things considered my session was pretty well attended (I was speaking opposite Bill English, Mark Rackley and Laura Rogers, pretty steep competition) and everyone that was there was engaged, interested and had excellent questions. Unfortunately my plan to record the session and post the audio was nixed by the owners of the facility so I will not be able to post the audio files. Hopefully there will be another opportunity for me to present this session and record it for those that want it. Because I wasn’t able to get it recorded I’ll make a point of converting the session into a blog post and will get it posted by Saturday night.

In the meantime I have uploaded the slide deck and “solution” files from the session for anyone that wants them. As always, make sure you implement them in a test environment so you have a full understanding of the process.

Thanks again to everyone involved in putting on the day, a great job by all! To my old and new friends I enjoyed spending the day with you and taking home knowledge I did not possess before and finally to those that attended my session, thanks for spending an hour with me. I hope you found it entertaining and informative.

SharePoint Saturday – Huntsville Download

We’ll start by adding a header image to our main page. There are a couple of ways to do this; add the header image directly to the cells that hold the site title, the titlegraphic.gif, search boxes and “Advanced Search” link or you could customize your master page and add a table directly above those items and add your header image to that table. I don’t want to customize my master page so I am going to take the first approach. We’ll begin by hiding the existing elements of this row in the page, make some changes to the row height and then add our image.

As a reminder here is how our GlobalTitleArea currently looks.

Now let’s make the changes necessary to display a header image as a background to the site title.

1. We’ll start by hiding the title graphic image that appears at the left hand side of the header area. We’ll do that by adding a declaration telling the browser not to display the td.ms-titleimagearea class on our SharePoint page.

   

2. Now that we’ve hidden the graphic we’ll hide the site title. We’ll add a declaration to the .ms-sitetitle class telling the browser not to display that class. This will actually take care of 2 things for us, it will hide the site title and it will also hide the cell that runs across the width of the page and will show up in the middle of your header image after you add it.

   

3. The next piece is a little tricky. Once you tell the browser not to display the .ms-sitetitle class the search boxes will all re-align to the left hand side of the page. A post by Heather Solomon on her blog pointed me in the right direction (SharePoint CSS Trick: Align your Search Inputs). We’ll start by setting the width of the .ms-sblastcell, .ms-rightbodysectionsearchbox class to “0″. By default the width here is set to 100% which pushes all the search box components to the left of the page.

   

4. In order to get the search boxes back where they belong we’ll change the width setting of the .ms-sbtable-ex class to “0″ as well. In addition we are going to set the position of the search box here by using a “position” declaration and setting the “position” declaration to “absolute” and the “right” declaration to “0″. If you wanted to move the search boxes up or down you could add an additional declaration for “top: 20px;” or similar. This declaration will actually move the search boxes to the top of the page directly below the Welcome and My Site links.

   

5. In the last step we’ll add a reference to our header image. We’ll do this where we had earlier removed a reference to one of Microsoft’s background images in the GlobalTitleArea. You’ll notice that I changed the font color of the “Advanced Search” link to make it more visible against the background image I’ve added.

   

With the header out of the way we’ll go back and tie up a few loose ends. If you’ve been working through this on your own you’ve probably noticed that in some of the administrative pages or in the “All Site Content” page there are cells that have not been customized but should have been. We did change those on the main page didn’t we?

Well, we did and we didn’t. There are some separate css classes for some of the administrative pages. This is where the IE Developer tools come in really, really handy because you can’t add Todd’s script to any of these pages. Anyway, let’s get those fixed up so we’re consistent across the site.

1. If you look at the “Site Settings” page now you’ll notice that the vertical pagemargin cell we had changed way back in part 2of this series hasn’t been changed. That’s because it uses a different class to determine the color of the cell. To fix this we’ll need to make 2 changes, one to the .ms-areaseparatorleft class and another to the div.ms-areaseparatorleft class. These changes will consist of removing the background images and then setting a background-color for each class.

   

2. Now we’ll make the same changes to fix the other side of the page. The only difference will be the classes we are applying those changes to. In this case it will be .ms-titlearearight .ms-areaseparatorright and div.ms-areaseparatorright.

   

Now there may be other places that changes didn’t trickle down or classes may have changed. These are the only two that I saw that were obvious. If you do find some you should have the ability to figure out what needs to be changed now.

Next time we’ll wrap it all up and talk about how SharePoint handles style sheets, some best practices, how to deploy the changes we’ve made and some lessons I’ve learned as part of this process. Additionally I’ll provide you with a copy of my customized .css file complete with comments and markup.

As always if you have any questions or comments please don’t hesitate to ask!

Until next time…

My session was well attended and with the exception of one of those “I am apparently NOT smarter than a 5^th grader” moments went pretty well. I apologize to the folks that attended for dropping the ball on recording the session. I will get that taken care of in Huntsville on May 1^st and will post the audio as soon afterwards as I can. In the meantime you can download the slide deck, sitemap file, and CustomMasterPage feature files from the link at the end of this post. If there is something you don’t understand or can’t get to work please feel free to email me and I’ll do my best to help you out. Additionally I will be putting the session into a blog post format but that may not be until next week sometime. I’ll try and get it done before then but can’t make any promises.

Thanks again to those that attended my session, I really enjoyed it. I had forgotten how much I enjoy that kind of thing!

Remember………………..SharePoint Saturday – Huntsville on May 1^st. Registration is open now, get in before it gets full!

SharePoint Saturday – Huntsville Registration

SharePoint Saturday – Huntsville Home Page

SharePoint Saturday – Atlanta Download

Not so say I! It is possible to use the Central Administration GUI to determine which content database your new site collection will be created in. The solution is not elegant but it does work for creating site collections in new and existing content databases and does not require using stsadm.

If you follow the steps I’m going to outline you can pick the content database you want to create your new site collection in from the Web Application Management and Site Management sections of your Central Administration page. For the last 3 years I have been using the following process when I create my site collections and it works quite well.

1. Under the Application Management section access the “Content Databases” link.
2. In the upper right hand corner make sure you are in the correct Web Application. If you aren’t then change to the correct one.
3. Click the link for each Content Database you have listed under the “Database Name” heading.
4. When the “Manage Content Database Settings” page opens set the “Database Status” to “Offline” and then click “OK”. After you click ok you’ll be taken back to the “Manage Content Databases page where the database you just changed should now show as “Stopped”.
5. Click the “Add a Content Database” link and create a new content database. Do not make any changes to the “Database Status” setting. It will show as “Started” in the list of Content Databases. You will also notice that the “Current Number of Sites” will be equal to 0.
6. Navigate to the SharePoint Site Management section and create your new site collection.
7. Go back to the Manage Content Databases list and you will now see that the Content Database you just created now shows that the Current Number of Sites is equal to 1.

You have just created a new site collection in the content database of your choice.

As long as a content database is in the “Stopped” state no new site collections can be created within that content database. You can still create sites, or more accurately I suppose “Webs” but not site collections.

If you had 15 content databases in the list and all were in the stopped state and you tried to create a new site collection SharePoint would throw an error message (that doesn’t say anything about there not being a content database available to create the new site collection in). Pick the content database you want your new site collection to reside in, set the state to “Started” and then you will be able to create the site collection in the database you want.

I’ll update this with screenshots as soon as I finish putting the final touches on my presentation for SharePoint Saturday in Atlanta next weekend and Huntsville on May 1^st.

There’s a very strong lineup of speakers scheduled including Gary LaPointe, Todd Klindt, Todd Bleeker, Lori Gowin, Becky Isserman and many others. It should be a highly informative and entertaining day!

I’ll be there presenting a session on Implementing a Consistent Navigation Scheme across Multiple Site Collections for “Non-Developers”.

Hurry up and register if you’re in the area. Spots are filling up fast!

I would like to mention that I have made a change in how I am identifying the classes I am making changes to. If you read the Intro Article to this series I recommended a script that Todd Bleeker had written some time ago that can be embedded in a CEWP and will identify the classes of your page when you hover your mouse cursor over a specific location on the page. After reading some comments by Eric Schrader on Part 3 of this series I decided I would give the developers tools for Internet Explorer another try. I had tried it before at work but apparently there are some security settings on our workstations at work that prevent it from working so I went with Todd’s script at the time. After trying the IE Developers tools at home I would strongly suggest you try to use them if at all possible.

Now, with all that said we’ll move along to the important part of today’s article. We’re going to start by working with the navigation tabs for our site. If you look at these you’ll notice that I have made a couple of changes to the tabs and you should be able to see the drop down arrows to the right hand side of several of them. There are a couple of reasons for that and I’ll make sure to point those out as we get to them. Before we do that a quick look at the top navigation tabs before we make any changes to it.

1. Our first change is going to be to change the background color of our tabs. As with many other classes we have seen throughout this series we will need to remove a background image before we can set a background color via .css so we’ll locate the .ms-topnav class and remove the background-image declaration by setting the url portion of the background-image declaration to “none”.

    

   

    

2. Now that we have made the appropriate changes you can see that the background color of the top navigation tabs did indeed change, with one exception; the “Portal Home” tab did not change. The other thing you’ll notice is that the font color of the navigation tabs did not change either. Let’s fix both of those things. First we’ll make two additional changes to the .ms-topnav class, we’ll change the color declaration and add a font-weight declaration.

   

3. Now to fix the background color, font color and font weight of the first tab we’ll make 2 changes to the .ms-topnavselected class and 1 change to the .ms-topnavselected a{ class. First we’ll remove the background-image by setting the url to “none” again, then we’ll change the background-color declaration to set our background color. Once we have done that we’ll change the color declaration of the .ms-topnavselected a{ class to the font color of our choice. You should be able to see that I have inverted my color selection for the font and background so the selected tab displays differently than any other tab.

   

4. As I mentioned earlier I changed the tabs a little for a couple of reasons. One is that I wanted to make sure we talk about how to make changes to the drop downs using CSS and the other is for an upcoming article I am writing and presentation I’ll be doing at SharePoint Saturday – Atlanta in a couple of weeks. So in the following screenshot you can see that none of our colors for backgrounds or font colors have been changed on the drop downs or when we hover our mouse over a navigation tab. Let’s look at the hover aspect first and see what we can do with that. In order to make our changes we’ll have to find the .ms-topnavhover class and remove the background-image and then we’ll change the background-color declaration to fit our needs. In order to change the font color of the cell when we hover a mouse cursor over it we’ll change the color declaration of the .ms-topnavhover a{ class.

   

5. Now we’ll make the changes necessary so that our drop down menus show the background color we want. Keep in mind that there are really two states we are looking at here, the “Hover” state for when a mouse cursor hovers over a link and the “Static” state where the dropdown cell displays with no interaction from the user or the mouse. We’ll change the “Static” state first by changing the background-color declaration of the .ms-topnavflyouts class. We’ll also change the font color and weight here.

   

6. Next we’ll change the “Hover” state of the drop down menu so that it shows a white background and keeps the dark green font color and bold font-weight we want. We’ll change the background and font colors in the .ms-topnavflyoutshover class. The font-weight will propagate from the .ms-topnavflyouts class.

   

7. Now here we run into a bit of a problem. If you look at the following screenshot you’ll see that our drop down menu shows a blue box to the far right hand side of the cell. I had originally stated that the only way I could find to fix this problem was to make some changes to the master page. Apparently I need to work on my “Google” skills as it was pointed out by Ben (no last name given or I would give better credit for the answer) that the solution could be achieved in .css and had been blogged about by Shane Perran (Customizing the MOSS 2007 Drop Down Menu).

   What we’ll need to do is make some additional changes to the .ms-topnavflyouts a { class, we’ll add a color for the font, change the width declaration to a percentage rather than a static value and remove the min-width declaration.

   

    

Well now that we have the top navigation tabs displaying to our liking. Let’s take on the Site Actions Menu. It should be noted here that making any of the following changes will affect all menus throughout our SharePoint site, not just the Site Actions menu.

1. True to form we will need to remove another image before we can make any changes to the background color of the site action menu. Let’s find the .ms-siteactionsmenu div div div { class and remove the background-image url and then setting the background-color attribute to the color of our choice.

   

2. Next we’ll change the background color the Site Actions Menu displays when a mouse cursor hovers over it. We’ll do this by removing the image from the .ms-siteactionsmenu div div div .ms-siteactionsmenuhover class and setting our background-color declaration. It should be noted here that if you wanted to you could also change the border color and weight if you wanted to. I chose not to do this in this particular case.

   

3. Now we’ll change the font colors of the Site Actions Menu labels (Create Page, Edit Site, etc…). We are going to do this by adding a color declaration to the .ms-MenuUILabel, .ms-menuuilabelcompact class. If you look at your copy of core.css you’ll notice that there are two additional classes with the two here both of which are appended with RTL. These are classes that are specific to implementations where text is read from right to left. Also, in this example you’ll notice that one class ends in “compact”, this class is for menus specific to web parts, lists and libraries etc…

   

4. I want to change the font color of the descriptions of my menu items so next I’ll change the color declaration of the .ms-menuitemdescription class. Additionally if you wanted you could change the font-family, font-weight, font size etc… in this same class.

   

5. What I’d like to do now is change the background of the site actions drop down menu. If you look at that menu you will see that there are really two parts to it. There is the main table which contains all the item labels and their associated descriptions and there is a vertical column on the left hand side of the menu that holds any images associated with the items being displayed. We could change that main body, or right hand column, of the menu first by changing the color declaration of the .ms-menuUI, .ms-menuUILarge, .ms-menuUIRtl, .me-menuUILargeRtl classes (note that these are all grouped together in the copy of the core.css file we are modifying) but I cannot for the life of me figure out how to set a background color for the column that runs vertically on the left hand side of that menu. If you look at everything else we have done you would think that there is an image there but I have tried every combination of removing images and adding background-color declarations to no avail. So we’ll go with a single color for the background of our Site Actions Menu drop down. We’ll do that by adding a background-color declaration to the .ms-MenuUIPopupBody TABLE class.

   

Here’s a screenshot of our SharePoint home page with the modified .css file applied. It still looks like SharePoint but at least it’s looking like what we want rather than what Microsoft gives us. Next time we’ll add a banner to our home page and make a few changes to classes that aren’t displaying on the main page, but that do need to be modified so that we have a consistent look across the entire site.

I hope you have found this useful! As always if you have any questions or comments please let me know.

Until next time…