Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. CSS für HQWidgets

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    CSS für HQWidgets

    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Communicate last edited by

      Hmm, dann müssen wir da wohl selber ran.

      Konkret habe ich folgendes Problem mit den Metro View Wechsel Kacheln:

      Wenn ich bei Background eine Farbe eingebe dann sehe ich diese nur leicht durchschimmern, das eigentliche Widget ist aber nur grau. Grau kann ich ändern indem ich eine Art Stil wie z.b. Bg-amber auswähle. Nur will ich kein amber sondern eine eigene Farbe. Hat jemand eine Idee, wie das geht?

      1 Reply Last reply Reply Quote 0
      • Homoran
        Homoran Global Moderator Administrators last edited by

        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

        1 Reply Last reply Reply Quote 0
        • P
          pix last edited by

          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

          1 Reply Last reply Reply Quote 0
          • Homoran
            Homoran Global Moderator Administrators last edited by

            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

            1 Reply Last reply Reply Quote 0
            • C
              Communicate last edited by

              ` > 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 Reply Last reply Reply Quote 0
              • Bluefox
                Bluefox last edited by

                #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 Reply Last reply Reply Quote 0
                • C
                  Communicate last edited by

                  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 Reply Last reply Reply Quote 0
                  • Bluefox
                    Bluefox last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • M
                      mikiline last edited by

                      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 Reply Last reply Reply Quote 0
                      • P
                        pix last edited by

                        @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

                        1 Reply Last reply Reply Quote 0
                        • M
                          mikiline last edited by

                          super, DANKE!

                          Man sieht den Wald vor lauter Bäumen nicht 🙂

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          784
                          Online

                          31.9k
                          Users

                          80.1k
                          Topics

                          1.3m
                          Posts

                          5
                          18
                          4933
                          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