Meet the Visual Style Builder

The Telerik Visual Style Builder is a web-based, fully functional CSS customization tool that enables easy, point-and-click customization of skins for the RadControls for ASP.NET AJAX and Telerik Extensions for ASP.NET MVC. This tool eliminates the need to understand the front-end HTML and CSS structure of the controls to create custom skins. It gives you complete control over the elements of the skin and allows you to create your own custom skin in minutes.

Visual Style Builder for ASP.NET AJAX Overview

Colorize complete skins in seconds

Telerik AJAX RadControls and MVC Extensions come with 12 ready-to-use skins that offer the look and feel of many well known themes (Office 2007, Vista, Outlook, etc). Sometimes, however, you may need to adjust the color of a skin to make it perfectly fit your site’s design. Traditionally, this customization could cost you significant time, designer involvement and endless drilling into Telerik CSS classes. With Telerik Visual Style Builder, that effort is a thing of the past. You can quickly manage the colorization of your skin by simply visually selecting from either the HSV or Web color palettes. In case you are styling your MVC views you will notice that all changes made to a control are being applied to all other controls thus enforcing skin consistency and significantly reducing the file size.

Fine tune individual elements to perfection

Through the "fine tune" mode of the Visual Style Builder, you can adjust any element of the AJAX RadControls or MVC Extensions skins to perfectly fit in your web application. Whether you want to change the default text fonts and sizes, margins and padding, background, or any style property - it’s all easy and intuitive through the Visual Style Builder graphical interface.

Export your skins

Once you have finalized your custom skin, the Visual Style Builder automatically packages all required files for your new skin in to a single ZIP archive. Simply add the files from this archive to your project, and your custom skin is ready to go. You never have to write CSS or copy and paste large chunks of code.

Primitive-based skinning

Due to the different styling model in the MVC extensions, all changes made to a control are being propagated to all other controls. While this is somewhat limiting, it enforces the skin consistency, and the file size is significantly smaller.