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
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
Rank 1
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?
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
Rank 1
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.
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
Rank 1
Yes, you are correct. You should remove the listed kendo CSS files and leave the reference to the bootstrap stylesheets.
Regards,
Teya
Progress Telerik