Theme builder questions

8 posts, 0 answers
  1. JP13
    JP13 avatar
    16 posts
    Member since:
    Sep 2018

    Posted 08 Feb 2019 Link to this post

    My organization is fairly new to Telerik and I have been tasked with two goals to start with.  The first is to use the theme builder to try to get the colors to match our existing desktop apps, easy enough for the most part.

    Our app is going to be a Core MVC app, so I start by selecting 'UI for ASP.NET Core'.  From there I have tried playing with both Default and Bootstrap (though I am honestly not sure which of the two I should be using).  After I get everything mostly looking how I want I have no issues downloading the file, but I am unsure exactly where to place it.

    In Visual Studio I am creating a new Telerik C# ASP.NET Core MVC Application, from there I am selecting Grid and Menu  in the project wizard.  From there I am not entirely sure where to place the all.css and variables.scss files to preview the changes to the basic app. 

     

    My final question is, within the theme builder the color swatches has a nice side menu that pops out.  Which control in Telerik would this be?

     

    Apologizes for all the questions, trying to wrap my head around all of this. Hopefully this all makes sense and I gave enough information.

  2. Teya
    Admin
    Teya avatar
    1 posts

    Posted 13 Feb 2019 Link to this post

    Hi Jed,

    To add the customized theme that you have created via the Sass Theme Builder, follow the "Adding the Themes to Your Project" instructions from the Kendo ASP.NET documentation here:

    https://docs.telerik.com/aspnet-mvc/styles-and-layout/overview#adding-the-themes-to-your-project

    Basically, you need to place the all.css file in the Content folder of your application and bundle the styles in order to render them or reference the file directly in your _Layout.cshtml file.

    The side menu in the Theme Builder is custom made for the website of the theme builder and it is based on Angular. However, we have a similar component- Responsive Panel bar. You can check the demo here:

    https://demos.telerik.com/kendo-ui/responsive-panel/index

    I hope this answers your questions.


    Regards,
    Teya
    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.
  3. JP13
    JP13 avatar
    16 posts
    Member since:
    Sep 2018

    Posted 13 Feb 2019 in reply to Teya Link to this post

    Is the ResponsivePanel not a part of Telerik.UI.for.AspNet.Core (2019.1.115)?  When I try to create one I get the following:

    'WidgetFactory<dynamic>' does not contain a definition for 'ResponsivePanel' and no accessible extension method 'ResponsivePanel' accepting a first argument of type 'WidgetFactory<dynamic>' could be found (are you missing a using directive or an assembly reference?)

     

    I have a blank Telerik C# ASP.Net Core MVC Application that I am trying to create it in.  I have a very simple view page where I am trying to load the responsive panel.  The Panel Bar worked fine, but I can't get the Responsive Panel to work.  Are Responsive Panels not compatible with Razor pages?

     


  4. Teya
    Admin
    Teya avatar
    1 posts

    Posted 14 Feb 2019 Link to this post

    Hi Jed,

    The Responsive Panel works with ASP.NET Core tag helpers. Can you try configuring it using the tag helpers as it is demonstrated in the ResponsivePanel Demo for AspNet.Core here:

    https://demos.telerik.com/aspnet-core/responsive-panel/index


    Please, get back to me if you encounter any further difficulties.


    Regards,
    Teya
    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.
  5. JP13
    JP13 avatar
    16 posts
    Member since:
    Sep 2018

    Posted 19 Feb 2019 Link to this post

    I have the Responsive Panel working at this point.  I do still have a few css questions.

     

    I am referencing the all.css file in my _Layout.cshtml file.  My question is where I should be referencing them, and if I should leave the generated files in.

     

    I have the following line at the end of my head tag:

    <link href="~/css/all.css" rel="stylesheet" type="text/css" />

     

    Further up the original 3 stylesheets are still there.

      <link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />

      <link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
      <link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

     

    When I leave them in, certain elements aren't coloring as they should (Grid headers for example) and the button sizes seem off.  When I remove them, the colors are all correct, but there are other small changes (text size changes).

    Obviously I am doing something wrong, I am just not sure which way it should be.

  6. Teya
    Admin
    Teya avatar
    1 posts

    Posted 21 Feb 2019 Link to this post

    Hello Jed,

    Generally speaking, the all.css file, generated by the SASS theme builder, contains all of the needed styles. Having said that, when you include it you should remove all other stylesheet references.

    The fact that there are some element changes is expected since you have previously used a Less-based Material theme, on the other hand, now, you are using the SASS-based Material theme, and there are some differences between them.


    Regards,
    Teya
    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.
  7. JP13
    JP13 avatar
    16 posts
    Member since:
    Sep 2018

    Posted 21 Feb 2019 in reply to Teya Link to this post

    The bootstrap stylesheets should stay though correct? Just remove the 3 kendo ones I listed above correct?
  8. Teya
    Admin
    Teya avatar
    1 posts

    Posted 22 Feb 2019 Link to this post

    Hi Jed,

    Yes, you are correct. You should remove the listed kendo CSS files and leave the reference to the bootstrap stylesheets.


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