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

Need help applying custom theme

4 Answers 181 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Divyesh
Top achievements
Rank 1
Divyesh asked on 28 Jun 2017, 02:21 PM
Hey,

I'm new to KendoUI and have been using it with Angular 2. I created a custom theme (http://demos.telerik.com/kendo-ui/themebuilder/), and got a kendo.custom.css file, along with a .json and LESS style sheet.

Now, how do I apply this theme? I tried adding it similar to how I added my regular style.css; by providing the kendo.custom.css in "styles" component of angular-cli.json, but got a "failed to compile" error. Looked at some resources and they said to provide it as a <link href="">, but this gives a "Cannot get localhost:4200/path_to_the_css" error.

I realize this might be a basic question, but I'm stuck anyway. Appreciate any help. Thank you!

4 Answers, 1 is accepted

Sort by
0
Divyesh
Top achievements
Rank 1
answered on 28 Jun 2017, 08:33 PM
EDIT: I managed to apply the theme (I think) by uploading the css dropbox and providing its link as a <link href=""> in the header.

However, it seems to work only on few of the widgets:
http://imgur.com/a/8f66n

^It's working on the KendoMenu (cursor is on it right now, so it's blue, the color I chose for highlighting), but not on the Panelbar and switch buttons, which still show the default kendo theme.

The KendoMenu is configured as:
$(document).ready(function() {
          $("#menu").kendoMenu();
      });

May this have something to with it?

Thank you!
0
Divyesh
Top achievements
Rank 1
answered on 29 Jun 2017, 02:53 PM
EDIT #2: A little update. Not sure if I would call it progress:

So since the default theme was taking over the newly applied theme, I tried removing the default theme declaration from styles.scss, and kept the blueopal/custom theme <link> in the header (tried both separately). It was desperate, I know. The result is as shown in the attachment.

It got applied. BUT, the dropdowns are not, well, dropping at the correct location, rather they're at the top of the screen. Probably because the default theme And the switch button toggle has disappeared.

Hopefully there's a way to configure these controls without the default theme now, and I'd be set.
0
Divyesh
Top achievements
Rank 1
answered on 29 Jun 2017, 07:47 PM
FINAL EDIT: Got it working now.
0
Dimitar
Telerik team
answered on 30 Jun 2017, 09:33 AM
Hi Divyesh,

Thank you for the follow-up. I am glad to know that you have managed to resolve the issues faced and applied the custom theme successfully.

Regards,
Dimitar
Progress Telerik
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
Divyesh
Top achievements
Rank 1
Answers by
Divyesh
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or