From dd7ed7b3efe4b81faf1b10c93e8bbc9d6a023cbb Mon Sep 17 00:00:00 2001 From: P1l3T0 Date: Tue, 22 Jul 2025 14:18:46 +0300 Subject: [PATCH 1/4] docs(visuial-stylebuilder): addjust articles --- .../creating-a-custom-skin.md | 11 +-- styling/visual-stylebuilder/basic-usage.md | 90 +------------------ .../visual-stylebuilder/edit-existing-skin.md | 45 +--------- styling/visual-stylebuilder/fine-tuning.md | 51 +---------- .../known-issues,-tips-and-tricks.md | 21 +---- styling/visual-stylebuilder/overview.md | 20 +---- 6 files changed, 13 insertions(+), 225 deletions(-) diff --git a/styling/controlling-visual-appearance/creating-a-custom-skin.md b/styling/controlling-visual-appearance/creating-a-custom-skin.md index 683fdbdd79..db08f5fcde 100644 --- a/styling/controlling-visual-appearance/creating-a-custom-skin.md +++ b/styling/controlling-visual-appearance/creating-a-custom-skin.md @@ -14,7 +14,7 @@ Developers who want to create a custom skin for one or more Telerik control, hav * Use the [Telerik ThemeBuilder for ASP.NET AJAX](https://themebuilder.telerik.com/) application (for Lightweight RenderMode skins) -* Use the [Visual Style Builder](http://stylebuilder.telerik.com/) tool (discontinued since 2016). +* [Use the Visual Style Builder tool](#visual-style-builder) tool (discontinued since 2016). * Take an embedded skin and make changes to it until you have the desired look @@ -41,14 +41,9 @@ This is an easy to use application that enables you to customize the default loo ## Visual Style Builder -If you would like to modify a skin that will be used in **Classic RenderMode** you can use the StyleBuilder tool. - -[launch the online tool](http://stylebuilder.telerik.com/) - -[read the tool overview on the Telerik website](https://www.telerik.com/aspnet-ajax/visual-style-builder) - ->note The **Classic** render mode is in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes) and the Visual Style Builder tool, which produces skins for the Classic rendering only, is in maintenance since May 2016. We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://themebuilder.telerik.com/) tool. +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. ## Create a Custom Skin From an Existing Embedded Skin diff --git a/styling/visual-stylebuilder/basic-usage.md b/styling/visual-stylebuilder/basic-usage.md index 2f2511b4c6..cd07d92d1f 100644 --- a/styling/visual-stylebuilder/basic-usage.md +++ b/styling/visual-stylebuilder/basic-usage.md @@ -10,93 +10,7 @@ position: 1 # Basic Usage +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. -The **Visual StyleBuilder** offers two main paths - creating a new skin from an existing one or [editing an already existing custom skin]({%slug introduction/visual-stylebuilder/edit-existing-skin%}). - ->important The Visual StyleBuilder tool can be used only for editing the skin-specific stylesheets of the controls. This means that fonts, colours,images can be modified and small changes to paddings and margins can be made, but the base stylesheet will not be altered or included inthe resulting package. - - -![introduction-stylebuilder-create-new-or-edit-existing-skin](images/introduction-stylebuilder-create-new-or-edit-existing-skin.png) - -Once the option for creating a new custom skin is selected a new page appears that allows you to select the starting parameters: -![introduction-stylebuilder-choose-name-controls-base-skin](images/introduction-stylebuilder-choose-name-controls-base-skin.png) - -1. Choose the name the custom skin will have. It will be used in the CSS selectors and should be given to the control's Skin property to use it. - - >note The skin name cannot be modified at a later stage once the skin has been created. - - - -1. The skin from the built-in ones that will be used as base for creating the custom skin. The closer the source is to the desired effect, the fewer modifications will be needed. - -1. A list with the controls in the suite. The checkboxes can be used to select the controls for which you wish to create a custom skin. - - >note Once the list is chosen it cannot be modified at a later stage to include or exclude controls. - - - - >tip The "Select all controls" option can be used to choose all controls. - - - >note If a chosen control uses other Telerik controls internally they will be present in the list in the next steps even if they have not been checkedexplicitly at this point. - - - -1. Once all other choices have been made the Create button will create the template for the new custom skin and send you to the next steps to perform the actual customizations. - -1. The cancel button can be used to discard the changes and return to the home page. - - - -## Basic Skin Modifications - -The first thing that can be done easily is to change the overall color the skin will use: - -![introduction-stylebuilder-base-color-change](images/introduction-stylebuilder-base-color-change.png) - -1. The skin name that was chosen in the previous step. - -1. Tabs that can be used to toggle between the basic mode and [Fine-Tuning mode]({%slug introduction/visual-stylebuilder/fine-tuning%}). - - >note Save the changes with the Save button before toggling the mode or they will be lost. - - - -1. Download the skin with the last saved modifications. - - >note Use the Save button at the bottom of the page to store the changes before downloading the ready archive. - - - -1. Use the Close button to discard all changes and return to the home page to start anew. - -1. List with the controls selected in the previous step. - - >note Save the changes with the Save button before clicking on another control or they will be lost. - - - -1. The preview pane shows the end result from the changes in real-time. - -1. Toggle between the two color editing modes - basic color choice and advanced modifications on the color. - -1. Use the textbox to enter a hex color or the color picker to choose one with a visual interface. - -1. Modify the hue of the selected base color either with a numeric textbox, or with the slider. - -1. Modify the saturation of the selected base color either with a numeric textbox, or with the slider. - -1. Restart the whole process. The same as the Close button (4). - -1. Saves the changes made in the browser on the server. - - >note All changes must be saved before navigating to another tab (2, 3, 5, 7) or saving the skin (3), otherwise they will be lost (or will not be present in the downloaded file). - -![introduction-stylebuilder-base-color-shift](images/introduction-stylebuilder-base-color-shift.png) - -## See Also - - * [Fine Tuning]({%slug introduction/visual-stylebuilder/fine-tuning%}) - - * [Edit Existing Skin]({%slug introduction/visual-stylebuilder/edit-existing-skin%}) diff --git a/styling/visual-stylebuilder/edit-existing-skin.md b/styling/visual-stylebuilder/edit-existing-skin.md index 4247a5c548..79f320c964 100644 --- a/styling/visual-stylebuilder/edit-existing-skin.md +++ b/styling/visual-stylebuilder/edit-existing-skin.md @@ -11,47 +11,6 @@ position: 3 # Edit Existing Skin +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). -The **Visual StyleBuilder** tool offers the option to modify an already existing skin by uploading an archive with the proper structure. This can be one of the built-in skins or a custom skin. - ->note The format of the archive must match the structure the StyleBuilder expects. This is the structure a skin has in the installation folder of the Telerik® UI for ASP.NET AJAX. - ->tip After you create the custom skin you will need to [register]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/skin-registration%}) it on the page where it will be used. - -For instance, if you need to alter the Black skin of the RadGrid Control you will need to go to *[Telerik® UI for ASP.NET AJAX installation folder] [your version of the controls here]\Skins\Black*, get the folder containing the images needed for the control (named Grid in this example) and the stylesheet applied for the black skin - *Grid.Black.css* file – and archive them into a single file (for example this could be Black.zip). - ->tip Some of the Telerik controls are composite controls and use other controls from the suite internally. These additional controls must also be included in the archive with the main one. You can see a list with the required minimum by trying to create a new skin in the StyleBuilder and selecting only the desired control. - - - -Here follows an example how several controls that are used together should look like when archived. Having more than one control does not change the structure of the archive, the needed files and folders are merely added. This allows for skinning several controls at a time. - -![introduction-stylebuilder-archive-structure](images/introduction-stylebuilder-archive-structure.png) - ->tip Make sure that the files inside have no custom permissions and attributes - i.e. they should *not* be read-only, access to them should *not* be explicitly limited to given users on the local machine, etc. Having files that cannot be accessed or modified means the Visual StyleBuilder cannot work with them and cannot generate the new archive. - - - -## How to edit an existing skin - -1. **Get the skin that you need to alter** - - To get the needed files for one of the built-in skins you can go to *[Telerik® UI for ASP.NET AJAX installation folder] [your version of the controls]\Skins*where you can find all of the skins of the controls with the default installation of the Telerik controls)so you can choose the skin whose styles you need to alter.You can also use a custom skin that has already been implemented. - -1. Choose the **Import and Edit Skin** option form the first page inVisual Style Builder and choose to the folder containing the skin (*Black.zip* for this example) file. - - The Visual Style Builder is designed in a way to automatically detect the control whose skin you are editing.Thus, it will display the controls whose skin you imported in step two on the left hand side of the screen. - -1. Proceed to edit the existing styles as described in the **[Fine Tuning section]({%slug introduction/visual-stylebuilder/fine-tuning%})**. - -1. When you are done with all changes for the Grid only, you will need to preserve the changes by clicking on the **Save** button (the same step would be repeated for the Menu, whose skin files are included in the .zip file) - -1. After saving the changes, you can get the altered skin by using the **Download** button. - -1. The next steps would be to extract the file and [use the custom skin]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/creating-a-custom-skin%}) your project. - -## See Also - - * [Fine Tuning]({%slug introduction/visual-stylebuilder/fine-tuning%}) - - * [Creating a Custom Skin]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/creating-a-custom-skin%}) +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. diff --git a/styling/visual-stylebuilder/fine-tuning.md b/styling/visual-stylebuilder/fine-tuning.md index c4c464919d..da56f93c42 100644 --- a/styling/visual-stylebuilder/fine-tuning.md +++ b/styling/visual-stylebuilder/fine-tuning.md @@ -10,54 +10,7 @@ position: 2 # Fine Tuning +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. - - -Once the [basic customization]({%slug introduction/visual-stylebuilder/basic-usage%}) is done, the skin name and desired controls have been chosen the **Fine-Tune** tab can be used to apply detailed effects on a given element inside the control. - -Here follows a screenshot where each element of the interface, its functions and usage are explained below: - ->note The Save button (6) should be used before navigating between the different tabs (1, 3, 8) to avoid losing data. - -![introduction-stylebuilder-fine-tuning-functionality](images/introduction-stylebuilder-fine-tuning-functionality.png) - -1. The list with the chosen controls. An arrow marks the one that is being edited.Save the changes with the Save button (6) before going from one to another.This list is chosen in the previous step. It cannot be modified without losing all the changes. - - >tip If a selected control uses other Telerik controls internally they will be present in the list as well so they can be styled as desired. - - -1. The name of the skin is shown here. It has been chosen in the previous step and cannot be changed anymore. - -1. The tabs which allow toggling between basic color change and fine tuning. Save your changes before navigating across. - -1. The download button takes the saved skin and sends it as a zip archive. - - >note Only saved changes will be present in the files that will be downloaded. Click the Save button (6) first. - - -1. Click Close to discard all modifications and start over from the top. - -1. The save button sends the changes made in the browser to the server. All changes must be saved before navigating across any tabs(the control list (1), between colorize and fine-tune (3), between the individual control's sections (8)). Changes that are not saved will be lost when navigating away. - -1. If you don't like the effect the latest changes made, the Load Last Save button will restore the last save that has been made. This acts like an undo mechanism. - -1. These tabs list separate sections of the control that can be edited. For example, different elements for RadFormDecorator, different button types for RadButton. No tabs will be shown here if no applicable sub-sections of the control exist. - -1. The individual elements of the control that can be edited. Click the label that names the element to select it and it will be highlighted in orange.The panel at the bottom (10) will show the applicable styling options where each aspect can be controlled via combo boxes and textboxes with a single click. - - >tip All elements from the given tab (8) can be edited before pressing save to navigate away to another tab in (8), (3) or (1). - - -1. Detailed configuration panel. Depending on the selected element (9) the applicable styling options will be listed here - background color/images,fonts, margins and paddings, etc. - - ->note The CSS rules created with the fine-tune functionality are added to the end of the skin-specific stylesheet that will be created for the given control. The stylesheets in the archive the tool outputs are minified. The changes added by the StyleBuilder are not minified. This allows for applying additional modifications manually at a later stage. - - ->note A rule that has already been created by using the UI and clicking the Save button (6) cannot be removed through the StyleBuilder. It can be removed manually after downloading the skin. For example, if a background color is chosen, then a background image, both rules will be present in the CSS file, one after the other. - - -## See Also - - * [Basic Usage]({%slug introduction/visual-stylebuilder/basic-usage%}) diff --git a/styling/visual-stylebuilder/known-issues,-tips-and-tricks.md b/styling/visual-stylebuilder/known-issues,-tips-and-tricks.md index 1861b720ef..4df0f09d75 100644 --- a/styling/visual-stylebuilder/known-issues,-tips-and-tricks.md +++ b/styling/visual-stylebuilder/known-issues,-tips-and-tricks.md @@ -11,23 +11,6 @@ position: 4 # Known Issues, Tips and Tricks +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). -## Issue: RadDropDownTree is Not Available - -Currently there are some issues with skinning this control through the **VisualStyleBuilder** and it is not available for selection. It will be put back in the list as soon as they are fixed. - -## Issue: Gradients - -Most of the skins use background images for transparency and gradients, but the **new skins** (currently Glow and Silk) use **CSS3 gradients**. Currently, there is no unified way of creating them with CSS3, because each browser has its own implementation of the property, if it has one at all. This means that **customized gradient backgrounds** in these skins **can have issues** and may need manual tweaking after the skin is exported from the tool. - -## Issue: Visual glitches in IE7 - -The Visual StyleBuilder is a complex developer tool and targets modern browsers. Its interface and functionality may have some issues under older browsers(e.g., IE7) and **we advise using** the latest version of **a modern browser** with this tool. - -## Tip: Always Save the Changes - -The tool's interface consists of many tabs that expose the different aspects of tweaking a skin. Before navigating between the mall changes must be saved or they will be lost. - -## Tip: Choose Skin Name Beforehand - -The name of the new skin is chosen in one of the first steps of the wizard-like interface and cannot be changed at a later stage without losing all the changes that have been made so far. We advise that the name the skin should be chosen beforehand to avoid manual find-and-replace operations later. +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. diff --git a/styling/visual-stylebuilder/overview.md b/styling/visual-stylebuilder/overview.md index 1dad53881e..3005b476b7 100644 --- a/styling/visual-stylebuilder/overview.md +++ b/styling/visual-stylebuilder/overview.md @@ -10,22 +10,6 @@ position: 0 # Visual StyleBuilder Overview -The **Visual Style Builder** is a tool that can be used to create the base of custom skins for the **Classic** rendering of Telerik controls. It provides an interactive UI that helps in customizing the appearance of the skin. It can be found at [http://stylebuilder.telerik.com/](http://stylebuilder.telerik.com/). +The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). -For everyone who wants to create an customize skins for the modern **Lightweight** rendering of the components, we recommend using the [Telerik Theme Builder]({%slug theme-builder/overview%}). - -The main features of the Visual Style Builder are: - -* Changing the main color of an existing skin with just a few clicks - -* Modifying the skin for one control only or for a set of controls - -* Fine tuning individual elements in the control, e.g. fonts, backgrounds, paddings - -* Editing an already existing skin that can be uploaded as an archive - -* Does not require installation, runs directly in your browser - ->tip After you create the custom skin you will need to [register]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/skin-registration%}) it on the page where it will be used. - -![introduction-stylebuilder-overview](images/introduction-stylebuilder-overview.png) +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. From 2ac8b7072b04b3cbc7c45cb8152351fd1ff0e969 Mon Sep 17 00:00:00 2001 From: Vasil Ganev Date: Tue, 22 Jul 2025 14:23:53 +0300 Subject: [PATCH 2/4] Update styling/controlling-visual-appearance/creating-a-custom-skin.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- styling/controlling-visual-appearance/creating-a-custom-skin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styling/controlling-visual-appearance/creating-a-custom-skin.md b/styling/controlling-visual-appearance/creating-a-custom-skin.md index db08f5fcde..7e8eb4a14e 100644 --- a/styling/controlling-visual-appearance/creating-a-custom-skin.md +++ b/styling/controlling-visual-appearance/creating-a-custom-skin.md @@ -14,7 +14,7 @@ Developers who want to create a custom skin for one or more Telerik control, hav * Use the [Telerik ThemeBuilder for ASP.NET AJAX](https://themebuilder.telerik.com/) application (for Lightweight RenderMode skins) -* [Use the Visual Style Builder tool](#visual-style-builder) tool (discontinued since 2016). +* [Use the Visual Style Builder tool](#visual-style-builder) (discontinued since 2016). * Take an embedded skin and make changes to it until you have the desired look From 5d6a4df2f897b498e29343532a838f240dfad3bb Mon Sep 17 00:00:00 2001 From: Vasil Ganev Date: Tue, 22 Jul 2025 14:24:10 +0300 Subject: [PATCH 3/4] Update styling/visual-stylebuilder/overview.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- styling/visual-stylebuilder/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styling/visual-stylebuilder/overview.md b/styling/visual-stylebuilder/overview.md index 3005b476b7..26993f8513 100644 --- a/styling/visual-stylebuilder/overview.md +++ b/styling/visual-stylebuilder/overview.md @@ -12,4 +12,4 @@ position: 0 The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). -We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://themebuilder.telerik.com/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. From b6a4856b6b41b5a3a540e47c8e177274a00f246c Mon Sep 17 00:00:00 2001 From: Vasil Ganev Date: Tue, 22 Jul 2025 14:24:22 +0300 Subject: [PATCH 4/4] Update styling/controlling-visual-appearance/creating-a-custom-skin.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- styling/controlling-visual-appearance/creating-a-custom-skin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styling/controlling-visual-appearance/creating-a-custom-skin.md b/styling/controlling-visual-appearance/creating-a-custom-skin.md index 7e8eb4a14e..0c67a9bbea 100644 --- a/styling/controlling-visual-appearance/creating-a-custom-skin.md +++ b/styling/controlling-visual-appearance/creating-a-custom-skin.md @@ -43,7 +43,7 @@ This is an easy to use application that enables you to customize the default loo The **Visual Style Builder** tool, previously available at [http://stylebuilder.telerik.com](http://stylebuilder.telerik.com), was designed to produce skins for the **Classic RenderMode** only. It entered maintenance in May 2016 and has been **discontinued as of 2025 Q2**. The **Classic** render mode itself has been in [maintenance mode since Q3 2015](https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes). -We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://demos.telerik.com/aspnet-ajax/themebuilder/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. +We recommend using the **Lightweight** render mode and the provided [Telerik ThemeBuilder for ASP.NET AJAX](https://themebuilder.telerik.com/) tool. You can learn how to use the tool in the [ThemeBuilder Overview](https://www.telerik.com/products/aspnet-ajax/documentation/styling/theme-builder/overview) article. ## Create a Custom Skin From an Existing Embedded Skin