Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. VIS-2, gestyled Zeiteingabe Farben ändern?

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    VIS-2, gestyled Zeiteingabe Farben ändern?

    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      AxLED @etv last edited by

      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

      1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @etv last edited by 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>
        

        afd4d58c-0dcb-43c5-99ab-76946ccd9312-image.png

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

        MartinP 2 Replies Last reply Reply Quote 0
        • MartinP
          MartinP @OliverIO last edited by 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

          4ee222e7-067f-456f-a9a1-ad6a6c2f1956-grafik.png

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

          OliverIO 1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @MartinP last edited by

            @martinp

            Meine installierte Version von vis2 ist 2.11.2
            Das ist latest

            MartinP 1 Reply Last reply Reply Quote 0
            • MartinP
              MartinP @OliverIO last edited by

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

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

              MartinP1 created this issue in ioBroker/ioBroker.vis-2

              open [bug]: Widget "Gestylt Eingabe" does not accept foreground colour #521

              OliverIO 1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @MartinP last edited by

                @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 O 2 Replies Last reply Reply Quote 0
                • MartinP
                  MartinP @OliverIO last edited by

                  @oliverio geändert

                  1 Reply Last reply Reply Quote 0
                  • O
                    Oli @OliverIO last edited by

                    @oliverio

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

                    ab8c049e-5e4a-4ca3-8bce-740d492a3eba-image.png

                    MartinP 1 Reply Last reply Reply Quote 0
                    • MartinP
                      MartinP @Oli last edited by MartinP

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

                      3c4dcb94-cc7f-4fdc-9b4a-f5c92cbede45-grafik.png

                      1 Reply Last reply Reply Quote 0
                      • MartinP
                        MartinP @OliverIO last edited by 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?
                        ce50b355-2292-4d2d-a678-3b9d4ecff1a8-grafik.png
                        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....

                        055ae18d-b452-40c7-871e-1e4c5f70a329-grafik.png

                        MartinP 1 Reply Last reply Reply Quote 0
                        • MartinP
                          MartinP @MartinP last edited by 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:
                          1910e6a5-9165-4847-878d-3f0182513952-grafik.png

                          Schritt 2 - Bestätigen des "Stift" Symbols in der HTML-Zeile, und Einfügen des Krams aus der Anleitung weiter oben.
                          5a63a15a-cd1b-499c-9dd4-6d5f27c264ee-grafik.png

                          Schritt 3 - "Speichern" im edit Fenster betätigen
                          57bd33ee-b29d-451e-8ae0-4f47a6384e72-grafik.png

                          Schritt 4 - "Stift" Symbol erneut klicken:
                          da50ce6a-3225-4ec4-b0dd-cff0d22ac71a-grafik.png

                          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

                          Steiger04 created this issue in ioBroker/ioBroker.vis-2

                          open [bug]: HTML edit übernimmt die Eingabe aus dem Textfeld nicht #518

                          1 Reply Last reply Reply Quote 0
                          • OliverIO
                            OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
                            • MartinP
                              MartinP @OliverIO last edited by 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
                              00d39ba2-fc0f-4d22-8650-80ad12abf12e-grafik.png

                              Über das Editor Fenster
                              c715954e-2b54-43c9-bc2c-b1fe956364d6-grafik.png

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

                              MartinP 1 Reply Last reply Reply Quote 0
                              • MartinP
                                MartinP @MartinP last edited by MartinP

                                @martinp Das gestylte Input Widget ist noch anders kaputt

                                6fb11823-1367-46f7-b121-c8a3fae405bc-grafik.png

                                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....

                                <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 1 Reply Last reply Reply Quote 0
                                • OliverIO
                                  OliverIO @MartinP last edited by 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 1 Reply Last reply Reply Quote 0
                                  • MartinP
                                    MartinP @OliverIO last edited by

                                    @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 1 Reply Last reply Reply Quote 0
                                    • OliverIO
                                      OliverIO @MartinP last edited by 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

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      869
                                      Online

                                      31.7k
                                      Users

                                      79.7k
                                      Topics

                                      1.3m
                                      Posts

                                      vis
                                      5
                                      18
                                      552
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo