CSS Styles deaktivieren

[ares72]

Hallo Wolfram,

… Apropos Style... kann man die background-color in Zeile 411 (Active slider track) auch durch eigene Styles nachträglich wieder "deaktivieren" ohne die Original-Datei zu ändern? Mit dem blauen Background sieht man dann nämlich blaue Icons dort nicht mehr und ich habe die Zeile daher mangels besseren Wissens in der Original-Datei auskommentiert, da designs in dropins (noch) nicht vorgesehen sind.


EDIT wvhn: Thema abgetrennt von hier.

[wvhn]

Jede CSS-Definition kannst Du in der visu.css im Ordner Deiner eigenen Seiten überschreiben.

Gruß
Wolfram

[ares72]

Wie ich in meiner visu.css die background-color passend überschreibe habe ich nicht herausgefunden, da ich hier leider nach Versuch und Irrtum vorgehen muss.

Manfred

PS: Mir fällt gerade auf, dass ich mich mit meinen eigenen Icons in dropins für SW oder WS entscheiden muss. Oder kann ich das {{ icon0 }} irgendwie trotz Pfad integrieren?

[wvhn]

Ich hab noch nicht ganz verstanden, warum Du die Hintergrundfarbe des Slider-Tracks loswerden willst. Eigentlich sollten da ja keine Icons dahinter sein.
Wenn Du das durch Auskommentieren der Zeile 411 in der darkblue.css gelöst hast, müsstest Du das gleiche Ergebnis erzielen mit folgendem Code in der visu.css:

.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active {
    background-color: transparent;
}

Die visu.css wird als letzte css-Definition eingelesen und überschreibt ältere Definitionen für dieselben Selektoren.

Die eigenen icons müsstest Du mit "dropins/{{ icon0 }}" adressieren können.

Gruß
Wolfram

[ares72]

Bilder sagen mehr als tausend Worte.
Lass es mich am Beispiel "Example1.smarthome" zeigen.

• Bild inactive.png: erster Klick auf "Flure / Nebenräume"
• Bild active.png: zweiter Klick auf "Flure / Nebenräume" mit Original-Design und blauen Icons auf blauem Hintergrund
• Bild auskommentiert.png: zweiter Klick auf "Flure / Nebenräume" mit Original-Design ohne Zeile 411 > background-color: #22aadd

Das mit den Icons klappt aber und auf die Syntax wär ich nie gekommen - DANKE:

src="dropins/{{ icon0 }}/iconname.svg"/>

Viele Grüße
Manfred

[wvhn]

ares72 Ich hab das Thema mal abgetrennt, denn sonst wird es zu sehr off-topic.

Das geschilderte Problem lässt sich bei mir schwer reproduzieren. Mit Firefox ist es mir nicht gelungen - mit Edge dann doch. Üblicherweise wird die Schaltfläche kurz aktiv (mit Hintergrundfarbe) und wechselt dann zurück in den inaktiven Zustand. Letzteres klappt manchmal nicht, wenn man die Schaltfläche anklickt, bevor die Seite fertig geladen ist. Das müsste man sicherlich programmatisch abfangen - oder man muss einfach mehr Geduld beim Bedienen der Visu aufbringen

Wenn das zu häufig vorkommt, kann man das Verhalten in der visu.css gezielt für diesen Fall abstellen:

.ui-listview>li .ui-btn.ui-btn-active {
    background-color: transparent;
}

Gruß
Wolfram

[ares72]

Hallo Wolfram,

bei mir tritt das in Brave/Chrome auch mit wahrscheinlich immer noch zu wenige Geduld weiterhin häufig auf. Mit den Beispiel-Pages teste ich aber auch nicht so häufig und vielleicht liegt es ja auch an nur meiner Page, dass das bei mir reproduzierbar auftritt. Auf Wunsch kann ich gerne versuchen ein Minimal-Beispiel zu erstellen, aber nur falls Dir ansonsten langweilig wird.
Dein Vorschlag zur Änderung in der visu.css meiner Seite hat (bei mir) irgendwie nicht funktionieren wollen, ich hatte das anstatt transparent auch absichtlich mit rot getestet, allerdings weiterhin das blau erhalten. Bisher war daher das Auskommentieren leider das einzige das bei mir dauerhaft geholfen hat.

