SmartVisu Icons und Widgets Farben ändern

Begonnen von ParaChris82, 01 März 2016, 08:32:56

Vorheriges Thema - Nächstes Thema

ParaChris82

Einen wunderschönen guten Morgen (der Montag ist ja zum Glück geschafft) :)

Seit ca. 1 Woche richte ich schon fleißig SmartVisu ein. Funktioniert auch alles soweit, nur bei einem Thema komme ich einfach nicht weiter seit Tagen.
Ich würde gerne Icons und vor allem Widgets verschiedene Farben geben.

Zum Bespiel verwende ich zum schalten der Funksteckdosen den "basic.flip".
Ein Traum wäre es wenn er im Zustand "off" die Farbe rot hätte und im Zustand "on" die Farbe grün.

{{ basic.flip(id, gad, txt_on, txt_off) }}

Kann mir vielleicht jemand einen Tipp geben wo und wie ich genau den Hex Farbcode einfügen muss?

und genau das selbe Spiel bei einem Icon, dass aber die Farbe nicht wechseln soll:

<img class="icon" src="{{ icon0 }}light_light.svg" />

Ich hoffe mir kann jemand helfen, wäre super!  :)

Vielen Dank im Voraus für eure Hilfe und Antworten.

Lg Chris

dev0

Wenn Du ein komplett neues Farbthema erstellen möchtest, dann wirst Du hier fündig:
https://code.google.com/archive/p/smartvisu/wikis/themeroller.wiki
http://themeroller.jquerymobile.com/

Wenn Du nur die Farben von einigen Symbolen ändern möchtest, dann solltest Du auf Smartvisu 2.8 wechseln. Der Autor hat angefangen das für Symbole einzubauen. Aber leider ist das (bis jetzt? ) nicht für alle Widgets umgesetzt. Für Dimmer, Switches und Dualswitches habe ich das selbst erweitert und veröffentlicht, da der Autor nicht geantwortet hat, ob er diese Erweiterung einbauen wird...
https://github.com/ddtlabs/smartvisu-widgets/tree/master/basic-devices
https://github.com/Martin-Gleiss/smartvisu

Alternativ zu sv 2.8 kannst Du auch die css tags selbst in Deiner visu.css ändern. Dazu untersuchst Du die Seite mit Tools wie Firebug, damit kannst Du Objekte "live" ändern und siehst die ids und classes. Danach kannst Du diese Änderungen in Deine visu.css eintragen.
https://addons.mozilla.org/de/firefox/addon/firebug/
https://wiki.selfhtml.org/wiki/CSS
http://www.css4you.de/

ParaChris82

WOW, vielen vielen Dank für die ausführlichen Erklärungen und den Links !!!  :)

Damit kann ich definitiv was anfangen. Jetzt muss ich nur noch schauen welche Methode ich nutze.

Viele Grüße Chris