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:
- Navigate to the ThemeBuilder dashboard and open the desired project.
- 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:
Copy the ThemeBuilder package to your application.
Extract the ZIP archive.
-
Navigate to the folder named after your ThemeBuilder project, and then install the NPM modules.
cd my-themebuilder-project-name npm install
-
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 befile:../my-themebuilder-project-name
. -
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.
-
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
Extract the ZIP archive.
Navigate to the
my-themebuilder-project-name/dist/css
folder.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 themy-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.
-
Next, follow the framework-specific steps:
Telerik UI for Blazor
Paste the
my-themebuilder-project-name.css
file into your application, usually into thewwwroot
folder. Underwwwroot
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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
Paste the
my-themebuilder-project-name.css
file into your application, usually into thestyles
folder. Understyles
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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
Paste the
my-themebuilder-project-name.css
file in your application, usually in thewwwroot
folder. Underwwwroot
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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
Paste the
my-themebuilder-project-name.css
file in your application, usually in theContent
folder. UnderContent
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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
Paste the
my-themebuilder-project-name.css
file in your application, usually in thecontent
folder. Undercontent
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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
Paste the
my-themebuilder-project-name.css
file in your application, usually in thesrc/main/webapp/resources
folder. Undersrc/main/webapp/resources
, you can create another folder for the CSS file, for example,myCustomTelerikThemes
.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 themy-themebuilder-project-name.css
. Skip this step if your project doesn't use custom fonts.-
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.