Kleine Auswahlliste; Farben beim Wetter

[laberlaib]

Hallo,

ich bin auf der Suche nach Lösungen für 2 Dinge:
1) Ich möchte für meine Bewässerungsanlage eine Auswahl für die Uhrzeit und für die Dauer darstellen.
Uhrzeit geht mit dem datetimepicker-widget sehr gut.
Aber für die Dauer bekomme ich nichts gescheites hin.
Gerne hätte ich da eine Auswahl, die ähnlich aussieht wie die des datetimepickers: also relativ klein und dann mit einem kleinen Pfeil zum aufmachen.

Select sieht ganz anders aus und ist auch vergleichsweise groß.
Slider und Knob-Lösung habe ich versucht, aber die brauchen sehr viel Platz, der Slider hat oben und der Knob unten viel leere Fläche, was dann unzentriert nicht gut aussieht.

Ob ich die Werteliste hinterlege oder per mix-max-steps einstelle ist mir eigentlich egal.

Gibt es dafür etwas oder kann man aus dem datetimepicker mit anderen Einstellungen was ableiten?

2) Können die Icons beim Weather-Widget die Farbe ändern? Meine GUI baut derzeit auf einem weiß-grauen Hintergrund auf - da sieht man die grauen Icons nicht so richtig.

Code Auswählen Erweitern


class="blue"

hilft aber auch nicht weiter.
Oder muß ich dazu die Icons direkt modifizieren?
Selbiges Problem habe ich auch bei einem Knob-Widget. Dort wird über die class nur die Farbe des "Reglers" geändert, nicht aber die Farbe der Wertangabe im Zentrum.

laberlaib

[setstate]

Zu 1. müsste man eine CSS Class anlegen, die dem Select Widget das Aussehen des Datetimepickers verleiht. Sollte nicht schwer sein. Nur etwas friemlich und zeitaufwendig.

Zu 2. für knob basierende Widgets ändert data-inputcolor die Farbe des Sollwertes. Siehe Parameter für Knob. Weather und color muss ich mir anschauen.

[laberlaib]

Das war eine schnelle Antwort, danke.

1) Lieber etwas komplett anders, als ein Layout was so aussehen soll, es aber nicht schafft: Darum habe ich jetzt doch einen Slider verwendet und per

Code Auswählen Erweitern


.slider_horizntal.narrow{
    margin-top:-30px !important;
}

den Abstand oben rausgenommen.
Jetzt siehts etwa so aus wie bei Deinem Beispiel hier:
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Beispiel_slider
Davor hatte ich immer 10+30 = 40 px Lücke (10 ist Default margin-top)

2) Das mit dem Wettericon wäre schon, wenn man da die Farbe selber wählen könnte.

Generell: Kann ich irgendwo den fertigen Browser-Sourcecode anschauen, so dass dieser mir CSS-Classen-mäßig auf die Sprünge helfen kann? Wenn ich "Element untersuchen" mache, dann bekomme ich nur die <div>-Schlacht angezeigt.

[setstate]

Die gängigen Desktop Browser haben Developer Tool eingebaut. Da gibt es dann DOM Explorer bzw. Inspektor. Damit kann man ganz einfach jedes Element anklicken und die angezogen CSS Eigenschaften ansehen und temporär ändern.