Documentation
Documentation

Documentation /

Styling & Themes Overview

The Kendo UI Builder delivers a set of predefined themes and supports the import of custom themes.

Adding the Theme

Within the same application, you cannot simultaneously use predefined and custom themes. This means that for each individual web project you can either use any of the predefined themes that are supported by the Kendo UI Builder or import a custom theme that was created with the Kendo UI ThemeBuilder.

Predefined Themes

The predefined themes provide general appearance and layout options for the generated web application, and are bundled and ready to use.

The Kendo UI for jQuery suite, which delivers the AngularJS-integrated widgets, ships more predefined themes than the Kendo UI for Angular suite does. To keep the parity between the predefined themes for the two frameworks, the Builder supplies the missing counterparts as packages that are previously created and bundled with the Progress® Sass ThemeBuilder. Except for the Default Orange, Bootstrap v4, and Material themes, all other available themes for the Angular framework were beforehand generated with the ThemeBuilder.

Custom Themes

The custom themes of the Builder provide only appearance (color) settings for the generated web projects. The theme layout and metrics are inherited from the Kendo UI base stylesheets.

Using Integrated Icon Fonts

Creating Themes with the ThemeBuilder

Unarchiving the Theme Files

After the custom theme is generated, the ThemeBuilder produces a .zip folder which contains the custom theme files:

  • For Angular projects, the ThemeBuilder saves the .zip archive in [appname]\app\src\assets\custom-themes.
  • For AngularJS projects, the ThemeBuilder saves the .zip archive in [appname]\app\src\styles\custom-themes.

To import the custom theme, the Kendo UI Builder requires only the unarchived .css file of the custom theme—select a location and unarchive the .rar folder there.

Importing the Theme

  1. On the Dashboard, click the card (or list item) of the application to open the App Design page.
  2. Next to the application name, click the Settings icon to open the drop-down options list.
  3. Select Properties to open the Edit App dialog box.
  4. Click the Theme drop-down options list to open the Import ThemeBuidler Theme dialog box.
  5. Click Import ThemeBuilder Theme for the location dialog box to open.

  6. Select the location of the dearchived .css file and click Open.

    The Builder only accepts the custom theme files with a .css extension.

  7. Click Apply.

  8. On the Edit App dialog box, click Save. As a result, the custom theme is added to the list of available themes.

You can also access the ThemeBuilder for the respective framework of your current project from the Edit App page by clicking the Go to Kendo UI ThemeBuidler link.

In this article