This is a migrated thread and some comments may be shown as answers.

Theme builder import bootstrap

8 Answers 99 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
ManniAT
Top achievements
Rank 2
ManniAT asked on 25 Apr 2015, 08:25 AM

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

 

8 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 28 Apr 2015, 05:21 PM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
ManniAT
Top achievements
Rank 2
answered on 29 Apr 2015, 03:44 PM

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

0
Iliana Nikolova
Telerik team
answered on 01 May 2015, 11:30 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 24 Sep 2019, 02:39 PM

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

0
Teya
Telerik team
answered on 26 Sep 2019, 11:41 AM

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

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.
0
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 26 Sep 2019, 12:44 PM

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.

0
Teya
Telerik team
answered on 30 Sep 2019, 08:42 AM

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

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.
0
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 30 Sep 2019, 11:38 AM

Hello Teya,

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

Kind regards.

Tags
General Discussions
Asked by
ManniAT
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
ManniAT
Top achievements
Rank 2
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
Teya
Telerik team
Share this question
or