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. Toggle Button beim drauf zeigen blau hinterlegt.

NEWS

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

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

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

Toggle Button beim drauf zeigen blau hinterlegt.

Geplant Angeheftet Gesperrt Verschoben Visualisierung
25 Beiträge 3 Kommentatoren 2.5k Aufrufe 4 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.
  • P Offline
    P Offline
    padi0-000
    schrieb am zuletzt editiert von
    #14

    Danke dir erst mal für die Hilfe .. Wenn ich die neue Version am laufen habe , versuche ich es noch mal und gebe Rückmeldung..

    P 1 Antwort Letzte Antwort
    0
    • P padi0-000

      Danke dir erst mal für die Hilfe .. Wenn ich die neue Version am laufen habe , versuche ich es noch mal und gebe Rückmeldung..

      P Offline
      P Offline
      padi0-000
      schrieb am zuletzt editiert von
      #15

      habe es hinbekommen aber ganz anders als von dir vorgeschlagen.

      das hat trotz update vis und Admin nicht funktioniert
      1.PNG

      gibt es eine Möglichkeit wie ich das auf alle Widgets der Art anwende one es ünerall zu interlegen ?

      1 Antwort Letzte Antwort
      0
      • GlasfaserG Offline
        GlasfaserG Offline
        Glasfaser
        schrieb am zuletzt editiert von Glasfaser
        #16

        @padi0-000 sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

        gibt es eine Möglichkeit wie ich das auf alle Widgets der Art anwende one es ünerall zu interlegen ?

        Nur über CSS Anweisungen .... aber ich habe gerade keine Ahnung warum es bei dir nicht funktioniert.

        im CSS kannst du auch mehr mitgeben , Textart, Größe usw.

        Wie du es manuell eingetragen hast , dann aber pro Widget wieder der CSS Eintrag .

        .UiStyle  {
        background: linear-gradient(to top, #000000, #434343) !important;
        }
        

        Was passiert wenn du nur diesen Eintrag in CSS reinmachst :

        .vis-view {
            background: blue;
        }
        

        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

        P 1 Antwort Letzte Antwort
        0
        • GlasfaserG Glasfaser

          @padi0-000 sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

          gibt es eine Möglichkeit wie ich das auf alle Widgets der Art anwende one es ünerall zu interlegen ?

          Nur über CSS Anweisungen .... aber ich habe gerade keine Ahnung warum es bei dir nicht funktioniert.

          im CSS kannst du auch mehr mitgeben , Textart, Größe usw.

          Wie du es manuell eingetragen hast , dann aber pro Widget wieder der CSS Eintrag .

          .UiStyle  {
          background: linear-gradient(to top, #000000, #434343) !important;
          }
          

          Was passiert wenn du nur diesen Eintrag in CSS reinmachst :

          .vis-view {
              background: blue;
          }
          
          P Offline
          P Offline
          padi0-000
          schrieb am zuletzt editiert von
          #17

          @glasfaser sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

          @padi0-000 sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

          gibt es eine Möglichkeit wie ich das auf alle Widgets der Art anwende one es ünerall zu interlegen ?

          Nur über CSS Anweisungen .... aber ich habe gerade keine Ahnung warum es bei dir nicht funktioniert.

          im CSS kannst du auch mehr mitgeben , Textart, Größe usw.

          Wie du es manuell eingetragen hast , dann aber pro Widget wieder der CSS Eintrag .

          .UiStyle  {
          background: linear-gradient(to top, #000000, #434343) !important;
          }
          

          Was passiert wenn du nur diesen Eintrag in CSS reinmachst :

          .vis-view {
              background: blue;
          }
          

          wenn ich das ins CSS eintrage wird der Hintergrund blau

          GlasfaserG 1 Antwort Letzte Antwort
          0
          • P padi0-000

            @glasfaser sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

            @padi0-000 sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

            gibt es eine Möglichkeit wie ich das auf alle Widgets der Art anwende one es ünerall zu interlegen ?

            Nur über CSS Anweisungen .... aber ich habe gerade keine Ahnung warum es bei dir nicht funktioniert.

            im CSS kannst du auch mehr mitgeben , Textart, Größe usw.

            Wie du es manuell eingetragen hast , dann aber pro Widget wieder der CSS Eintrag .

            .UiStyle  {
            background: linear-gradient(to top, #000000, #434343) !important;
            }
            

            Was passiert wenn du nur diesen Eintrag in CSS reinmachst :

            .vis-view {
                background: blue;
            }
            

            wenn ich das ins CSS eintrage wird der Hintergrund blau

            GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            schrieb am zuletzt editiert von
            #18

            @padi0-000

            Lade mir mal bitte ein Widget Button hier hoch oder den View , damit ich es mal bei mir anschaue .

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            P 1 Antwort Letzte Antwort
            0
            • GlasfaserG Glasfaser

              @padi0-000

              Lade mir mal bitte ein Widget Button hier hoch oder den View , damit ich es mal bei mir anschaue .

              P Offline
              P Offline
              padi0-000
              schrieb am zuletzt editiert von
              #19

              @glasfaser

              [{"tpl":"tplJquiToogle","data":{"oid":"s7.0.DBs.DB1.Schlafzimmer_Decke","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/img/bulb_on.png","signals-icon-size-0":"60","signals-blink-0":false,"signals-horz-0":"80","signals-vert-0":"","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"fales","signals-icon-1":"/vis/img/bulb_off.png","signals-icon-size-1":"60","signals-blink-1":false,"signals-horz-1":"80","signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"signals-oid-0":"s7.0.Outputs.1.Schlafzimmer_Decke","label":"Schlaf Decke","signals-oid-1":"s7.0.Outputs.1.Schlafzimmer_Decke"},"style":{"left":"972px","top":"140px","width":"305px","height":"80px","color":"#ffffff","text-align":"left","font-size":"xx-large","letter-spacing":"","word-spacing":"100","z-index":"2","line-height":"2","border-width":"3px","border-style":"groove"},"widgetSet":"jqui"}]
              
              P 1 Antwort Letzte Antwort
              0
              • P padi0-000

                @glasfaser

                [{"tpl":"tplJquiToogle","data":{"oid":"s7.0.DBs.DB1.Schlafzimmer_Decke","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/img/bulb_on.png","signals-icon-size-0":"60","signals-blink-0":false,"signals-horz-0":"80","signals-vert-0":"","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"fales","signals-icon-1":"/vis/img/bulb_off.png","signals-icon-size-1":"60","signals-blink-1":false,"signals-horz-1":"80","signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"signals-oid-0":"s7.0.Outputs.1.Schlafzimmer_Decke","label":"Schlaf Decke","signals-oid-1":"s7.0.Outputs.1.Schlafzimmer_Decke"},"style":{"left":"972px","top":"140px","width":"305px","height":"80px","color":"#ffffff","text-align":"left","font-size":"xx-large","letter-spacing":"","word-spacing":"100","z-index":"2","line-height":"2","border-width":"3px","border-style":"groove"},"widgetSet":"jqui"}]
                
                P Offline
                P Offline
                padi0-000
                schrieb am zuletzt editiert von
                #20

                Hoffe das ist richtig so..

                GlasfaserG 1 Antwort Letzte Antwort
                0
                • P padi0-000

                  Hoffe das ist richtig so..

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von
                  #21

                  @padi0-000

                  BEISPIEL , mit deinem Widget :

                  1.JPG

                  .UiStyle   {
                   border:#222 !important;
                   background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                  }
                  

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  P Crazy32C 2 Antworten Letzte Antwort
                  0
                  • GlasfaserG Glasfaser

                    @padi0-000

                    BEISPIEL , mit deinem Widget :

                    1.JPG

                    .UiStyle   {
                     border:#222 !important;
                     background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                    }
                    
                    P Offline
                    P Offline
                    padi0-000
                    schrieb am zuletzt editiert von
                    #22

                    @glasfaser
                    Ja so klapp es bei mir aber der Rand ist nicht mehr so groß

                    wie bekomme ich das nun hin ? farbe habe ich mir schon entsprechend angepasst.

                    .UiStyle   {
                    
                     border:#434343!important;
                    
                     background: linear-gradient(to top, #121212, #666666) !important;
                    
                    }
                    
                    GlasfaserG 1 Antwort Letzte Antwort
                    0
                    • P padi0-000

                      @glasfaser
                      Ja so klapp es bei mir aber der Rand ist nicht mehr so groß

                      wie bekomme ich das nun hin ? farbe habe ich mir schon entsprechend angepasst.

                      .UiStyle   {
                      
                       border:#434343!important;
                      
                       background: linear-gradient(to top, #121212, #666666) !important;
                      
                      }
                      
                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      schrieb am zuletzt editiert von
                      #23

                      @padi0-000

                      So ... habe es mal gelb gemacht ?

                      1.JPG

                      Zusatz :

                      border-width : 4px !important;
                      

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      1 Antwort Letzte Antwort
                      0
                      • P Offline
                        P Offline
                        padi0-000
                        schrieb am zuletzt editiert von
                        #24

                        Super ...Danke

                        Ich Danke für die Mühen und das einfache und simple Erklären .

                        1 Antwort Letzte Antwort
                        0
                        • GlasfaserG Glasfaser

                          @padi0-000

                          BEISPIEL , mit deinem Widget :

                          1.JPG

                          .UiStyle   {
                           border:#222 !important;
                           background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                          }
                          
                          Crazy32C Offline
                          Crazy32C Offline
                          Crazy32
                          schrieb am zuletzt editiert von Crazy32
                          #25

                          @glasfaser sagte in Toggle Button beim drauf zeigen blau hinterlegt.:

                          @padi0-000

                          BEISPIEL , mit deinem Widget :

                          1.JPG

                          .UiStyle   {
                           border:#222 !important;
                           background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                          }
                          

                          Moin. Ich habe das gleiche Problem und @Glasfaser hat mich hierhin verwiesen. Bei mir haben wie beim Themenersteller komischerweise die obigen Tipps auch alle nicht funktioniert. Erst beim hier zitierten Post hat sich die Farbe des Buttons geändert. Aber leider nicht nur die Farbe des Buttons, sondern auch die Hintergrundfarbe der View. Wahrscheinlich weil bei View Hintergrund CSS eingestellt ist. Gibt es hierfür auch eine Lösung, damit nur die Buttonfarbe geändert wird?
                          Ich bin momentan im Zwiespalt, einerseits gefallen mir die Buttons ganz gut, andererseits überlege ich, ob ich mir selber einen aus basic image und basic html state bastel.

                          1.png

                          EDIT: Ich habe im Netz noch ein bisschen rumgesucht und auf dieser Seite was zum Thema CSS gefunden. Mit dem unten stehenden Code habe ich dann die Buttons einfärben können, ohne das sich der Hintergrund der View auch ändert.

                          }
                          .black{
                              color:#ececec;
                              background: linear-gradient(to bottom, #5b5b5b 0%,#0c0c0c 100%);
                              border-color: #0c0c0c;
                          }
                          
                          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

                          805

                          Online

                          32.4k

                          Benutzer

                          81.5k

                          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