This is a migrated thread and some comments may be shown as answers.

CSS class names mapping/managing

1 Answer 480 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ralph Quintero
Top achievements
Rank 1
Ralph Quintero asked on 12 Dec 2016, 10:53 PM

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

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 14 Dec 2016, 01:41 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Ralph Quintero
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or