Tuesday, January 8, 2008

SharePoint 2007 CSS friendly control adapters

ASP.NET 2.0 and MOSS 2007 provide great navigation controls, but the html that is emitted when those navigation controls are rendered is not the cleanest (for example, view the source of a MOSS page containing a menu and a treeview and you will see what I am talking about). The menu and treeview controls emit a bunch of table tags, which is not a best practice. There is a desire to control the output of these controls to make your pages more css based. It would be a shame to have to write your own menu control to control its HTML output.

ASP.NET's control adapters come to the rescue. When these are configured correctly, they can convert the table tags emitted by these controls to ul and li tags. I recently tried this out for making our menu control more css based and it worked wonderfully. The caveat is that this will change your css styles for the menu totally. Try it out, this works great and making your pages more css based is definitely a best practice.

Here are a couple of good resources to get you started down this path:
1. CSS adapters white paper.
2. A nice walk through by John Ross.

12 comments:

John Ross said...

As the person who wrote the walk through you linked to on The Mossman's blog I think its important to post some followup lessons I've learned -- mainly using the CSS Friendly Adapters will cause problems with some of the pages (Manage Content and Structure is one that comes to mind).

My preferred method these days is to use the Telerik navigation controls. Its relatively easy to style, cheap, and easy to implement. SharePoint MVP Andrew Connell wrote a great white paper on using the Telerik controls and posted about it on his blog.

Àlex said...

The Telerik controls are great if your requirements are covered. The advantage of CSS Friendly Adapters is that you have full control about the HTML code of the rendered controls and you can achieve more functionality and complex styles.

sandstrom.is said...

Is there a way to use the CSS friendly control adapters in Share Point Designer Project instead of Visual studio?

Faraz said...

John,
Thank you for your comment. I am using the adapters only for the menu as of now. But you are right, I will investigate this further to find out the gotchas of this approach - will also look at the Telerik controls to see if they fit the requirements.

Lifecoach said...

Hi Faraz,
I have implemented the CSS adapter on my MOSS site, and it's working but it's really ugly.
The menus have been displayed in UL LI list just like an HTML. There is no mousover behaviour as such.
Am I missing something.
For e.g. see
http://blogs.tamtam.nl/frank/content/binary/cssFriendlyResult.jpg

Now I want them to be menus..

Can you give me some pointers/suggestions.

Cheers,
Ajay

brwalias said...

Lifecoach,

No, your not missing anything. What your seeing are unstyled un ordered list elements. You are now able to control the look and feel in a style sheet.

To get you headed in the right direction:

tons of options here: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/

and here:
http://www.13styles.com/

Enjoy!

Anonymous said...

Buy Cialis, Viagra, Levitra, Tamiflu. Get Cheap Drugs online. Buy Pills Central.
[url=http://buypillscentral.com/]Discount Viagra, Cialis, Levitra, Tamiflu Drugstore without prescription[/url]. canadian generic pills. Cheap drugs pharmacy

Anonymous said...

Additionally to, we provide ignore Viagra pharmacy, which is measure effective in exercise than other famous order Viagra Online Erectile dysfunction Viagra pharmacy online drugs.

Anonymous said...

Hello. And Bye.

Anonymous said...

...please where can I buy a unicorn?

Anonymous said...

Sorry for my post .Where i can watch more info about?

Anonymous said...

withholding punalur ulcer burdensome trade hepatoxicity farma arrive meccanica alberta implication
servimundos melifermuly