We understand that the skin appearance of the used controls is of high importance for everyone (end-users, developers, managers, etc…) and that Telerik controls should always perfectly fit in any web site. That is why we provide you with not only more than 20 skins, but also created an online tool for point-and-click generation of custom skins for RadControls for ASP.NET AJAX. The Visual Style Builder tool was in Beta for quite some time, but it just went official and is now stable and ready to rock. Now creating custom skins is easier and more reliable.
What's improved?
We invested a serious amount of time to improve the tool and now it offers cross-browser support, new skins:
Silk,
Glow,
MetroTouch and
BlackMetroTouch and new controls:
AutoCompleteBox,
Progress Area,
DropDownList,
PivotGrid,
SearchBox. We also fixed many bugs so you can easily work with it.
What can the tool do for me?
If you haven't used the Visual Style Builder before, here is what it can help you achieve quickly:
- Change the main color of an existing skin with just a few clicks
- Modify a skin for one control only or for a set of controls
- Fine tune individual elements in the control, such as fonts, backgrounds, paddings
- Edit an already existing skin that can be uploaded as an archive
How do I create a custom skin?
The example below uses our Menu control to provides guidance on how to create a Green Metro skin based on the built-in Metro skin. The screenshots below show how the built-in and the custom green Metro skins look:
Before:
After:
Here's how to do it yourself:
- Go to http://stylebuilder.telerik.com/
- Press the "New Skin" button
- In the "Create a New Skin" page do the following
- Enter the desired skin name, in our case MetroGreen
- Choose the skin that will be used as a base for creating the custom one in the dropdown
- Select the control that you would like to skin in the Controls panel. You can, of course, select all controls and this will create custom skins for all of them.
- Press the Save button to continue to the next page, which provides UI to perform the actual customizations
- On the new page the user can perform basic skin modification as well as fine-tuning it:
- Basic usage: All you need to do is to chose the desired color from the provided Color Picker control or enter it manually (e.g. #50a92d) in the "Base Color" textbox. Once the color is set, the Skin Preview image will be automatically updated and will display how the custom skin look. More detailed description of the steps are available in the following help article: Basic Usage.
- Fine Tuning mode: This advanced mode allows to apply detailed effects on a given element inside the control. For example, the main menu items, hover items, disabled items, menu wrappers, sub-menu wrapper, sub-items and many more features. You can find a complete explanation of the advanced features of this mode in the Fine Tuning article.
- To download the skin with the last saved modifications press the Downloads link button.
How do I register the custom skin:
- To register it, create a folder named Skins in the root of your application
- Extract the downloaded zipped skin files in the Skins folder. In our example the file name is MetroGreen.zip
- In the aspx page with the Menu control, add a link tag with reference to the Menu.MetroGreen.css file, e.g.
<link href="Skins/Menu.MetroGreen.css" rel="stylesheet" />
- Set the value of the RadMenu's Skin to "MetroGreen" and disable the embedded skin of the control, e.g.
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="MetroGreen" EnableEmbeddedSkins="false"></telerik:RadMenu>
- Here you go. You can find more information on the topic in this help article: Skin registration.
As you can see the whole process is pretty straightforward and everyone can build a nicely looking skins for all RadControls products in minutes.
Last but not least, do not hesitate to post and share your Ideas and Feature requests on how to further improve this useful skin creating tool in the Ideas and Feedback portal.