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. CSS für HQWidgets

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    11
    1
    117

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.3k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.2k

CSS für HQWidgets

Geplant Angeheftet Gesperrt Verschoben Visualisierung
18 Beiträge 5 Kommentatoren 5.0k Aufrufe
  • Ä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.
  • HomoranH Nicht stören
    HomoranH Nicht stören
    Homoran
    Global Moderator Administrators
    schrieb am zuletzt editiert von
    #9

    ok, hab es gerade getestet, was du meinst.

    Unter CSS Background - color kannst du eine eigene Farbe auswählen - Von diesem Background sieht man aber nur den Rand.

    Unter allgemein kannst du als Background diverse Farben mit bg- (=background) red usw. auswählen.

    Auch ein bg "keins" existiert.

    Bei diesem ist die Transparenz aber nicht hoch genug, so dass die unter CSS Background - color gewählte Farbe nur schwach durchschimmert.

    Da sollten wir auf Bluefox warten.

    Und falls er das liest: MACH URLAUB!!!

    Gruß

    Rainer

    kein Support per PN! - Fragen im Forum stellen -

    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

    ioBroker freut sich auch über eine Spende für das Forum. Benutzt dazu den Spendenbutton im Header. Danke!

    der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

    1 Antwort Letzte Antwort
    0
    • P Offline
      P Offline
      pix
      schrieb am zuletzt editiert von
      #10

      Hallo zusammen,

      @Homoran:

      Unter CSS Background - color kannst du eine eigene Farbe auswählen - Von diesem Background sieht man aber nur den Rand. `
      Ja, sieht dann so aus: 261_bildschirmfoto_2015-08-28_um_23.02.31.jpg Bei Metro Widgets kann man auf diese Weise zum Beispiel einen Alarm zusätzlich darstellen. Dazu muss man aber der Umweg über ein Skript gehen, das eine Variable zB von "rgba(250,0,0,0)" auf "rgba(250,0,0,1)" oder von "transparent" auf "red" auf von "0" auf "1" setzt. Dann kann man mit der binding-Funktion von VIS die Farbe über die gesetzte Variable (zB javascript.0.alarm_wassermelder wurde auf 1 gesetzt) definieren:

      Farbe: rgba(250,0,0,{javascript.0.alarm_wassermelder}) ergibt rot bei 1 und nix bei 0 für das dritte Beispiel

      @Homoran:

      Unter allgemein kannst du als Background diverse Farben mit bg- (=background) red usw. auswählen.

      Auch ein bg "keins" existiert. `
      So sieht das aus: 261_bildschirmfoto_2015-08-28_um_23.03.50.jpg

      @Homoran:

      Bei diesem ist die Transparenz aber nicht hoch genug, so dass die unter CSS Background - color gewählte Farbe nur schwach durchschimmert. `
      Deswegen gibt es die Farbe "transparenz". Ist etwas versteckt, weiter unten in der Liste. Hab ich sehr viel im Gebrauch. 261_bildschirmfoto_2015-08-28_um_23.05.16.jpg

      Gruß

      Pix

      ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

      1 Antwort Letzte Antwort
      0
      • HomoranH Nicht stören
        HomoranH Nicht stören
        Homoran
        Global Moderator Administrators
        schrieb am zuletzt editiert von
        #11

        DANKE!

        Muss mich da mal weiter reinknien und dann die vis doku weitermachen.

        Habe demnächst Urlaub - vielleicht schaffe ich dann ja was :)

        Gruß

        Rainer

        kein Support per PN! - Fragen im Forum stellen -

        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

        ioBroker freut sich auch über eine Spende für das Forum. Benutzt dazu den Spendenbutton im Header. Danke!

        der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

        1 Antwort Letzte Antwort
        0
        • C Offline
          C Offline
          Communicate
          schrieb am zuletzt editiert von
          #12

          ` > von Homoran » 28.08.2015, 20:15

          Communicate hat geschrieben:

          Hallo Bluefox,

          hast Du noch einen Tip für mich, wie ich das bei den Metro Widgets am besten mache?

          Hat er bestimmt, nur jetzt nicht :mrgreen: `

          Hallo Bluefox, jetzt wo Du aus Deinem wohlverdienten Urlaub wieder da bist - hast Du noch einen Tipp für mich,

          wie ich die Standardhintergründe (also z.B. BG Magenta) mit eigenen CSS Farben "missbrauchen" kann?

          Danke und Gruß

          Dominic

          1 Antwort Letzte Antwort
          0
          • BluefoxB Offline
            BluefoxB Offline
            Bluefox
            schrieb am zuletzt editiert von
            #13
            #visview_DemoView .bg-magenta{
                background-color: red !important;
            }
            
            

            Bitte merken dass #visview_DemoView muss mit deinem View-Namen ersetzt werden.
            48_2015-09-17_10_48_31-iobroker.vis.png

            Du kannst sogar so was machen:
            48_2015-09-17_11_01_31-iobroker.vis.png

            Hier ist ein Beispiel:

            http://lea.verou.me/demos/css3-patterns.html

            1 Antwort Letzte Antwort
            0
            • C Offline
              C Offline
              Communicate
              schrieb am zuletzt editiert von
              #14

              Danke das hilft mir! !!

              Gibt es irgendwo eine Übersicht, bei welcher Widget Art man wie die css befehle nutzen kann? Oder kann man das zumindest Irgendwo aus ableiten? Dann muss ich Dich nicht ständig fragen

              von unterwegs gesendet
              144_feiertage.png

              1 Antwort Letzte Antwort
              0
              • BluefoxB Offline
                BluefoxB Offline
                Bluefox
                schrieb am zuletzt editiert von
                #15

                Mit Shift+RechteMaus, kannst du durch ContextMenü "Element Quelltext anzeigen" aufmachen. Dann
                48_2015-09-17_11_17_11-iobroker.vis.png

                1 Antwort Letzte Antwort
                0
                • M Offline
                  M Offline
                  mikiline
                  schrieb am zuletzt editiert von
                  #16

                  Hallo,

                  wäre es nicht möglich noch im Bereich "CSS Allgemein" einen /div/ Bereich angeben, wo man das ganze Widget in einen Container seiner Wahl packen kann?

                  Das macht den ganzen Aufbau noch flexibler finde ich, da man dann den ganzen Container (nach Box Prinzip) in seiner Form darstellen kann und jedem Widget darauf einen eindeutigen Namen der nur einmal vorkommt

                  Momentan geht das nicht, glaube ich. Man kommt "nur" an die Klasse im jeweiligen Container.

                  Oder gibt es irgendwo eine Übersicht wie ich meine Widgets (und nicht den Inhalt) mit einem flow:left so positionieren kann, das diese auch mit dem Inhalt "mitwachsen bzw. verschoben werden"….

                  Ich hoffe ich drücke mich nicht zu kompliziert aus

                  Hat mir jemand eine Info wie er es bewerkstelligt.....z,B bei 2 ical Kalender (2 HTML Widgets) untereinander sollen immer im gleichen Abstand angezeigt werden, egal wieviel Inhalt ein Widget hat. Das Untere also z.B mit nach unten rutscht wenn "oben" mehr drinne steht


                  Habe es gefunden..... Danke !

                  1 Antwort Letzte Antwort
                  0
                  • P Offline
                    P Offline
                    pix
                    schrieb am zuletzt editiert von
                    #17

                    @mikiline:

                    Hat mir jemand eine Info wie er es bewerkstelligt…..z,B bei 2 ical Kalender (2 HTML Widgets) untereinander sollen immer im gleichen Abstand angezeigt werden, egal wieviel Inhalt ein Widget hat. Das Untere also z.B mit nach unten rutscht wenn "oben" mehr drinne steht `

                    Du kannst ein HTML widget Nutzen und die Datenpunkte als Bindings einfügen

                    {ical.0.data.html}
                    {ical.1.data.html}
                    
                    

                    Abstände, Float, alles machbar.

                    Gruß

                    Pix

                    ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                    1 Antwort Letzte Antwort
                    0
                    • M Offline
                      M Offline
                      mikiline
                      schrieb am zuletzt editiert von
                      #18

                      super, DANKE!

                      Man sieht den Wald vor lauter Bäumen nicht :-)

                      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

                      531

                      Online

                      32.7k

                      Benutzer

                      82.4k

                      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