Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[etv]

Liebe Leute,
ich beginne mich gerade mit VIS-2 zu beschäftigen und für unsere Wecker wäre das Widget "gestyled Zeiteingabe" perfekt...
...aber ich kann da die Farben des Symbols und der Schrift nicht ändern? Egal was ich in CSS Font & Text des Widgets eintrage, die Farbe bleibt dunkelgrau - bei einem schwarzen Hintergrund des Bildschirms etwas unpraktisch.
Auch das "Popup" mit den Stunden und Minuten Einträgen kann man irgendwie nicht ändern...
Gibt es da einen Hack oder muss ich mi was anderes überlegen?

Liebe Grüße
Tom

[AxLED]

Hallo zusammen,

darüber bin ich heute auch gestolpert. Ich schaffe es auch nicht das Erscheinungsbild der "gestylt Zeiteingabe" zu ändern.
Vielleicht hat ja jemand einen Tipp bzw. alternative Zeiteingabe.

Gruß

AxLED

[OliverIO]

@etv

tatsächlich, da scheint einiges Kaput zu sein.
direkte farbangabe über das widget funktioniert nicht

nächster versuch war über den css-reiter eine anweisung einzutragen, der ist wohl auch kauptt

letzte möglichkeit des workarounds:

platzieren eines html elements und folgendes eintragen

Alternative A

#w000001 gegen die widget id bei euch ersetzen

<style>
#w000001 input {
    color:red;
}
</style>

Alternative B

ist besser wiederverwendbar
wieder das folgende css in die das html widget kopieren / alternativ ohne style tags in den css reiter, falls das bei euch funktioniert
und im betroffenen widget unter Generell/CSS Klasse dann
farberot
ohne den punkt eintragen

<style>
.farberot input {
    color:red;
}
</style>

du kannst gern einen issue in github bei vis-2 dazu erstellen

[MartinP]

@oliverio Ich habe schon einmal bei einem Issue, das stable Repository betreffend die Antwort bekommen, ob ich das schon mit dem latest-Repostory probiert hätte, und nicht die Ergebnisse posten wolle ... (2.9.64 vs 2.11.2)

https://download.iobroker.net/list.html

EDIT: Issue tritt auch bei 2.11.2 aus dem latest Repository auf...

[OliverIO]

@martinp

Meine installierte Version von vis2 ist 2.11.2
Das ist latest

[MartinP]

@oliverio https://github.com/ioBroker/ioBroker.vis-2/issues/521

Falls Du Korrekturvorschläge für den Issue hast, immer gerne

[OliverIO]

@martinp

Issue ist jetzt für Eingabe
Erwähne evtl. auch noch das Widget zeiteingabe,
Das er weiß, das das Problem nicht nur in diesem Widget ist.
Ich gehe d a von einem generelleren Problem aus, was noch einige mehr Widgets betrifft.

[MartinP]

@oliverio geändert

[Oli]

@oliverio

gibt es über CSS auch die Möglichkeit die Hintergrundfarbe des Auswahlfensters zu ändern und das Icon des Button weiter einzurücken?

[MartinP]

@oli Habe den Issue mit einer Tabelle ergänzt bisher basic und jqui betroffen ....

[MartinP]

@oliverio sagte in VIS-2, gestyled Zeiteingabe Farben ändern?:

letzte möglichkeit des workarounds:
platzieren eines html elements und folgendes eintragen

Dumme Frage: Wie trägt man etwas in ein HTML-Element ein?

Ich kriege weder in W000011 (Test) etwas in den Markierungsrahmen im Editor-Fenster eingetragen, noch rechts im "Attribute" Fenster gibt es etwas, wo man HTML einfügen kann ...

EDIT Gefunden - man muss das HTML in "Allgemein" ablegen... muss man aber erst aktivieren...

Funktioniert aber auch nicht - Text bleibt schwarz....

[MartinP]

Und der nächste Bug:

Das,was man im basic HTML unter "Allgemein" eingetragen hat ist beim nächsten Editieren nicht mehr vorhanden

Schritt 1 HTML ist leer:

Schritt 2 - Bestätigen des "Stift" Symbols in der HTML-Zeile, und Einfügen des Krams aus der Anleitung weiter oben.

Schritt 3 - "Speichern" im edit Fenster betätigen

Schritt 4 - "Stift" Symbol erneut klicken:

Das edit Fenster ist LEER!!!!

Das heißt, man darf sich nicht vertippen, wenn man da in Schritt 2 etwas eingibt ... Ändern in Schritt 4 ist nicht möglich... Am Besten wahrscheinlich eine Textdatei des CSS ablegen, und von dort aus dann immer wieder über die Zwischenablage kopieren...

Ist wirklich nervig, dass vis-2 noch immer so fragil ist ...

EDIT: Ist wohl bekannt
https://github.com/ioBroker/ioBroker.vis-2/issues/518

[OliverIO]

@martinp

Wenn du die Adressierung per CSS Klasse wie hier beispielsweise farberot dann musst du dem eigentlichen Widget diese CSS Klasse auch zuweisen. Lese meinen Post noch mal genau der besteht aus zwei Teilen

Das Problem mit dem HTML Widget habe ich auch fest Gestellt
es gibt bereits ein Issue dazu

[MartinP]

