Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Button der Farbe ändert

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    9
    1
    136

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

Button der Farbe ändert

Geplant Angeheftet Gesperrt Verschoben Visualisierung
39 Beiträge 7 Kommentatoren 2.5k Aufrufe 5 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • CodierknechtC Codierknecht

    @oliverio
    Also bei mir funzt das wie erwartet.
    Einstellung am Button:
    78c108f5-5b54-4af1-a9b5-07a8cb68e7ad-grafik.png

    Und schon wechselt der beim Klick fein seine Farbe.
    Oder habe ich das falsch verstanden?

    button-click.mp4

    OliverIOO Offline
    OliverIOO Offline
    OliverIO
    schrieb am zuletzt editiert von OliverIO
    #29

    @codierknecht

    und wie sieht dein css aus?
    das setzen der css klasse funktioniert bei mir auch.
    aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

    mach bitte mal komplettes beispiel wenn es bei dir funktioniert

    Meine Adapter und Widgets
    TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
    Links im Profil

    CodierknechtC 2 Antworten Letzte Antwort
    0
    • OliverIOO OliverIO

      @codierknecht

      und wie sieht dein css aus?
      das setzen der css klasse funktioniert bei mir auch.
      aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

      mach bitte mal komplettes beispiel wenn es bei dir funktioniert

      CodierknechtC Offline
      CodierknechtC Offline
      Codierknecht
      Developer Most Active
      schrieb am zuletzt editiert von Codierknecht
      #30

      @oliverio
      Ups, hätte ich ja auch gleich mal dazupacken können - sorry.

      .vis-button button.ui-state-default {
          background-color: blue;
          background-image: none;
          color: white;
      }
      
      
      .vis-button button.ui-state-default:active {
          background-color: green;
          color: red;
      }
      

      2023-04-07-main.zip

      "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

      Proxmox 9.1.1 LXC|8 GB|Core i7-6700
      HmIP|ZigBee|Tasmota|Unifi
      Zabbix Certified Specialist
      Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

      1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

        @codierknecht

        und wie sieht dein css aus?
        das setzen der css klasse funktioniert bei mir auch.
        aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

        mach bitte mal komplettes beispiel wenn es bei dir funktioniert

        CodierknechtC Offline
        CodierknechtC Offline
        Codierknecht
        Developer Most Active
        schrieb am zuletzt editiert von
        #31

        @oliverio sagte in Button der Farbe ändert:

        aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

        Kannst Du das nicht mit !important erzwingen?

        "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

        Proxmox 9.1.1 LXC|8 GB|Core i7-6700
        HmIP|ZigBee|Tasmota|Unifi
        Zabbix Certified Specialist
        Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

        OliverIOO 1 Antwort Letzte Antwort
        0
        • CodierknechtC Codierknecht

          @oliverio sagte in Button der Farbe ändert:

          aber bei button state kommt die regel nicht durch, da sie durch andere regeln überpriorisiert werden.

          Kannst Du das nicht mit !important erzwingen?

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von OliverIO
          #32

          @codierknecht

          ne klappt nicht.
          markiert habe ich das button element.
          du siehst die css regel (unterer roter rahmen) wird durch eine regel von vis/jqui (oberer roter rahmen) überschrieben, da diese einen id enthält (also mit #visview_test) und deine regel nur einen klassennamen. id hat prio über klassennamen.

          9b453618-b44e-4e48-a0ed-9921dc52f198-image.png

          wie sieht das bei dir aus? du hast ja kein important verwendet?

          mit important funktioniert es. hm hab ich wohl in der kombination nicht probiert.

          dennoch wäre es besser wenn vis bei den css regeln sich nicht auf den id des containers, sondern nur auf einen css-namen des containers beziehen würde. dann hätte man die chance mit normalen regeln das design zu beeinflussen

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          CodierknechtC 1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @codierknecht

            ne klappt nicht.
            markiert habe ich das button element.
            du siehst die css regel (unterer roter rahmen) wird durch eine regel von vis/jqui (oberer roter rahmen) überschrieben, da diese einen id enthält (also mit #visview_test) und deine regel nur einen klassennamen. id hat prio über klassennamen.

            9b453618-b44e-4e48-a0ed-9921dc52f198-image.png

            wie sieht das bei dir aus? du hast ja kein important verwendet?

            mit important funktioniert es. hm hab ich wohl in der kombination nicht probiert.

            dennoch wäre es besser wenn vis bei den css regeln sich nicht auf den id des containers, sondern nur auf einen css-namen des containers beziehen würde. dann hätte man die chance mit normalen regeln das design zu beeinflussen

            CodierknechtC Offline
            CodierknechtC Offline
            Codierknecht
            Developer Most Active
            schrieb am zuletzt editiert von
            #33

            @oliverio sagte in Button der Farbe ändert:

            wie sieht das bei dir aus? du hast ja kein important verwendet?

            Nö - ist ja nur meine Testkiste - da ist nix weiter drauf.

            ID sticht Klasse - stimmt.
            Aber wenn's dann mit !important läuft ... um so besser ;-)

            "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

            Proxmox 9.1.1 LXC|8 GB|Core i7-6700
            HmIP|ZigBee|Tasmota|Unifi
            Zabbix Certified Specialist
            Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

            1 Antwort Letzte Antwort
            0
            • bergjetB Offline
              bergjetB Offline
              bergjet
              schrieb am zuletzt editiert von
              #34

              Hat nichts mit mir zu tun, oder?

              homee, ioBroker, iMac, iPhone, Sonos, Alaxa

              CodierknechtC 1 Antwort Letzte Antwort
              0
              • bergjetB bergjet

                Hat nichts mit mir zu tun, oder?

                CodierknechtC Offline
                CodierknechtC Offline
                Codierknecht
                Developer Most Active
                schrieb am zuletzt editiert von
                #35

                @bergjet sagte in Button der Farbe ändert:

                Hat nichts mit mir zu tun, oder?

                Eigentlich schon.

                Du hast ja vermutlich mehr als nur 1 Button, den Du so behandeln willst.
                Das ist mit 'ner CSS-Klasse etwas einfacher als die ganzen ID's der Buttons in das CSS zu klöppeln.
                Man kann im Editor dann einfach alle Buttons markieren und denen die CSS-Klasse verpassen.
                Wenn keine CSS-Einstellungen zu ID's die der Klasse übersteuern (ID sticht Klasse), sollte das so funktionieren.

                "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                HmIP|ZigBee|Tasmota|Unifi
                Zabbix Certified Specialist
                Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                bergjetB 1 Antwort Letzte Antwort
                0
                • bergjetB bergjet

                  @bananajoe sagte in Button der Farbe ändert:

                  so etwas?

                  Ja, so sollte es aussehen. Ist halt etwas aufwendig.

                  BananaJoeB Offline
                  BananaJoeB Offline
                  BananaJoe
                  Most Active
                  schrieb am zuletzt editiert von
                  #36

                  @bergjet sagte in Button der Farbe ändert:

                  @bananajoe sagte in Button der Farbe ändert:

                  so etwas?

                  Ja, so sollte es aussehen. Ist halt etwas aufwendig.

                  Du startest doch sowieso ein Skript. Oder besser, weil so soll man es ja machen: Du Triggerst es an.
                  Und damit es neu angetriggert werden kann muss du den Datenpunkt sowieso wieder auf Falsch setzen.
                  Also, entweder gar keine oder nur eine Zeile mehr in dem Skript.

                  Punkt 2 wäre das du dir dadurch ja auch gleiche eine "Läuft" Anzeige bauen kannst. So nutze ich es beim manuellen Backup.
                  Ich trigger an mit dem Widget, solange das Backup läuft ist es aktiv, ist das Backup fertig geht es wieder aus.

                  ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                  1 Antwort Letzte Antwort
                  0
                  • CodierknechtC Codierknecht

                    @bergjet sagte in Button der Farbe ändert:

                    Hat nichts mit mir zu tun, oder?

                    Eigentlich schon.

                    Du hast ja vermutlich mehr als nur 1 Button, den Du so behandeln willst.
                    Das ist mit 'ner CSS-Klasse etwas einfacher als die ganzen ID's der Buttons in das CSS zu klöppeln.
                    Man kann im Editor dann einfach alle Buttons markieren und denen die CSS-Klasse verpassen.
                    Wenn keine CSS-Einstellungen zu ID's die der Klasse übersteuern (ID sticht Klasse), sollte das so funktionieren.

                    bergjetB Offline
                    bergjetB Offline
                    bergjet
                    schrieb am zuletzt editiert von
                    #37

                    @codierknecht sagte in Button der Farbe ändert:

                    @bergjet sagte in Button der Farbe ändert:

                    Hat nichts mit mir zu tun, oder?

                    Eigentlich schon.

                    Du hast ja vermutlich mehr als nur 1 Button, den Du so behandeln willst.
                    Das ist mit 'ner CSS-Klasse etwas einfacher als die ganzen ID's der Buttons in das CSS zu klöppeln.
                    Man kann im Editor dann einfach alle Buttons markieren und denen die CSS-Klasse verpassen.
                    Wenn keine CSS-Einstellungen zu ID's die der Klasse übersteuern (ID sticht Klasse), sollte das so funktionieren.

                    Bei mir funktioniert das nicht. In der CSS-Klasse wird mir ein "vis-style-green-gray" angeboten. Wenn ich aber "vis-button" eingebe, passiert nichts.

                    homee, ioBroker, iMac, iPhone, Sonos, Alaxa

                    OliverIOO 1 Antwort Letzte Antwort
                    0
                    • bergjetB bergjet

                      @codierknecht sagte in Button der Farbe ändert:

                      @bergjet sagte in Button der Farbe ändert:

                      Hat nichts mit mir zu tun, oder?

                      Eigentlich schon.

                      Du hast ja vermutlich mehr als nur 1 Button, den Du so behandeln willst.
                      Das ist mit 'ner CSS-Klasse etwas einfacher als die ganzen ID's der Buttons in das CSS zu klöppeln.
                      Man kann im Editor dann einfach alle Buttons markieren und denen die CSS-Klasse verpassen.
                      Wenn keine CSS-Einstellungen zu ID's die der Klasse übersteuern (ID sticht Klasse), sollte das so funktionieren.

                      Bei mir funktioniert das nicht. In der CSS-Klasse wird mir ein "vis-style-green-gray" angeboten. Wenn ich aber "vis-button" eingebe, passiert nichts.

                      OliverIOO Offline
                      OliverIOO Offline
                      OliverIO
                      schrieb am zuletzt editiert von OliverIO
                      #38

                      @bergjet

                      hier mal nochmal ein vollständiges beispiel.
                      Das so in den css-reiter kopieren.

                      .vis-button button.ui-state-default {
                          background-color: blue !important;
                          background-image: none !important;
                          color: white !important ;
                      }
                       
                       
                      .vis-button button.ui-state-default:active {
                          background-color: green !important;
                          color: red !important;
                      }
                      

                      Bei den Knöpfen wo du das Design anwenden wills im Feld CSS Class dann
                      vis-button
                      eintragen
                      du siehst mir wird das vis-style-gree-gray auch angeboten. Woher das auch immer kommt. aber du trägst mit Tastatur genau das vis-button ein (ohne Punkt davor)
                      406321b5-b90e-4c53-aa80-469e821724f0-image.png

                      Im Screenshot siehst du einen Knopf mit und einen ohne

                      Meine Adapter und Widgets
                      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                      Links im Profil

                      bergjetB 1 Antwort Letzte Antwort
                      1
                      • OliverIOO OliverIO

                        @bergjet

                        hier mal nochmal ein vollständiges beispiel.
                        Das so in den css-reiter kopieren.

                        .vis-button button.ui-state-default {
                            background-color: blue !important;
                            background-image: none !important;
                            color: white !important ;
                        }
                         
                         
                        .vis-button button.ui-state-default:active {
                            background-color: green !important;
                            color: red !important;
                        }
                        

                        Bei den Knöpfen wo du das Design anwenden wills im Feld CSS Class dann
                        vis-button
                        eintragen
                        du siehst mir wird das vis-style-gree-gray auch angeboten. Woher das auch immer kommt. aber du trägst mit Tastatur genau das vis-button ein (ohne Punkt davor)
                        406321b5-b90e-4c53-aa80-469e821724f0-image.png

                        Im Screenshot siehst du einen Knopf mit und einen ohne

                        bergjetB Offline
                        bergjetB Offline
                        bergjet
                        schrieb am zuletzt editiert von
                        #39

                        @oliverio Ja, jetzt geht es. Ich habe zuvor den Code vom Posting weiter oben eingefügt (dort gab es noch kein !important).
                        Danke.

                        homee, ioBroker, iMac, iPhone, Sonos, Alaxa

                        1 Antwort Letzte Antwort
                        0
                        Antworten
                        • In einem neuen Thema antworten
                        Anmelden zum Antworten
                        • Älteste zuerst
                        • Neuste zuerst
                        • Meiste Stimmen


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        852

                        Online

                        32.5k

                        Benutzer

                        81.6k

                        Themen

                        1.3m

                        Beiträge
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                        ioBroker Community 2014-2025
                        logo
                        • Anmelden

                        • Du hast noch kein Konto? Registrieren

                        • Anmelden oder registrieren, um zu suchen
                        • Erster Beitrag
                          Letzter Beitrag
                        0
                        • Home
                        • Aktuell
                        • Tags
                        • Ungelesen 0
                        • Kategorien
                        • Unreplied
                        • Beliebt
                        • GitHub
                        • Docu
                        • Hilfe