Kendo less file implementation

2 posts, 0 answers
  1. Andreas
    Andreas avatar
    3 posts
    Member since:
    Jan 2014

    Posted 11 Dec 2014 Link to this post

    Im trying to integrate kendos less-files into our own theme-handling in our webpage. I have a few starting variables that I want to implement, for example: 

    @primary-color: #99a4ae; /*gray*/
    @secondary-color: #00b3e3; /*panton blue*/
    @third-color: #c21e24; /*panton green*/ 

    I then add the kendo.material.less to my lesscompiler, and then use these variables to replace the ones I feel are applicable in my case. In my first trial I wanted to make all the buttons into our secondary color so I was very pleased when i found the following line in kendo.material.less:

    @button-background-color: #f9f9f9;

    And so I changed this to:

    @button-background-color: @secondary-color;

    Then I start my project and realize that the spans as well as my kendo dropdownlists have gotten this color. Have I missunderstood the use of this less-variable, it seems to be affecting way to much, and when I look at the code, its later used in several places not applicable to the button:

    /* Splitter */
    @splitbar-background-color: @button-background-color;.

    k-dropdown .k-state-default
        border-color: @button-border-color;
        background-position: 50% 50%;
        background-color: @button-background-color;

    span.k-colorpicker {
    background-color: @button-background-color;

    Could I get som feedback on the proper use of your less files and how I can use my varibles to only affect the background of the button? Files used in the project are kendo.material.ess and theme-template.less

  2. Dimo
    Dimo avatar
    8457 posts

    Posted 13 Dec 2014 Link to this post

    Hello Andreas,

    According to our designs, Buttons, DropDownLists and Splitter splitbars should have consistent appearance, that's why we are using the same color variable. Of course, you are not required to follow this pattern and can use different colors, according to your preferences.

    On a side note, please avoid posting duplicate support tickets and forum threads, and when it is necessary to do so, please notify us in at least one of the two places. Thanks.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top