@oliverio Es war eher das Problem, dass man, wenn man das Editor - Fenster nicht öffnet, sondern die Zwischenablage direkt in die Zeile "HTML" kippt, das nicht übernommen wird, trotzdem es optisch genauso aussieht, wie wenn man es in das Editor-Fenster eingibt...

Nicht über das Editor Fenster

Über das Editor Fenster

Optisch sieht das beides im rechten Tile nach Schließen des Editor-Fensters identisch aus....

[MartinP]

@martinp Das gestylte Input Widget ist noch anders kaputt

Ich habe mein ganzes CSS bearbeitet und in ein HTML-Widget kopiert.
Das CSS wird auf den Label-Bereich nicht angewendet....

black im Spoiler ab Zeile 63....

Spoiler

<style>
.rod input {
   display:grid;
   align-items:center;
   text-align:center;
   align-content:center;
   border-radius:4px;
   font-weight:bold;
   border:0.5px solid;
   line-height:0.9;
   letter-spacing:-1.1px;
}

.norm input {
   height:35px;
   font-size:24px;
}
.big input {
   height:70px;
   font-size:28px;
}
.triple input {
   height:105px;
   font-size:24px;    
}
.head input {
   height:70px;
   font-size:40px;
   font-weight:900;
}
.small input {
   height:35px;
   font-size:18px;
}
.wide input {
   height:35px;
   font-size:24px;
}
.icon input {
   height:70px;
   width:70px;
   font-size:18px;
   letter-spacing:-0.09em;
   line-height:13px;
}
.iconmini input {
   height:35px;
   width:35px;
}
.button input {
   height:70px;
   width:70px;
   font-size:18px;
}
.half input {
   height:17.5px;
   font-size:14px;
}
.textbox input {
   font-size:22px;
}

.black input{
   color:#ececec;
   background: linear-gradient(to bottom, #5b5b5b 0%,#0c0c0c 100%);
   border-color: #0c0c0c;
}
.yellow input {
   color:black;
   background: linear-gradient(to bottom, #fffaa8 0%,#f9d000 100%);
   border-color: #f9d000;
}
.red input {
   color:black;
   background: linear-gradient(to bottom, #ff7575 0%,#9b2b29 100%);
   border-color: #9b2b29;
}
.lightblue input {
   color:#ececec;
   background: linear-gradient(to bottom, #aad9ff 0%,#1b5989 100%);
   border-color: #004c8e;
}
.blue input {
   color:#ececec;
   background: linear-gradient(to bottom, #4f9bd6 0%,#002e54 100%);
   border-color: #002e54;
}
.grey input {
   color:#ececec;
   background: linear-gradient(to bottom, #c9c9c9 0%,#424242 100%);
   border-color:#424242;
}
.green input {
   color:#ececec;
   background: linear-gradient(to bottom, #aaff91 0%,#12b500 100%);
   border-color:#12b500;
}
.white input {
   color:black;
   background: linear-gradient(to bottom, #ffffff 0%,#bcbcbc 100%);
   border-color:#bcbcbc;
}
.darkyellow input {
   color:#ececec;
   background: linear-gradient(to bottom, #ddac4f 0%,#7c5b01 100%);
   border-color: #7c5b01;
}
.darkblue input {
   color:#ececec;
   background: linear-gradient(to bottom, #406dad 0%,#001c38 100%);
   border-color: #001c38;
}
.darkgreen input {
   color:#ececec;
   background: linear-gradient(to bottom, #62e03c 0%,#043f00 100%);
   border-color:#043f00;
}
.darkred input {
   color:#ececec;
   background: linear-gradient(to bottom, #cc4747 0%,#561111 100%);
   border-color: #561111;
}
.pink input {
   color:#ececec;
   background: linear-gradient(to bottom, #f2c8f4 0%,#7f0a7d 100%);
   border-color: #7f0a7d;
}
.orange input {
   color:black;
   background: linear-gradient(to bottom, #f7d7a3 0%,#e06800 100%);
   border-color:#e06800;
}
.glowred input {
   border:8px;
   box-shadow:red 0px 0px 15px 10px;
}
.glowyellow input {
   border:8px;
   box-shadow:#fb9b00 0px 0px 15px 10px;
}
</style>

[OliverIO]

@martinp

Dann musst du mit den Web Developer Tools mal schauen was auf dem Element noch wirkt.
Sonst ist das schwer zu sagen
Am besten in der runtime Sicht schauen
Da lassen sich die Elemente besser selektieren

Eventuell noch einen Tipp, gib deinen CSS Klassen immer noch ein eigenes Präfix mit
Da CSS immer global im ganzen Dokument wirkt, kannst du dadurch natürlich auch zufällig andere Elemente treffen. falls der Entwickler beispielsweise seine CSS Klasse auch nur mit black Benannt hat

[MartinP]

@oliverio sagte in VIS-2, gestyled Zeiteingabe Farben ändern?:

gib deinen CSS Klassen immer noch ein eigenes Präfix mit

gute Idee - vielleicht "user_black" statt nur "black"

[OliverIO]

@martinp

Zwei Buchstaben reichen.
Alles, was das Risiko minimiert , dass jemand anders auf die gleiche Idee kam.
Lange CSS Klassen Namen willst du auch nicht so wirklich haben