Documentation
Documentation

Documentation / Extension Points

Custom Themes

Some scenarios might require greater changes to the look of your application so that you can fit on your organization brand.

Customizing the Themes in the Kendo UI Builder

Overview

To avoid the complete overriding of all built-in styles, use the Progress® Sass ThemeBuilder online tool. To create and generate custom themes for Angular applications, use the ThemeBuilder for Angular. To create and generate custom themes for AngularJS applications, use the ThemeBuilder for AngularJS.

The ThemeBuilder enables you to tweak the theme parameters and export them as a .css file. This .css file represents the custom theme which you can then import through the interface of the Builder. To apply the theme, generate the application.

You can use custom themes in conjunction with the app.custom.css file and the CSS of the view. However, avoid the manual editing of the custom theme. To tweak it, import it back in the ThemeBuilder and re-export it. Override the rules only if you come across a ThemeBuilder limitation.

When you download a theme from the ThemeBuilder, you get an archive with the following files:

  • all.css—The all.css file is the file that you import in the Builder.
  • variables.scss—The variables.scss file is the file you re-import in the ThemeBuilder if you want to tweak a theme again.

Specific Usage

The Builder provides the following custom styling approaches which aim at handling different use-case scenarios:

  • Custom themes—Define the appearance and metrics of Kendo UI components.
  • The app.custom.css file—Intended for application-wide styles.
  • The view styles—Intended for scoping the styles which concern a specific view type.

The app.custom.css and the view styles approaches define the layout of the application not the appearance or metrics of the components. You can use these approaches to define the spacing between elements, show, hide, or position elements, and so on.

In this article