Using theme builder with earlier versions

1 Answer 41 Views
General Discussions
Antti
Top achievements
Rank 1
Antti asked on 01 Mar 2022, 11:08 AM

Hi,

I was trying to create a custom theme with the Sass ThemeBuilder, but noticed the resulting css file doesn't work correctly with our Kendo version.

For example, the css contains styles for class ".k-treeview-leaf", which is not part of the html created for the TreeView widget.

Is it possible to use the theme builder with earlier versions, and if not, what would be the recommended steps to customize our themes?

Also, can we somehow get the different swatches prebuilt for the base themes (.css and .json -files)? I wasn't able to find them in our release package.

Our Kendo version:

2021.2.511


Best regards,
Antti

1 Answer, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 04 Mar 2022, 09:46 AM

Hello, Antti.

Up until now (and for the time being), theme builder works with the latest available version. In this particular case it means that the themes are compatible with 2022 R1 (2022.1.119) or 2022 R1 SP1 (2022.1.301) depending on when exactly you used themebuilder.

In that regard, 2022 R1 was a huge release with lot's of improvements and major changes. See the changelog -- https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2022-(version-2022-1-119).

So the answer some of the questions directly:

Is it possible to use the themebuilder for earlier versions: No, it's not possible. However, you could use the "internals" of themebuilder to compile the themes on your own. If you are feeling OK with a bit of javascript and some gulp tasks, I can provide you with step by step instructions.

Can you get the swatches prebuilt -- absolutely! They are part of the distributions starting with 2021.3.1109. However, if you can't upgrade Kendo UI for jQuery, and you are comfortable with a bit of JS, I can show you how you can build them.

Regards,
Ivan Zhekov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Antti
Top achievements
Rank 1
commented on 08 Mar 2022, 07:44 AM | edited

Thanks Ivan,

I'd very much appreciate the steps how to build theme swatches for our version.

I had tried the steps mentioned here, but wasn't able to get all the swatches yet (tried switching to correct git tags, and running sass:swatches -command):

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#using-the-build-process-of-the-themes

But maybe there is another way, as you mentioned?

We probably won't be upgrading our Kendo version until later this year, or maybe after the theme overhaul is ready and our less themes are deprecated.

Also, if you have the steps to use theme builder for our version, I'm ready to give it a try.

Ivan Zhekov
Telerik team
commented on 11 Mar 2022, 09:24 AM

Unfortunately, there is no way to use the themebuilder for previous versions. I am preparing the example as we speak and I will attach it, or provide you with a gist.
Ivan Zhekov
Telerik team
commented on 14 Mar 2022, 09:38 AM

I've attached a simple project with a gulp file that convert our json files to sass and then compiles them.
Antti
Top achievements
Rank 1
commented on 15 Mar 2022, 11:33 AM | edited

I tried building swatches for our version, and it seems to be working. Here's what I did:

1) Downloaded a theme from theme builder (ex. Bootstrap Turquoise)

2) Edited package.json file to use our version:

      "devDependencies": {
                 "@progress/kendo-theme-bootstrap": "4.35.1",

3) Copied .json and .scss files under the "gulp-json-example" folder, similar to "my-swatch" example

4) Ran "gulp swatches"

 

Thanks a lot your help. I'm just wondering if the .json file downloaded from theme builder is really compatible with the earlier version, but so far it seems so (I understand it's not officially supported).

Ivan Zhekov
Telerik team
commented on 17 Mar 2022, 02:51 PM

The json files are compatible with few minor exceptions:

  • There was an earlier version that had a "themeBuilder" field instead of "groups" field;
  • as we move towards improving our components certain variables will change from $kendo-variable to $kendo-variable-name. You just need to remove the kendo- prefix and things will work for older versions.

The process of converting to sass, however, is universal. Meaning that any field that is encountered will be translated to a variable name.

Tags
General Discussions
Asked by
Antti
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Share this question
or