CSS class names mapping/managing

[Ralph Quintero]

Hello, when using Kendo UI widgets we are looking for ways to replace (not use) the default Kendo UI class names. We know that we can add our own class names through template markup however there's a significant amount of Kendo generated markup that uses many classes that eventually end up conflicting with other instances of the same Kendo widget currently on the same single page application view.

We want to use multiple instances of e.g. Kendo Listview for completely different designs hence we end up with class name conflicts and we have to start overriding classes in multiple places. We don't want to override, we want to start off with a clean slate; use our own class names with exactly the styles that we need.

jQuery Tabs is a perfect example of what we're looking to do:

http://api.jqueryui.com/tabs/

http://learn.jquery.com/jquery-ui/widget-factory/classes-option/

 

Please let me know how we can manage ALL class names in Kendo UI Widgets.

 

Thank you!

 

Alejandro

[Stefan]

Hello Alejandro,

If the desired result is to apply different styles to every list view on the page, I can suggest the following approaches depending on the desired end result:

1)  Include only kendo.common.css without including a theme.css. This will allow styling the widgets as desired.

2) Use different id attributes for the different ListViews(or other widgets), this will allow using CSS selectors which will be applicable only for the widget with the corresponding id.

3) As some selectors are used through multiple widgets, using child selectors instead of descendant selectors will help.

In general, I can suggest checking our article for the widget's appearance. The article includes some examples and suggestions:

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#getting-started

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress