Some scenarios might require greater changes to the look of your application so that you can fit on your organization brand.
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.cssfile is the file that you import in the Builder.
variables.scssfile is the file you re-import in the ThemeBuilder if you want to tweak a theme again.
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.
app.custom.cssfile—Intended for application-wide styles.
- The view styles—Intended for scoping the styles which concern a specific view type.
app.custom.cssand 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.