Changing switch color in on position

7 posts, 0 answers
  1. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 25 Feb 2013 Link to this post

    I would like to change the color of the Kendo Mobile switch when it is in it's on position. By default it is white text in a blue background, but I want a green background.

    I haven't been able to find the right css to do that and the themebuilder doesn't seem to be able to do that?

    Any hints?
  2. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 25 Feb 2013 Link to this post

    Hi JD,

    Here is the class that you should use:

    .km-switch-container{
        background-color: rgb(0, 200, 0);
    }

    If you want to apply it only when it is on you should prefix it with km-switch-on:
    .km-switch-on .km-switch-container{
        background-color: rgb(0, 200, 0);
    }

    Note: Actually I found that through the Style Builder - you just have to place the color eye-drop on the container part which is a little bit trickier.All the best,
    Stefan Dobrev
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. Kendo UI is VS 2017 Ready
  4. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 25 Feb 2013 Link to this post

    Close, but no what I was looking for... See the image in this link: https://www.dropbox.com/s/nhrlixbul1juiqv/kendo-switch.png

    The background is green now, but the switch itself is blue (and that is what I want in green).

    Thanks Stefan
  5. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 26 Feb 2013 Link to this post

    For the label you can use: .km-switch-label-on.

    Tip: You can also use the debug tools to see what class Kendo applies on the specific elements and then style them appropriately.

    -sdobrev

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  6. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 26 Feb 2013 Link to this post

    Thank you again Stefan, that was the one I needed.

    With your hint I was also able to find how to change the color of scrollbar. In case that anyone needs it:

    .km-android .km-touch-scrollbar {
        background-color: #87C442;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }

    .km-ios .km-touch-scrollbar {
        background-color: #87C442;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }

  7. Lwin
    Lwin avatar
    3 posts
    Member since:
    Feb 2012

    Posted 06 Feb 2014 Link to this post

    I have an question regarding the color switching. This time I have list of items:

    <li>Restaurants<input data-role="switch" id="restaurant-switch" data-change="onChangeRestaurant"/></li>
    <li>Coffee Shops<input data-role="switch" id="coffee-switch" data-change="onChangeCoffee"/></li>

    I would like the Restaurants to have the default green back while the coffee shops to have red back.

    .km-switch-on .km-switch-container{
        background-color: rgb(200, 0, 0);
    }

    The above CSS will over-ride for all switches.

    I tried
    #coffee-switch.km-switch-on #coffee-switch.km-switch-container{
        background-color: rgb(200, 200, 0);
    }

    as well as placing the switch in a different class entirely as well. No luck. What am I missing? I assume something simple. Been starring at this for 2 hours now.

    Thanks

    Lwin
  8. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 10 Feb 2014 Link to this post

    Hi Lwin,

    Thanks for contacting us.

    I would suggest you putting different id for each <li> item and use the following selectors:
    <li id="coffee-switch">
        Coffee Shops
        <input data-role="switch" id="some"/>
    </li>

    #coffee-switch .km-switch-on .km-switch-container{
        background-color: rgb(200, 200, 0);
    }

    I hope it helps.

    Regards,
    Zdravko
    Telerik
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
Back to Top
Kendo UI is VS 2017 Ready