Theme builder import bootstrap

[ManniAT]

Hi,

 

I saw in the documentation:

 If you have customized the colors of Bootstrap before using it, and need Kendo UI to match the newly chosen colors, you will need to customize Kendo UI's bootstrap theme through the Kendo UI ThemeBuilder.

But I wasn't  lucky trying this.

I use Cyborg in my site an I want KendoUI to use the same colors / fonts.

When I copy the ...min.css to the ThemeBuilder nothing happens.

So how can I import such a theme?

Manfred

 

[Iliana Dyankova]

Hi Manfred,

Kendo UI ThemeBuilder is intended to customize the colors of all Kendo UI themes, however importing additional css in the ThemeBuilder is not supported. In order to apply the same colors to Kendo UI widgets like in your site you should use the ThemeBuilder.

Regards,
Iliana Nikolova
Telerik

 

 

[ManniAT]

Hi Iliana,

you wrote >>importing additional css in the ThemeBuilder is not supported

 

So what is the "Import" button (Page) in the ThemeBuilder for?

 

Manfred

[Iliana Dyankova]

Hi Manfred,

In this page you could add rules which override the default Kendo UI styles or change the values of the less variables. For example the following rule will change the Grid alt rows background: 

.k-alt {
    background: green;
}

and this one will change the value of the @alt-background-color variable: 

@alt-background-color: green;

Regards,
Iliana Nikolova
Telerik

 

 

[Stefan]

Hi,

I want to change the background-color for .k-alt specifically through the ThemeBuilder. How would I do it? There doesn't seem to exist an option to target that parameter...

[Teya]

Hello Stefan,

If you are using the Less ThemeBuilder, the .k-alt color takes the value of the Widget Base color. However, you cannot explicitly set a color only to the .k-alt row through the ThemeBuilder. What you can do, is add the following CSS rule in your custom CSS file:

  .k-alt {
    background-color: green;
  }

You can check the following Dojo for a reference:

https://dojo.telerik.com/UyILIjIV

I hope this helps.

 

Regards,
Teya
Progress Telerik

[Stefan]

Hello Teya,

thank you for your answer. Your suggestion is basically what we did in the end, except that we edited the kendo.custom.css file produced by the ThemeBuilder directly.

As far as I can tell the ThemeBuilder is not strictly applying the value of Widget Base to .k-alt. For example if you take Blue Opal as the theme to customize and try to apply this color to Widget Base: #8BAABF, .k-alt ends up being white, so the alternation of row-colors is disappearing in the grid...

Kind regards.

[Teya]

Hi Stefan,

What you are pointing out about the Blue Opal theme is indeed correct. This is because, in this specific theme, the alternating color is calculated with the following less function:

@alt-background-color: contrast(@base, lighten(@background, 3%), lighten(@base, 3%), 0.5);

Or in other words, it checks the color contrast between the base and background colors and chooses the one with the bigger contrast. When you use certain colors, such as #8BAABF, the calculations from this function result in white color, which is why, both the normal and the alternating rows become white.

This is why the best approach for this case is to add a custom CSS rule targeting the .k-alt row only as you already have.

 

Regards,
Teya
Progress Telerik

[Stefan]

Hello Teya,

thank you for clarification. This gives me peace of mind. :)

Kind regards.