Need help applying custom theme

5 posts, 0 answers
  1. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    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!
  2. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    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!
  3. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 29 Jun Link to this post

    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.
  4. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 29 Jun Link to this post

    FINAL EDIT: Got it working now.
  5. Dimitar
    Admin
    Dimitar avatar
    359 posts

    Posted 30 Jun Link to this post

    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.
Back to Top