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

Changing switch color in on position

6 Answers 722 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jan-Dirk
Top achievements
Rank 1
Jan-Dirk asked on 25 Feb 2013, 04:36 PM
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?

6 Answers, 1 is accepted

Sort by
0
Stefan Dobrev
Telerik team
answered on 25 Feb 2013, 05:51 PM
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.
0
Jan-Dirk
Top achievements
Rank 1
answered on 25 Feb 2013, 07:35 PM
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
0
Stefan Dobrev
Telerik team
answered on 26 Feb 2013, 09:10 AM
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.
0
Jan-Dirk
Top achievements
Rank 1
answered on 26 Feb 2013, 10:37 AM
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;
}

0
Lwin
Top achievements
Rank 1
answered on 06 Feb 2014, 08:10 AM
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
0
Zdravko
Telerik team
answered on 10 Feb 2014, 04:56 PM
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)
Tags
General Discussions
Asked by
Jan-Dirk
Top achievements
Rank 1
Answers by
Stefan Dobrev
Telerik team
Jan-Dirk
Top achievements
Rank 1
Lwin
Top achievements
Rank 1
Zdravko
Telerik team
Share this question
or