Theme builder import bootstrap

9 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 25 Apr 2015 Link to this post

    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

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Apr 2015 Link to this post

    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.

     
  3. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 29 Apr 2015 Link to this post

    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

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 May 2015 Link to this post

    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.

     
  5. Stefan
    Stefan avatar
    12 posts
    Member since:
    May 2018

    Posted 24 Sep in reply to Iliana Nikolova Link to this post

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

  6. Missing user
    Missing user avatar

    Posted 26 Sep Link to this post

    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.
  7. Stefan
    Stefan avatar
    12 posts
    Member since:
    May 2018

    Posted 26 Sep in reply to Missing user Link to this post

    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.

  8. Missing user
    Missing user avatar

    Posted 30 Sep Link to this post

    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.
  9. Stefan
    Stefan avatar
    12 posts
    Member since:
    May 2018

    Posted 30 Sep in reply to Missing user Link to this post

    Hello Teya,

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

    Kind regards.

Back to Top