Using the Exported Package

This article explains how to use the ZIP file that you export from ThemeBuilder.

ThemeBuilder enables application developers to apply the styles to the Telerik and Kendo UI components by using a generated ZIP package that contains Sass, CSS, and custom font files.

Exporting

When you are ready with the customization of the UI components, you can export a ZIP file that contains the generated customization styles and assets:

1. Navigate to the ThemeBuilder dashboard and open the desired project.
2. In the top right corner, select Export All and save the ZIP file.

Exporting the Selected Components

If you use a limited number of UI components, you can use the Export Selected option from the export the styles only for the visible components on the canvas.

1. Navigate to the ThemeBuilder dashboard and open the desired project.
2. In the top right corner, select the arrow icon next to the Export All button to show all export options.
3. Click on the Export Selected option and save the ZIP file.

The Export Selected option is available for the following versions and themes:

• 2022 R3: Default, Material
• 2023 R2: Default, Material, Bootstrap, Classic
• 2023 R3: Default, Material, Bootstrap, Classic

Using The ZIP Package

The exported ZIP package contains the Sass, CSS, and custom font files from your ThemeBuilder project. These assets are in a folder named after your ThemeBuilder project.

Custom font files are available only if you have added them to your project.

How to use these styles depends on your UI components library:

UI Components Library	Recommended Approach
Kendo UI for Angular	Use the ThemeBuilder Output as an NPM Package.
Telerik UI for Blazor	Use the Compiled CSS ThemeBuilder Output.
KendoReact	Use the ThemeBuilder Output as an NPM Package.
Kendo UI for jQuery	Use the ThemeBuilder Output as an NPM Package. Aletrnatively, you can also Use the Compiled CSS ThemeBuilder Output.
Kendo UI for Vue	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for ASP.NET Core	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for ASP.NET MVC	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for PHP	Use the Compiled CSS ThemeBuilder Output.
Telerik UI for JSP	Use the Compiled CSS ThemeBuilder Output.

Using the ThemeBuilder Output as an NPM Package

This approach applies to the Angular, jQuery, React, and Vue frameworks.

To apply your custom styles to the UI components in your application, you can use the NPM package generated by ThemeBuilder like any other NPM package:

1. Copy the ThemeBuilder package to your application.

2. Extract the ZIP archive.

3. Navigate to the folder named after your ThemeBuilder project, and then install the NPM modules.

   cd my-themebuilder-project-name
   
   npm install
   

4. Add the ThemeBuilder package into your application's package.json file.

     "dependencies": {
       ...
       "my-themebuilder-project-name": "file:./my-themebuilder-project-name"
     },
   

   The file:./my-themebuilder-project-name value is the relative path to the folder where you extracted the ThemeBuilder output package. For example, if you put it next to your application folder, the value will be file:../my-themebuilder-project-name.

5. Import the theme package into your application's index.scss file.

   @import '~my-themebuilder-project-name/dist/scss';
   

   Since the generated package already contains a reference to the Kendo theme, you do not need to manually add it to your project.

6. Install the ThemeBuilder package in your project.

   cd ..
   npm install
   

Using the Compiled CSS ThemeBuilder Output

This approach applies to the Blazor, jQuery, ASP.NET Core, ASP.NET MVC, PHP, and JSP frameworks.

To style the Telerik and Kendo UI components, you can use the compiled CSS that is included in the ZIP file exported from ThemeBuilder

1. Extract the ZIP archive.

2. Navigate to the my-themebuilder-project-name/dist/css folder.

3. Copy the ready to use pre-built CSS file named my-themebuilder-project-name.css.

• If you use custom fonts or Kendo Font Icons in your project, always copy the content of the my-themebuilder-project-name/dist/fonts folder into your application to the same directory level where you have copied the my-themebuilder-project-name/dist/css folder.
• The Kendo Font Icons font file is included in the ThemeBuilder output only if your project uses font icons instead of SVG icons.
• Starting with the R3 2023 release, the font icons font file is no longer bundled in the Telerik and Kendo UI themes distribution. This is done as part of a series of improvements related to content security policy (CSP). You can continue using font icons in your project by loading the font and related styles separately through CDN or directly from the kendo-font-icons package.

1. Next, follow the framework-specific steps:

   • Telerik UI for Blazor
   • Kendo UI for jQuery
   • Telerik UI for ASP.NET Core
   • Telerik UI for ASP.NET MVC
   • Telerik UI for PHP
   • Telerik UI for JSP

Telerik UI for Blazor

1. Paste the my-themebuilder-project-name.css file into your application, usually into the wwwroot folder. Under wwwroot, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts or Kendo Font Icons font in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default, wwwroot/index.html for WebAssembly apps and ~/Pages/_Host.cshtml for server-side Blazor apps). The document may look like this:

       <head>
           <!-- More content can be present here -->
   
           <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
           <!-- More content can be present here -->
       </head>
   

Make sure that the application does not include another referenced Telerik theme. If you use a built-in theme, remove its <link> element.

To use the ThemeBuilder Sass output in your application, you need the files in the dist/scss and dist/fonts folders. For the detailed steps on using the .scss files, refer to the Custom Themes article in the UI for Blazor docs.

Kendo UI for jQuery

1. Paste the my-themebuilder-project-name.css file into your application, usually into the styles folder. Under styles, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default, index.html). The document may look like this:

       <head>
           <!-- More content can be present here -->
   
           <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
           <!-- More content can be present here -->
       </head>
   

Make sure that the application does not include another referenced Kendo theme. If you use a built-in theme, remove its <link> element.

Telerik UI for ASP.NET Core

1. Paste the my-themebuilder-project-name.css file in your application, usually in the wwwroot folder. Under wwwroot, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default, ~/Views/Shared_Layout.cshtml). The document may look like this:

   <head>
       <!-- More content can be present here -->
   
       <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
       <!-- More content can be present here -->
   </head>
   

Telerik UI for ASP.NET MVC

1. Paste the my-themebuilder-project-name.css file in your application, usually in the Content folder. Under Content, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default ~/Views/Shared_Layout.cshtml). The document may look like this:

       <head>
           <!-- More content can be present here -->
   
           <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
           <!-- More content can be present here -->
       </head>
   

Telerik UI for PHP

1. Paste the my-themebuilder-project-name.css file in your application, usually in the content folder. Under content, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default index.php). The document may look like this:

       <head>
           <!-- More content can be present here -->
   
           <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
           <!-- More content can be present here -->
       </head>
   

Telerik UI for JSP

1. Paste the my-themebuilder-project-name.css file in your application, usually in the src/main/webapp/resources folder. Under src/main/webapp/resources, you can create another folder for the CSS file, for example, myCustomTelerikThemes.

2. If you use custom fonts in your ThemeBuilder project, copy the my-themebuilder-project-name/dist/fonts folder and paste it one level higher relative to the my-themebuilder-project-name.css. Skip this step if your project doesn't use custom fonts.

3. Include the custom stylesheet file in the head tag of your index document (by default views/index.jsp). The document may look like this:

       <head>
           <!-- More content can be present here -->
   
           <link rel="stylesheet" href="myCustomTelerikThemes/my-themebuilder-project-name.css" />
   
           <!-- More content can be present here -->
       </head>
   

Make sure that the application does not include another referenced Kendo theme. If you use a built-in theme, remove its <link> element.

Related Articles

• Building a Partial Theme