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.
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.
With the new Theme Builder tool, you will be able to do the following:
Build a brand new theme for your AJAX controls. Download the custom theme and integrate in your project.
Import a theme that you have created previously. You can use that as a base for further customization.
Let’s go over the functionalities one by one.
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.
Here is how the preview section will look like after adding additional controls. In this case, I have selected the Tile control to edit.
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:
That’s about importing an existing theme and editing it.
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:
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 email@example.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.
Lohith Goudagere Nagaraj is a Microsoft MVP in ASP.NET and a Developer Evangelist for Telerik in India. He has a decade of experience building web applications and is well versed with the Web Forms and MVC models of web development. You can get more information from Lohith on Twitter by following @kashyapa.Google Profile