With our UI for ASP.NET AJAX Q2 2013 release we provided a new render mode for majority of our AJAX controls. We introduced modern lightweight rendering, which emphasizes semantic HTML & CSS3. With this mode we reduced the amount of markup our controls would spit out, and also made it easier to customize the controls. On top of that, we reduced on the number of image sprites we were using to just one. This meant that overall size of the skin and the complexity of skin decreased.

At present, 99% of the controls are lightweight and everybody can easily customize them using a new handy tool.

Introducing Telerik Theme Builder for ASP.NET AJAX

Let me introduce you to a new toy today. Theme Builder is a web application which can be used to create new Themes, or edit existing themes for AJAX controls which support LightWeight rendering mode. You will be able to create your own custom theme with just a few clicks using this new tool. You get complete control over the control’s elements. Once done with your changes, you can download it and use it in your project with just one click.

You can access Theme Builder here.

Theme Builder Features:

With the new Theme Builder tool, you will be able to do the following:

• Create New Theme

  Build a brand new theme for your AJAX controls. Download the custom theme and integrate in your project.

• Import Theme

  Import a theme that you have created previously. You can use that as a base for further customization.

• Import Bootstrap Theme
  You can import a Bootstrap Theme and customize it for AJAX controls.

Let’s go over the functionalities one by one.

Creating a New Theme

The new Theme Builder tool is the perfect tool for creating themes quickly and efficiently. You do not need to know the underlying HTML and CSS structure of the controls. Just provide your colors and create your custom LightWeight theme. Let’s walk through the process of creating a new theme. 

1. Head over to http://themebuilder.telerik.com
2. Click on the “Select” button under the “Create new theme” section
   
3. You will be presented with the Textbox. Type in a name for your theme and click “Enter.” Note: The name provided here cannot be changed later, so name your theme carefully.
   
4. Next, you will need to select one of the existing themes to start as a base (expect more base skins with different metrics and colors soon). You can select from Default or Bootstrap theme.
   
5. After that, you will need to select the controls for which you want to generate a custom theme. You can select one or all the controls and click “Create.” I am selecting the Notification control in this post:
   
6. Next you will be presented with an interface which provides the properties that can be changed, and a preview section. Changing properties is easy, as Theme Builder provides color pickers for customizing the appearance of the control. Changes made can be observed instantly with Theme Builder's “Apply changes instantly” option. If you are on a slow internet connection, you can uncheck this option to start with. In that case, perform all of your changes, and then when you are ready check the “Apply changes instantly” check box. Your changes will be applied in one shot.
   
7. If you want to add more controls to style, you can click on the "+" button provided at right top corner of the page. This will bring up the Controls selection interface. Select your controls and click on the “Update” button.
   
   
   

   Here is how the preview section will look like after adding additional controls. In this case, I have selected the Tile control to edit.
   

8. Finally, after you have made all your changes—click on the Download button. This will download your custom theme as a ZIP file. Here is the content of the ZIP file:
   
   
   
   As you see, we package the CSS file(s), images folder, ScssPrimitives.json & UsedControls.json files. The JSON files contain technical information about the colors and properties that you have chosen and the skin name. These files can be reused later for further customization of your skin(s), as explained in the next section on importing a theme.
9. Now that you have a custom theme downloaded, you can follow the help documentation on how to use a custom theme in your projects here.

Import a Theme

Previously we saw how to create a new theme. In this section we will see how to import a previously created custom theme and perform modifications. Let's take a look at a walk-through for importing a theme:

1. Head over to home page of Theme Builder
2. Click on the “Import existing theme” section
   
   
3. Next, you will need to click on the Select button and upload ScssPrimitives.json and UsedControls.json from your previously created custom theme. Then click on the Import button.
   
4. Theme Builder will read the uploaded files and set the stage for you to start editing the theme. Once imported, editing the theme is exactly the same as described in the above section on creating a new theme. Once you are done, just download the custom theme ZIP and use it in your projects.

That’s about importing an existing theme and editing it.

Importing Bootstrap Theme

So far we saw how to create a new theme and edit an existing theme. In this section we will take a look at how to import a bootstrap theme into Telerik Theme Builder and customize it. This particular feature is currently a work in progress and supports limited capabilities at the moment. Let’s take a lap around the steps involved:

1. First, get hold of config.json from your Bootstrap theme. You can get the config.json when from the Bootstrap customizer tool found here. For this exercise I went to the bootstrap customize tool page and clicked on the “Compile and Download” button. This will download a .zip file to your system. Unzip it to a folder and you will find the config.json file. We will need this file in next step.
2. Navigate to http://themebuilder.telerik.com. Select “Import Bootstrap theme.” Select the config.json file from your bootstrap theme.
   
3. Next, you will need to provide a name for your new theme.
4. Then select an existing theme as the base for your new theme. Also select the control(s) you want to customize.

Once you have done the above steps, the customization process is same as that of creating a new one.

Note that this feature as of now does not support LESS/SASS/CSS based files. Nor does this support formula based variables in your bootstrap files. As said earlier, this feature is still a work in progress—hence the BETA tag. Over the course of time we plan to greatly improve the Twitter Bootstrap theme conversion to Telerik Bootstrap Themes. We would love to hear your feedback on this. If you would like to share your scenarios & custom Twitter Bootstrap themes with us, please contact us at webforms@telerik.com.

This post was a quick whirlwind tour of our new feature, Telerik Theme Builder. Hope you like this feature and play around with it. We are eager to hear what you have to say.