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

Theme builder questions

7 Answers 280 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
JP13
Top achievements
Rank 1
JP13 asked on 08 Feb 2019, 08:46 PM

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.

7 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 13 Feb 2019, 10:26 AM
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.
0
JP13
Top achievements
Rank 1
answered on 13 Feb 2019, 08:51 PM

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?

 


0
Teya
Telerik team
answered on 14 Feb 2019, 03:13 PM
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.
0
JP13
Top achievements
Rank 1
answered on 19 Feb 2019, 08:12 PM

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.

0
Teya
Telerik team
answered on 21 Feb 2019, 02:24 PM
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.
0
JP13
Top achievements
Rank 1
answered on 21 Feb 2019, 04:12 PM
The bootstrap stylesheets should stay though correct? Just remove the 3 kendo ones I listed above correct?
0
Teya
Telerik team
answered on 22 Feb 2019, 11:29 AM
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.
Tags
General Discussions
Asked by
JP13
Top achievements
Rank 1
Answers by
Teya
Telerik team
JP13
Top achievements
Rank 1
Share this question
or