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 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

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.

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?

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:

Further up the original 3 stylesheets are still there.

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.

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.