Has anyone had sucess implementing the CSS Friendly Control Adapters in their DNN projects? I have done it, but the process was bumpy and I'm not sure if there is a better way. Perhaps this post can spark some ideas and we can work the kinks out. If you follow the steps below, be sure that you are doing on a dnn dev site that you don't mind breaking if somthing goes wrong. Installing the adapters WILL change how your controls look and may change their behavior too.

My setup:

• VS 2005 Standard (shouldn't matter)
• DNN 4.4.1 Install
• Dev environment set up as Michael Washington's tutorial
• Firefox

What I did:

1. Download the VSI installer from the CSS Control website. Run it.
2. Create a New Website, select "ASP.Net CSS Friendly Website"
3. This will create a sample site. You can view the code samples here and play with the output by manipulating the css files.
   
   Note the following folders, (we'll be copying the files from there into our DNN website): CSS, Javascript, App_Browsers, and Adapters (located under App_Code)
   
   
4. Copy the above folders & files to your DNN website folder. The Adapters folder & files go under your App_Code folder and the other three go in your root.
5. Open your DNN website in another instance of VS, and build your site.
6. Create a new module and copy the menu example from SimpleMenu.aspx, located in the CSS sample project created earlier.
7. Create a module.css file and paste the styles from SimpleMenu.css, again located in the CSS sample site.
8. Create the module as you normally would and place it on a page.

Hopefully the menu will show up styled like the one in the example. The reason it shows up correctly is because the custom menu styles were placed in the module.css file. The problem is that the default CSS files (the ones located in the CSS folder we just copied) will not load if you link to them in the modules. In the SimpleMenu.aspx, there was this line:

<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />

This file simply imports all the other CSS files. This reference will get ignored when the module loads. The only way to get those styles loaded is to put them in one of the DNN CSS files that get loaded at runtime:(module.css, portal.css,  module.css etc..).

I just pasted the styles from those files in default.css and it worked! Custom styles, such as the one in SimpleMenu.css should get pasted into the module.css file.

The only other issue that I have yet to resolve is getting IEMenu6.css to load if the client browser is IE6. That file is for rendering the menu correctly in IE 6. It works fine in IE 7. Hopefully in the next release of the .net framework, these will become standard.

One tip: when experimenting with this, clear your cache often!