LoxBerry-CSS - jQuery - Farben bei Flipswitch und Rangeslider

[olicat]

Hallo!

Ich suche nun schon seit Stunden die Stelle, an der die jQuery-Farben fuer den inaktiv-Status von Flipswitch und Slider "vergurkt" ist und finde sie einfach nicht.
:-(
Siehe Screenshot:



Bei aktivem Flipswitch sollte der Schalter wohl gruen unterlegt sein, ansonsten eben grau.
Auch die Hover-Animation klappt nur bei EIN (wechselt von weiss auf schwarz) - bei AUS passiert da keine Aenderung. Wobei ich dieses Verhalten nicht so schlimm finde.
Aber der Slider sollte nun wirklich nur den aktiven Bereich als gruen anzeigen, ausserhalb grau.

Das ist nicht nur bei meinen Plugins so, sondern z. B. auch in Weather4Loxone.
Auf den Demo-Seiten fuer jQuery passt das alles. Nur im LoxBerry leider nicht.



Habe ich da "nur" ein Verstaendnisproblem? Ist das bewusst so gemacht oder ein Fehler im LoxBerry?
Kann mir da jemand bitte mal auf die Spruenge helfen?

Vielen Dank, Oliver

[Prof.Mobilux]

Ja, das ist leider so. Warum weiß ich auch nicht. Ich habe da auch schon ewig gesucht, aber leider nichts gefunden...

[Christian Fenzl]

Ich schau heut Abend auch mal, vielleicht find ich was raus.

[Prof.Mobilux]

Das LoxBerry Theme ist mit dem ThemeRoller gemacht. https://themeroller.jquerymobile.com/

Vielleicht ist da auch irgendetwas mittlerweile inkompatibel - das stammt glaube ich noch aus 0.2.3 Zeiten.

[Christian Fenzl]

So wie ich das sehe, kann man da nur mit Tricks arbeiten.

jQm verwendet die Header/Footer-Farbe auch als Hintergrundfarbe für den deaktivierten Button.
In unserem CSS ist die Header-Farbe das bekannte grün, und die Aktiv-Farbe (die man explizit einstellen kann) das gleiche Grün.



Ich hab bissl probiert, und mit diesem CSS-Hack kann man das austricksen:

<style>
.ui-flipswitch.ui-bar-inherit {
background-color: #EEEEEE !important;
color:black !important;
text-shadow: none !important;
}
.ui-flipswitch-active.ui-bar-inherit {
background-color: #6dac20 !important;
color:white !important;
}
</style>

Das ist jetzt nur für den Flipswitch. Bei den anderen Controls, wo du das brauchst, müsstest du nachschauen, wie dort die Klasse heißt, sonst aber müsste das gleiche funktionieren.
Das #EEEEEE ist beispielhaft die Inaktiv-Farbe.



lg, Christian

[Christian Fenzl]

Prof.Mobilux Die Frage wäre, ob wir das selbst in unser CSS aufnehmen. Man müsste mal die Controls von olicat mitnehmen, und sollten wir später noch welche finden, wo das nicht passt, können wir es ja immer noch ergänzen. Wir haben jetzt auch schon ein paar Anpassungen des jQm-CSSes drin, z.B. für die Hilfe-Leiste.

[Prof.Mobilux]

Finde ich gut!

[olicat]

Hallo Christian!

Das ging ja schnell! Und es funktioniert! Super! Danke!

Beim Rangeslider konnte ich es (fast) auch korrigieren:

.ui-rangeslider .ui-slider-track {
background-color: #ffffff !important;
}

Allerdings klappt es da nur partiell. Initial ist es so wie gewuenscht: aeusserer Bereich weiss, innen: gruen.
Sobald ich aber den linken Knopf bewege, verliert der aktive Bereich die gruene Farbe.
Diese kommt dann zurueck, wenn ich den rechten Knopf bewege.
Da muss also noch an einer weiteren Stelle geschraubt werden - und auch hier verlief meine Suche/Probieren bisher erfolglos.
:-(

Ich wuerde diese Aenderungen LoxBerry-weit auch begruessen!

Oliver

[Christian Fenzl]

Probier bitte

<style>
.ui-slider-track,
.ui-flipswitch.ui-bar-inherit {
background-color: #EEEEEE !important;
color:black !important;
text-shadow: none !important;
}
.ui-slider-track {
z-index:2;
}
.ui-slider-bg.ui-btn-active,
.ui-flipswitch-active.ui-bar-inherit {
background-color: #6dac20 !important;
color:white !important;
}
</style>

Der linke Slider setzt die Background-Bar in den Vordergrund, ich hab den Zweck dafür aber nicht rausgefunden. Ich hab die active bar um eins weiter nach vorne gesetzt und es scheint damit zu funktionieren - kann aber sein, dass das irgendeinen Impact auf die Slide-Funktion hat, den ich nicht kenne.

Ist dir sonst ein Element aufgefallen, wo die Farben nicht passen?

[olicat]

Christian Fenzl,

danke, auch das passt jetzt ganz wunderbar!
Wie kriegst Du das nur immer so schnell raus? Auf den z-index waere ich nie und nimmer gekommen!

Die anderen von mir genutzten controls scheinen soweit zu passen.
Danke nochmal!

Oliver

[Christian Fenzl]

F12 Developer
Dort kannst du dir das DOM ansehen, und beobachten, wie js die Objekte modifiziert, zb wie der linke Slider einen z-Index:1 auf das track Element setzt, und es damit über active legt.