Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Metro Farben

    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

    Metro Farben

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

      Hallo!

      Kann ich bei Metro auch eigene Farben fetslegen für die Widgets? So wie ich das sehen, gibt es nur die Farben in der Drop-Down Liste?

      Es geht mir um die Hintergrundfarbe eine Widgets..

      Gruß

      Vore

      1 Reply Last reply Reply Quote 0
      • Jey Cee
        Jey Cee Developer last edited by

        Es müsste mit custom CSS möglich sein. Das findest du rechts bei den eigenschaften im Tab CSS. Da kannst du dann für die klasse des/r widgets eigene Eigenschaften fedtlegen.

        Gesendet von meinem Jolla mit Tapatalk

        1 Reply Last reply Reply Quote 0
        • V
          vore last edited by

          Hallo!

          Das habe ich schon probiert.. aber noch nicht mit der Klasse. Wie kann ich die Klasse festlegen? Oder ist das der Name vim Widget?

          Gruß

          Vore

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

            Die ID des Widgets (hier: w00435) anpassen:

            /* CSS Test Metro Widget */
            div#metroTile_w00435.tile.hover.bg-indigo {
                background:
                linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
                linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
                linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
                linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
            }
            }
            
            ```` ![261_bildschirmfoto_2016-05-15_um_02.41.17.jpg](/assets/uploads/files/261_bildschirmfoto_2016-05-15_um_02.41.17.jpg) 
            geht natürlich nur, wenn das Widget die Grundfarbe __indigo__ hat (Standard-Einstellung)
            
            Gruß
            
            Pix
            
            Edit: Geht noch einfacher:
             *   Widget anklicken
            
            *   In Widget Einstellungen unter CSS Klasse "farbe" eintragen
            
            *   Im Nachbarreiter CSS diesen Code unterbringen
                ````
                /* CSS Test Metro Widget */
                .farbe .bg-indigo {
                    background:
                    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
                    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
                    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
                    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
                }
                ```` 
            Somit ist das dann schneller auf mehrere Widgets anwendbar, da man nur "farbe" in deren Einstellungen eintragen muss :lol:
            
            Nochn Edit:
            
            Andere Klassen gehen natürlich auch: bg-transparent, bg-orange, bg-green, usw.
            1 Reply Last reply Reply Quote 0
            • V
              vore last edited by

              Hallo!

              Erst einmal vielen Dank für die Infos!

              Ich habe den Code zu übernommen und ich bekomme auch das Widget mit dem Verlauf so hin.

              Allerdings reicht mir eine Farbe für das Widget aus.

              Ich habe es mit dem folgenden CSS Code versucht:

              /* CSS Test Metro Widget */
              .farbe .bg-indigo {
                   background: #00ff00;
              }
              

              und auch

              /* CSS Test Metro Widget */
              .farbe .bg-indigo {
                  background-color: lightblue;       
              }
              

              Allerdings bleibt die Farbe immer Indigo. Was mache ich falsch?

              Danke!

              Vore

              1 Reply Last reply Reply Quote 0
              • Bluefox
                Bluefox last edited by

                @vore:

                Hallo!

                Erst einmal vielen Dank für die Infos!

                Ich habe den Code zu übernommen und ich bekomme auch das Widget mit dem Verlauf so hin.

                Allerdings reicht mir eine Farbe für das Widget aus.

                Ich habe es mit dem folgenden CSS Code versucht:

                /* CSS Test Metro Widget */
                .farbe .bg-indigo {
                     background: #00ff00;
                }
                

                und auch

                /* CSS Test Metro Widget */
                .farbe .bg-indigo {
                    background-color: lightblue;       
                }
                

                Allerdings bleibt die Farbe immer Indigo. Was mache ich falsch?

                Danke!

                Vore `

                #vis_container .farbe .bg-indigo {
                    background: lightblue !important;       
                }
                
                1 Reply Last reply Reply Quote 0
                • P
                  pix last edited by

                  Hallo,

                  genau, die Änderung der Farbe betrifft nur metro-Widgets, die VOR der Änderung die in der Klasse angebenene Hintergrund-Farbe haben (zB bg-indigo). Wenn durch Druck/Tastenklick das Widget zB von ein auf aus springt und dabei eine Farbe zB von indigo auf rot wechselt, dann muss man auch eine CSS-Anweisung für ein metro Widget mit ursprünglich rotem Hintergrund schreiben, wenn das einem nicht gefällt (also .bg-red).

                  Es tauchte an anderer Stelle noch die Frage nach der blauen Umrandung /Markierung bei Wahr auf. Diese lässt sich bei den Metro-Widgets durch Anhaken der Option "Selektieren bei Wahr" aktivieren.
                  261_bildschirmfoto_2016-05-18_um_10.51.09.jpg Dann haben die Metro Widgets bei true diesen Look: 261_bildschirmfoto_2016-05-18_um_10.51.00.jpg
                  Wem nun das blau mit dem weißen Haken nicht gefällt, der kann das natürlich auch per CSS ändern 8-) . Am besten wieder mit dem Menüpunkt CSS Klasse, dann kommt man nicht so schnell durcheinander, sollte man viele Widgets verändern:
                  261_bildschirmfoto_2016-05-18_um_11.43.11.jpg
                  <u>Hier zur Anleitung:</u>

                  eigene CSS-Klasse in das entsprechende EIgenschaften-Feld des Widgets eintragen. Ich habe mir die Klassen so ausgedacht: metro_status_farbe zB metro_aktiv_pink

                  ! 261_bildschirmfoto_2016-05-18_um_11.43.05.jpg
                  ! CSS-Code für metro_aktiv_pink (ggf. Namen ändern) - <size size="85">hier den Punkt für die Klasse davorsetzen</size>

                  /* Haken beim Anhaken */
                  #vis_container .vis-widget .metro_aktiv_pink .selected:before {
                    position: absolute;
                    display: block;
                    content: "\e003";
                    color: red !important;
                    right: 0;
                    font-family: 'metroSysIcons';
                    font-size: 9pt;
                    font-weight: normal;
                    z-index: 102;
                    top: 0;
                  }
                  /* Rahmen, statt #4390df jetzt pink*/
                  #vis_container .vis-widget .metro_aktiv_pink /*.image-container*/ .selected {
                    border: 4px /*#4390df*/ pink solid !important;
                  }
                  #vis_container .vis-widget .metro_aktiv_pink /*.image-container*/ .selected:after {
                    position: absolute;
                    display: block;
                    border-top: 28px solid /*#4390df*/ pink;
                    border-left: 28px solid transparent;
                    right: 0;
                    content: "";
                    top: 0;
                    z-index: 101;
                  }
                  

                  ! Wenn es nur um die Farben geht, würde ich die Anweisungen abkürzen und nur die die Farben betreffenden Befehlen neu geben. Der Rest wurde ja schon definiert. Möglicherweise braucht man nicht jedes "!important", das ist auszuprobieren.
                  ! Gekürzte Variante:

                  /* Haken beim Anhaken */
                  #vis_container .vis-widget .metro_aktiv_pink .selected:before {
                    content: "\e003"; /* Symbol */
                    color: red !important;
                  }
                  /* Rahmen, statt #4390df jetzt pink*/
                  #vis_container .vis-widget .metro_aktiv_pink /*.image-container*/ .selected {
                    border-color: /*#4390df*/ pink !important;
                  }
                  #vis_container .vis-widget .metro_aktiv_pink /*.image-container*/ .selected:after {
                    border-top-color: /*#4390df*/ pink;
                    border-left-color: transparent;
                  }
                  >! ````
                  >! Im Code lässt sich unter content auch der haken gegen ein anderes Zeichen austauschen. Es muss aber in der bereits installierten Schriftart[https://github.com/ioBroker/ioBroker.vis-metro/blob/master/widgets/metro/fonts/metroSysIcons.ttf](https://github.com/ioBroker/ioBroker.vis-metro/blob/master/widgets/metro/fonts/metroSysIcons.ttf) vorkommen (von vorne durchzählen und mit 000 beginnen -> der Haken ist das Zeichen 003).
                  >!  ![261_metrosysicons.jpg](/assets/uploads/files/261_metrosysicons.jpg) 
                  Um das Zeichen zu ändern, muss man den Charcode ändern. Ich habe leider nicht den korrekten Code gefunden, um das Zeichen dicke X darzustellen. Ist zwar angeblich in der Schrift enthalten, aber nicht von 001 bis 020\. Das Minus, das Kreuz, die Lupe, das Zahnrad und die zwei Zeichen davor konnte ich nicht finden.
                  >! Hier nochmal mit Stern (2p größer als der Haken im Original):
                   ![261_bildschirmfoto_2016-05-18_um_12.10.21.jpg](/assets/uploads/files/261_bildschirmfoto_2016-05-18_um_12.10.21.jpg) 
                  

                  #vis_container .vis-widget .metro_aktiv_pink .selected:before {
                  content: "\e016";
                  color: red !important;
                  font-family: 'metroSysIcons';
                  font-size: 11pt;
                  }

                  ! ````

                  Viel Spaß beim Nachbauen!

                  Gruß

                  Pix

                  1 Reply Last reply Reply Quote 0
                  • T
                    tempestas last edited by

                    Ich muss hier mal einhaken.

                    Ich habe folgendes bei mir unter CSS eingetragen

                    #vis_container .lightgreen .bg-lightGreen {
                        background: #a2e392 !important;       
                    }
                    
                    

                    in den widgets vergebe ich als CSS Klasse "lightgreen".

                    Das funktioniert soweit auch, allerdings ist jetzt irgendwie die Farbe "Bg-lightGreen" aus meinen Metro Widgets verschwunden? Ich kann quasi keine neuen Widgets mehr anlegen und denen mein lightgreen zuordnen, da ich Bg-lightGreen nicht auswählen kann.

                    Sprich normalerweise ist Bg-lightGreen auswählbar zwischen Bg-lightRed und Bg-lighterBlue –> jetzt ist es in diesem Projekt weg?

                    Nach meinem Verständnis muss ich das aber auswählen und dann zusätzlich die CSS Klasse zuweisen

                    Bei den Widgets, wo ich es neulich noch konnte, steht jetzt auch bei den Hintergründen immer "keins", die Formatierung funkioniert aber (noch?)

                    Edit: das herauslöschen der CSS Anweisung führt nicht dazu, dass die normale Bg-lightGreen wieder auswählbar ist. Es bleibt verschwunden

                    1 Reply Last reply Reply Quote 0
                    • T
                      tempestas last edited by

                      ich muss nochmal pushen, da das verschwundene Bg-lightGreen doch ziemlich nervt.

                      HELP :shock: :?:

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

                        Hallo,

                        wie bereits per PN mitgeteilt, kann ich diesen Fehler nicht reproduzieren. Vielleicht jemand anderes?

                        Gruß

                        Pix

                        1 Reply Last reply Reply Quote 0
                        • I
                          ich77 last edited by

                          Hallo zusammen,

                          ist zwar ein alter Post, aber ich hätte da eine Frage, bei der ich nicht weiter komme…

                          Bei Basic-Widgets kann ich über````
                          {h:hm-rpc.1.MEQ0479017.1.HUMIDITY; h <=60 ? "#008a00" : h <=65 ? "#e3c800" : "#a20025"}

                          div#metroTile_w00061.tile.hover.bg-indigo {
                          background: {h:hm-rega.0.3832; h<5 ? "black" : "red"} !important;
                          }

                          Das funktioniert leide so nicht…
                          
                          eine Farbe bekomme ich hin:
                          

                          div#metroTile_w00061.tile.hover.bg-indigo {
                          background: black !important;
                          }

                          
                          Vielen Dank
                          
                          Markus
                          1 Reply Last reply Reply Quote 0
                          • andreaskos
                            andreaskos last edited by

                            Hi zusammen!

                            ich kann das beschriebene Verhalten von tempestas auch reproduzieren? Auch bei mir sind in der Dropdown-Liste zu den Hintergrundfarben alle Einträge weg, die ich im CSS-Tab überschrieben habe.

                            @tempestas
                            Hast du eine Lösung gefunden?

                            Liebe Grüße,
                            Andreas

                            T 1 Reply Last reply Reply Quote 0
                            • T
                              tempestas @andreaskos last edited by

                              @andreaskos

                              Oha, das ist ja fast 1.5 Jahre alt.
                              Ich nutze seit geraumer Zeit keine Metro Widgets mehr, kann also leider nicht helfen. Sorry

                              1 Reply Last reply Reply Quote 0
                              • S
                                stockics6 last edited by

                                Hi,

                                weiß jemand wie man von dem markierten Button die Farbe ändern kann ?

                                Danke!Bild.JPG

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

                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                614
                                Online

                                31.9k
                                Users

                                80.2k
                                Topics

                                1.3m
                                Posts

                                8
                                14
                                2792
                                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