Is there anyway to use Kendo for asp.net core with Bootstrap 4 without polluting the default Bootstrap 4 styling? Is it possible to prefix all Kendo styles to not interfere with Bootstrap?
Lack of customization within the SAAS builder is making it very hard to implement Kendo UI. At this point if we could just get Charts that would be a start.
Is there a list of styles overridden by Kendo?
1 Answer, 1 is accepted
0
Accepted
Hello Shannon,
The Kendo Sass Bootstrap Theme is a stand-alone theme which uses linked variables to the Twitter Bootstrap theme in order to achieve a similar look and feel. Thus, customization in the default Bootstrap will affect Kendo UI theme as well. You can read more about it in our documentation on Kendo Sass themes here:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes
Taking the above into consideration, the Bootstrap Twitter library and the Kendo Bootstrap theme should not be interfering with each other. This is the case as the Kendo Sass theme uses prefixes different than the Bootstrap ones and does not override its styles.
In terms of customizing the Kendo UI Sass-based themes, you could follow one of the two approaches described below:
1. Use the Sass Theme builder for mild customizations which include mainly color changes. You can customize the Charts by changing the colors of the series within the Theme Builder or use any of the predefined color swatches.
2. Apply customizations to the Kendo UI theme variables manually by following the instructions provided here:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#customizing-the-themes
It is important to note that customizations should be made prior to importing the Bootstrap and the Kendo UI theme:
The list of the variables that can be customized can be found in the following section of the documentation:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#variables
Could you please go over the suggested resources and let me know what difficulties you are encountering while trying to customize the Kendo UI themes? It would be of great help if you could provide us with a demo page that demonstrates your exact configuration (imports, overrides). In this way, I will be able to evaluate the exact use case and assist you further.
I am looking forward to hearing from you.
Regards,
Teya
Progress Telerik
The Kendo Sass Bootstrap Theme is a stand-alone theme which uses linked variables to the Twitter Bootstrap theme in order to achieve a similar look and feel. Thus, customization in the default Bootstrap will affect Kendo UI theme as well. You can read more about it in our documentation on Kendo Sass themes here:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes
Taking the above into consideration, the Bootstrap Twitter library and the Kendo Bootstrap theme should not be interfering with each other. This is the case as the Kendo Sass theme uses prefixes different than the Bootstrap ones and does not override its styles.
In terms of customizing the Kendo UI Sass-based themes, you could follow one of the two approaches described below:
1. Use the Sass Theme builder for mild customizations which include mainly color changes. You can customize the Charts by changing the colors of the series within the Theme Builder or use any of the predefined color swatches.
2. Apply customizations to the Kendo UI theme variables manually by following the instructions provided here:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#customizing-the-themes
It is important to note that customizations should be made prior to importing the Bootstrap and the Kendo UI theme:
$accent: #E82C0C; // brand color@import "node_modules/@progress/kendo-theme-bootstap/scss/all";@import "node_modules/bootstrap/scss/bootstrap";The list of the variables that can be customized can be found in the following section of the documentation:
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#variables
Could you please go over the suggested resources and let me know what difficulties you are encountering while trying to customize the Kendo UI themes? It would be of great help if you could provide us with a demo page that demonstrates your exact configuration (imports, overrides). In this way, I will be able to evaluate the exact use case and assist you further.
I am looking forward to hearing from you.
Regards,
Teya
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.