Forum | Appery.io

Evening and happy Wednesday or Thursday wherever you are!

I've followed this post :

https://getsatisfaction.com/apperyio/...

as I have a problem almost exactly as described in that post- however, implementing the solution - doesn't work (ok it works partially) for me.

The 'on' value - toggle - has the correct text - but none of the themed colors, and the off value - is invisible.

Also - since the libraries have changed - I believe you folks don't load all the css themes in memory any longer - and only the theme you've selected in the designer is in memory - when you execute.

So - I've used this code in a custom CSS asset.

body .ui-content .ui-flipswitch, .ui-slider.ui-slider-switch, body .ui-content .ui-flipswitch.ui-flipswitch-active{
width: 90px;
}
body .ui-content .ui-flipswitch.ui-flipswitch-active{
padding-left: 60px;
}
body .ui-content .ui-flipswitch .ui-btn.ui-flipswitch-on{
color: #2292e3;
}
body .ui-content .ui-flipswitch .ui-btn.ui-flipswitch-off{
color: #a3adb5 ;
}
html body .ui-flipswitch.ui-bar-f.ui-flipswitch-active{
background-image: none;
}

I get this result:

The desired color of the ON state - is the blue to the left (#2292e3) - with black as the Text color in the toggle, and in the off state the color is grey #a3adb5 - (same text color would be perfect) .

I expanded the solution Yurii offerred - as it looked like it should work (potentially dangerous agreed) with the 'off' color....

How can I get this to work?

Thank you in advance!

Bruce

Any ideas on this ?

Hi Bruce -

Not yet, we are working on it and we will update here.

Illya,

thanks for the update!

Appreciate it...
Bruce

Hi Bruce,

Please use following CSS code instead of yours:

pre

body .ui-content .ui-flipswitch, .ui-slider.ui-slider-switch, body .ui-content .ui-flipswitch.ui-flipswitch-active {
width: 90px;
}
body .ui-content .ui-flipswitch.ui-flipswitch-active {
padding-left: 60px;
}
body .ui-content .ui-flipswitch .ui-btn.ui-flipswitch-on {
color: #fff;
}
body .ui-page .ui-content .ui-flipswitch .ui-flipswitch-off {
color: #a3adb5;
}
html body .ui-page .ui-flipswitch.ui-flipswitch-active {
background-image: none;
}
html body .ui-grid-a .ui-block-a, html body .ui-grid-a .ui-block-b {
width: 14%;
}
.ui-header .ui-title {
text-overflow: clip;
margin: 0 30px;
}
.list_disableautodevider_true .ui-li-divider {
display: none;
}

/pre

This code should produce following result:

1. ON - http://prntscr.com/69450k/direct

2. OFF - http://prntscr.com/69452y/direct

   Regards.

Awesome - thank you!