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 and save the ZIP file.

If you use a limited number of UI components, you can reduce the size of the theme by building a partial theme.

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.

Make sure that if you are using custom fonts and/or Kendo Font Icons in your project, to copy the content of my-themebuilder-project-name/dist/fonts folder into your application on the same level as you have copied the my-themebuilder-project-name/dist/css folder.

Kendo Font Icons font file is included only if your project uses font icons instead of SVG icons Starting with the R3 2023 release, the font icons font is no longer bundled in the themes distribution. This is done as part of a series of improvements related to content security policy(CSP). Continue using font icons in your project can still be achieved 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

  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.

In this article
Related articles
Not finding the help you need?