Falls das bei Dir nicht wirklich nachvollziehbar ist, dann bin ich vielleicht ein Einzelfall, habe aber einen funktionierenden Workaround.

Danke
Manfred

[wvhn]

Hmm.
Den smartVISU-Cache und den Browser-Cache hast Du gelöscht? Die visu.css muss im Verzeichnis derjenigen Seiten liegen, die Du gerade testest. Und die root.html, in der die css-Definitionen importiert werden, sollte unverändert sein.

Hab nochmal ein bisschen selbst getestet. Die darkblue.css ist deutlich anders aufgebaut, als die übrigen Designs. Es fehlen auch einige Definitionen, z.B. weitere "swatches". Der oben gezeigte Code in der visu.css hilft bei mir zuverlässig in allen Browsern - allerdings NUR beim Design darkblue. Dafür hatte ich ihn ja auch erstellt.

Das "Aktivieren" der Schaltflächen hat mit Ungeduld doch nichts zu tun. Die Schaltflächen werden aktiviert, wenn die im zugehörigen Link enthaltene Seite bereits angezeigt wird und man dann die Schaltfläche am oberen oder unteren Rand anklickt. Das sollte so nicht sein und das muss ich mir mal näher ansehen.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

mein Workaround funktioniert nicht mehr im Zusammenspiel mit dem USZU-Plugin, daher brauch ich bitte nochmal Deine Hilfe.

Das von Dir festgestellte Verhalten tritt bei mir deutlich "zu häufig" aufund ich bekomme das mit Deinem Code nicht ans Laufen.
Ich habe Deinen Code ans Ende der visu.css meiner Seite gestellt und die restlichen stylesheets dort funktionieren auch.

Hast Du eine Idee, was ich falsch mache, da das bei mir nicht funktionieren will?

Viele Grüße
Manfred

[wvhn]

Hallo Manfred,

der Effekt tritt auf, wenn man auf einer bestimmten Seite ist und dann den Link / Menüpunkt für diese Seite noch einmal aufruft. jQuery mobile setzt für den Übergang zwischen zwei Seiten die Klasse .ui-btn-active und entfernt diese nach dem Übergang wieder. Wenn man aber auf der selben Seite bleibt, klappt das Entfernen der Klasse nicht mehr.

Ich habe jetzt eine CSS-Definition für die visu.css, die für alle Designs mit dunklem Hintergrund funktioniert. Sie setzt die Einstellungen für die Klasse ui-btn-active auf die CSS-Eigenschaften der inaktiven Schaltfläche.

