I often talk about the benefits of using Firebug for Firefox in the MSDN Design and Customization Forums. Rather than try to type out a long winded article on why it rules, I found a video that should help to convince non believers that it is truly superior to the IE Developers Toolbar:

Firebug 1.0 Beta Screencast by Jesse Newland

 Takes a little bit of time to download the video, but its worth it.

One of biggest selling points for SharePoint 2007 is that it is built on top of ASP.NET 2.0.  That means, that if you create a design that will work in ASP.NET 2.0 it will work in SharePoint 2007 right?  The short answer is yes!  But the big question is “How do you do it?”  As we were trying to recreate our design concept for an Internet-facing website in SharePoint, we were quickly able to create a new master page and get our page very close to our concept.  However, styling the navigation proved to be a challenge.  If you view the source for the default navigation that is rendered in the browser you’ll notice that it is full of tables.  Very messy indeed!  There had to be a better way – CSS Friendly ASP.NET 2.0 Control Adapters seemed like the answer.

Using a post from one of the developers at Tam Tam) http://blogs.tamtam.nl/frank/PermaLink,guid,aad39854-4f7d-4666-8a0a-0fc02f3cd01b.aspx) from back in August 2006, it provided a good start.  But if one were to follow these instructions to the letter, they will run into a problem (which I’ll talk about later).  This post will repeat many of the steps outlined in this original post, but will provide additional detail about getting the CSS Friendly ASP.NET 2.0 Control Adapters to work.

1) Download and install the ASP.NET 2.0 CSS Friendly Control Adapters (http://msdn.microsoft.com/vstudio/eula.aspx?id=%20096D9643-2597-4a3b-82E3-8863145E4A3D)

(NOTE: I had some trouble with the install and had to select all of the content items for install otherwise it didn’t work.  Don’t quote me on that, but that’s what I had to do).

2) Once you’ve installed the Adapters, open Visual Studio 2005 and create a new Web Site (File > New > Web Site).   If the install was successful, you should have two new options under ‘My Templates.’  Select ‘ASP.NET CSS Friendly Web Site’ and specify the location where you want to save the web site, and select the language.  I’ve only tried Visual C# so I can’t validate these steps for Visual Basic.

3) Now that you’ve created a Web Site, you’ll need to create a new Project (File > New > Project) based on a ‘Class Library.’ 

In your new Project, you’ll need to copy some files from the Web Site that you created and saved in Step 2.  To do this, go to the project name in Solution Explorer, Right-click, then select Add > Existing Item.  Browse to the location of the Web Site saved previously and select all of the files from the App_Code\Adapters and App_Browsers folders.

You’ll also need to add references to System.Web and System.configuration.

4) Sign and Build your Class Library.

5) Copy the .dll that was created when you built your class library into the GAC (C:\Windows\Assembly).  This will register the .dll.

6) You may have noticed a file called ‘CSSFriendlyAdapters.browser’ that was added to the project.  Open the file and modify it so that it looks like this:

The final step is to go to ..\12\CONFIG\compat.browser and comment out the final four browser tags (ids: InfrawareSamSung, InfrawareLG, InfrawareSKY, InfrawareMotorola).  You’ll also need to make the change to compat.browser files in any SP sites in IIS that have been created previously (C:\Inetpub\wwwroot\wss\VirtualDirectories\\App_Browsers). 

That’s it!  It’s just that easy! 

A few final notes.  You’d have to make these changes on any web server that you plan to run the controls on.  You’d just have to drop the .dll into the GAC and modify and install the .browser files. 

And lastly – since nothing in SharePoint can be easy here’s the bad news.  If you try adding another line to the .browser file to enable the CSS Friendly Tree Control at first glance everything will work fine.  But if you try going to Site Actions > Manage Content and Structure you’ll get the dreaded SP error message (this is where the rollback method comes in handy!).  We are still in the process of trying to crack this nut, but as of now it looks like we are stuck.  If and when we find a solution we’ll post about that.

A big thanks to Bernie Johnsen for helping to get this working! 

-John Ross