Styling UI Components

Basic ThemeBuilder Project Operations

In ThemeBuilder, you can perform the following basic project operations:

Apart from the "create" operation, you can access all other operations from the ... project button.

Basic project operations menu in ThemeBuilder

Creating New Projects

To create a new ThemeBuilder project:

  1. Navigate to the ThemeBuilder dashboard.
  2. Enter your credentials, and then select LOG IN.
  3. Select Create New Project.
  4. Choose the Project Assets type (SVG or Font icons) and which Kendo or Telerik UI theme to use (Default, Bootstrap, Material, Fluent, or Classic)—this applies the theme-specific styles to the UI components in ThemeBuilder.
  5. Enter a name for the project, and then select CREATE.

Sharing the Project

You can share a project with other team members to give them full administrative access to the project. Multiple team members can work on a shared project simultaneously.

To share a ThemeBuilder project:

  1. Navigate to the ThemeBuilder dashboard.

  2. Locate the desired project under My Projects.

  3. Select the ... button in the lower right corner, and then select Share.

  4. Enter one or more email addresses and select SHARE. The email addresses you share the project with must be registered to a Telerik account.

Controlling the Access to a Shared Project

For users with Enterprise licenses, ThemeBuilder provides three roles that allow granular privilege control. This allows you to adjust the level of access to the shared project that everyone has.

The table below lists the available access levels and their permissions.

Feature Viewer Editor Admin
Export styles Yes Yes Yes
Share projects No Yes (can assign the Viewer role) Yes (can assign all roles)
Duplicate project No Yes Yes
Edit variables No Yes Yes
Atomic customizations No Yes Yes
Edit fonts No Yes Yes
Export styles with the Figma plugin No Yes Yes
Revoke project access for other users No No Yes
Change user permissions No No Yes
Delete project No No Yes

Renaming the Project

  1. Navigate to the ThemeBuilder dashboard.
  2. Locate the desired project under My Projects.
  3. Select the ... button in the lower right corner, and then select Rename.
  4. Enter a name, and then select SAVE.

Duplicating the Project

  1. Navigate to the ThemeBuilder dashboard.
  2. Locate the project under My Projects.
  3. Select the ... button in the lower right corner, and then select Duplicate.
  4. Enter a name, and then select SAVE. The duplicated project contains all the data of the source project.

Deleting the Project

When you delete a project, there is no going back. If you delete a shared project, you delete it for all collaborators.

To delete a ThemeBuilder project:

  1. Navigate to the ThemeBuilder dashboard.
  2. Locate the project under My Projects.
  3. Select the ... button in the lower right corner, and then select Delete.

Changing the Project Assets Type

To change the type of the Project Assets from SVG Icons to Font Icons or the other way around:

  1. Navigate to the ThemeBuilder dashboard.
  2. Open the project.
  3. In the toolbar, click the Project Settings button to open the settings dialog, and then select the desired asset type.

The Project Settings dialog allows you to manage not only the Project Assets type but also the Theme Settings and Fonts.

Basic project operations menu in ThemeBuilder

Every asset type (SVG or font) has its own styles. If you change the Project Assets type, you must apply all related styles again.

For more information about the differences between SVG and Font icons, see the documentation of the UI components:

Exporting Metadata

When you contact the ThemeBuilder support, you may need to provide the project metadata. This information allows the product developers to analyze the data and suggest a solution.

To download the metadata for a ThemeBuilder project:

  1. Navigate to the ThemeBuilder dashboard.
  2. Locate the project under My Projects.

  3. Select the ... button in the lower right corner, and then select Export Metadata.

    Exporting the metadata allows you to work around issues caused by breaking changes, for example, to handle breaking changes in the themeStyleOverrides.

Importing Metadata

Importing a project's metadata allows you to upload project files that you modify manually without using the ThemeBuilder app. This may be required when troubleshooting a specific issue or migrating a project, for example, after breaking changes in the Telerik and Kendo UI themes.

To download the metadata for a ThemeBuilder project:

  1. Navigate to the ThemeBuilder dashboard.
  2. Open the project.
  3. From the toolbar, select the project menu dropdown.
  4. Select Import Metadata.
In this article
Related articles
Not finding the help you need?