Telerik Visual Style Builder for ASP.NET public preview

This is an exciting week to be a web developer. It's a really exciting week if you're a web developer working with the RadControls for ASP.NET AJAX. Today we unveiled the long, long desired (dare I say dreamed of) tool that enables you to visually design custom skins for the Telerik RadControls for ASP.NET AJAX. Let that sink in for a minute. You no longer need to learn the CSS of the RadControls, or pop-open Photoshop, or call that "mythical" designer in your shop to create a custom skin for your RadControls that matches your site's look-and-feel. With the simple, web-based Visual Style Builder, you can have a custom skin ready to go in minutes. Here's how it works:

1. You visit the hosted Telerik Visual Style Builder tool (why should you have to install desktop software to design a skin for the web)
2. Decide if you want to "Customize a Custom Skin" or Design a New Skin (the typical choice)
3. On the next screen, you do three things:
1. Give your custom skin a name
2. Select the "base" skin you'll customize (from the 12 Telerik common skins)
3. Select the controls you want to generate custom skins for
4. Next, you'll be presented with tools to customize each control skin (including the gradient images in the skins!)
5. After applying changes to each control, be sure to press the "Apply Changes" button (switching controls without clicking this will lose your changes)
6. When you're done customizing, click the "Download" button on the upper right of the page
7. Save the ZIP archive that contains everything you need for your custom skin and copy the files to your web project's App_Themes directory
• If you are not using App_Themes, you will need to manually add the CSS resources to your page by adding CSS <link /> tags to your page head
8. Finally, set the EnableEmbeddedSkins property on your RadControls to "False" and set the Skin property name to your custom skin name
• TIP: If you want to apply your custom skin to your entire app, add these keys to your web.config AppSettings: <add key="Telerik.Skin" value="YourCustomSkinName" /> <add key="Telerik.EnableEmbeddedSkins" value="false" />

It's really a very cool tool. All of your colorization changes not only effect the CSS colors, but also the colors of the CSS sprite images. For a few controls (currently, Grid, PanelBar, and Window), you also have a "Fine Tune" option to really tweak the look and feel of the skins. By the Q2 2009 release, all RadControls for ASP.NET AJAX will have a Fine Tune option. On top of all of this, all exported skins are completely cross-browser ready (including IE6)- so no fussy CSS debugging. Creating a CSS skin (with optimized CSS sprites) has never been so easy. And that's not "marketing speak." As a long time web developer, I can't point to any other tool that's ever made custom skinning this easy. And this is just the Beta. Enjoy the beta preview. Send us your feedback. Have fun creating custom skins (I know that's two ideas that don't usually go together). And watch for more great enhancements to this tool as we approach Q2! Try the Visual Style Builder now