Hello,
I have a project with the latest version of Kendo UI ASP.NET MVC.
In my bundle config i am loading the 2 .css files
kendo.common-material.min.css
kendo.material.min.css
Everything runsand looks as expected with the blue material theme. I want to be able to override the accent/primary color in the theme.
I've tried downloading and using the npm package @progress/kendo-theme-material, overriding the scss variables and recompiling the .css.
when i add this file into the bundle config it completely messes up the controls, padding, margin, spacing and the actual look of the controls is wrong.
How do i customise the material theme?
Cheers
Mike
1 Answer, 1 is accepted
0
Hello Mike,
The "kendo.common-material.min.css" and "kendo.material.min.css" are the files of our "Bootstrap v3" Less-based theme. On the other hand, the "@progress/kendo-theme-material" package contains the files of our "Bootstrap v4" Sass-based theme:
More information about these themes is available here:
Based on your post, I believe that you would like to use the "Bootstrap v4" theme. Thus, remove the "common" file.
Finally, you might be interested in checking our ThemeBuilder:
Regards,
Preslav
Progress Telerik
The "kendo.common-material.min.css" and "kendo.material.min.css" are the files of our "Bootstrap v3" Less-based theme. On the other hand, the "@progress/kendo-theme-material" package contains the files of our "Bootstrap v4" Sass-based theme:
More information about these themes is available here:
- https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes
Based on your post, I believe that you would like to use the "Bootstrap v4" theme. Thus, remove the "common" file.
Finally, you might be interested in checking our ThemeBuilder:
Regards,
Preslav
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.