Using theme builder with earlier versions

[Antti]

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

[Ivan Zhekov]

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

[Antti]

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]

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]

I've attached a simple project with a gulp file that convert our json files to sass and then compiles them.

[Antti]

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]

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.