Tuesday, May 19, 2009

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


Gregory Wilmes said...

Absolutely fabulous ! very easy to use, no cons, only pros.

Anonymous said...

erm ... am i the only one having problems using it IE8. the main controls are being pushed beyond the bottom of the window where i can't acess them.


kazhar said...
This comment has been removed by the author.
kazhar said...

@Pete: This is a bug caused by some styling on the "New skin..." page, in combination with your screen resolution. You can still use the style builder by tabbing to the "Create" button on the same page. I am aware of the problem and will fix it right away. Sorry :(

Yet actually, the irony is quite amusing...

Härry said...

If i try to set a smaller font size
and line-height for the grid header it allways jumps back to standard value (on ie and ff) no matter if i press apply or not. What i'm doing wrong?

kazhar said...

@Härry: Which skin did you use as a base? I tried it out with three different ones under both browsers and "Apply changes" worked like a charm...

A side-note: you can use the style builder forum (http://www.telerik.com/community/forums/aspnet-ajax/style-builder.aspx) to submit bug reports and questions.

Gustavo said...

Hi, what about the "Common" folder? it is not included in the downloadable zip file... and the loading.gif images are not shown during async calls.


Unknown said...

@ All

IN the substep 3 of Step 3, I cannot see all the RAD controls that I see in the toolbox of Visual Studio on installing the controls...
Like RadTimePicker, RadAsyncUpload, RadDateInput, RadDatePicker..

Anybody, any help please ?