.ui-listview>li .ui-btn.ui-btn-active {
    background-image: linear-gradient( #444444 , #2d2d2d );
    color: #fff;
    text-shadow: 0 1px 1px #111;
}

Nachteil ist, dass die Schaltfläche beim Betätigen nicht mehr kurz aufleuchtet. Fürs erste sollte man aber damit leben können. Vielleicht finde ich ja noch einen Workaround für das Verhalten von jQuery mobile.

Das Auskommentieren in der darkblue.css musst Du dann natürlich rückgängig machen. Dann funzt auch das UZSU-Popup wieder richtig. Die visu.css muss im Verzeichnis der Seiten sein, die Du verwendest, also auch in den Verzeichnissen der Beispielseiten, wenn Du diese auch mit der Änderung ausstatten willst.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

erstmal vielen Dank, dass Du Dich noch so spät um meine Probleme kümmerst. Ich hoffe, Du kannst nur wegen der aktuellen Hitze nicht schlafen...
Auf das "kurz aufleuchten" kann ich gerne verzichten, ein blauer Button mit blauem Inhalt bleibt und fällt deutlich mehr auf.

Ich habe auf meiner Raum-Seite oben noch ein vertikales Menü zum Unterteilen der Heizung, das auf allen Heizungsseiten eingebunden wird.
Dort ist mir das Verhalten eigentlich aufgefallen, nicht im Menü links, wo ich das mit etwas Geduld und "unten klicken" aber reproduzieren konnte.

{% include 'rooms/Keller_Heizung_menu.html' %}

<style>
.nav-custom .ui-btn {
padding-top: 0px !important;
padding-bottom: 4px !important;
}
</style>

<div data-role="navbar" class="nav-custom">
<ul>
<li><a href="index.php?page=rooms/Keller_Heizung">
<img class="icon {% if page == 'Keller_Heizung' %}icon1{% else %}icon0{% endif %}"
src="dropins/{{ icon0 }}/LWZ403SOL.svg"/>
<br>Info</a></li>

<li><a href="index.php?page=rooms/Keller_Heizung_Lueftung">
<img class="icon {% if page == 'Keller_Heizung_Lueftung' %}icon1{% else %}icon0{% endif %}"
src="{{ icon0 }}vent_ventilation_level_automatic.svg"/>
<br>Lüftung</a></li>

<li><a href="index.php?page=rooms/Keller_Heizung_24h">
<img class="icon {% if page == 'Keller_Heizung_24h' %}icon1{% else %}icon0{% endif %}"
src="{{ icon0 }}time_graph.svg"/>
<br>24h</a></li>

<li><a href="index.php?page=rooms/Keller_Heizung_Leistungsaufnahme">
<img class="icon {% if page == 'Keller_Heizung_Leistungsaufnahme' %}icon1{% else %}icon0{% endif %}"
src="{{ icon0 }}measure_power_meter.svg"/>
<br>kWh</a></li>
</ul>
</div>

Mit Deinem Beispiel und viel Versuch&Irrtum, da ich mich mit CSS überhaupt nicht auskenne, habe ich noch einen zweiten Block eingefügt.

.ui-grid-c>li .ui-btn.ui-btn-active {
background-image: linear-gradient( , #2d2d2d );
color: #fff;
text-shadow: 0 1px 1px #111;
}

Wie das zum code oben passt verstehe ich nicht, aber es funktioniert nun mit der Original darkblue.css und der UZSU. DANKE!

Kann man ".ui-listview" und ".ui-grid-c" auch zusammenfassen bzw. universell alle ".ui-btn.ui-btn-active" so anpassen?

Viele Grüße
Manfred

Edit: Klappt das auch in der darkblue.css, damit andere Styles nicht ebenfalls beeinflusst werden?

[wvhn]

Guten Morgen Manfred,

prima, dass das geklappt hat.

Da die CSS-Klassen einen einheitlichen Stil sicher stellen und überall in jQuery mobile Widgets verwendet werden, kann es zu unerwünschten Ergebnissen kommen, wenn man alle Kombinationen mit .ui-btn-active global anpasst. Das hat das UZSU-Popup schon gezeigt. Deshalb bevorzuge ich selektive Änderungen dort, wo einem die Darstellung nicht gefällt.

Die Änderungen kannst Du natürlich auch in die darkblue.css schreiben. Dann musst Du halt bei jedem Update von smartVISU sicher stellen, dass sie nicht verloren gehen. Wenn Du häufig die Designs wechselst und auch die hellen Designs (z.B. Ice) nutzt, dann ist das sinnvoll.

Sind die beiden Threads damit für Dich gelöst? Dann editiere bitte jeweils den ersten Post und setze das „Präfix“ (oben links) auf „gelöst“.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

bei anderen Designs ist das Icon ja immerhin noch erkennbar, bei darkblue sieht man aber nur noch eine einfarbige Fläche.

Ich bevorzuge daher die Änderung direkt in darkblue.css auch wenn ich das dann bei Updates nachziehen muss.

.ui-grid-c>li .ui-btn.ui-btn-active,
.ui-listview>li .ui-btn.ui-btn-active {
background-image: linear-gradient( , #2d2d2d );
color: #fff;
text-shadow: 0 1px 1px #111;
}

Für andere Designs kann man das bei Bedarf mit angepassten Farben übernehmen.

Falls Du keinen passenden Workaround für für das Verhalten von jQuery mobile findest, dann ist eventuell eine Übernahme in den Standard sinnvoll, da die Änderung im Vergleich alten Lösung zumindest aus meiner Sicht besser aussieht.

Danke
Manfred