Metro Farben

vore

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

pix

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.

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

Bluefox

~~@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;       
}

pix

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:
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

!
! 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

tempestas

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

tempestas

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

HELP :shock: :?:

pix

Hallo,

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

Gruß

Pix

ich77

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

andreaskos

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

tempestas

@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

stockics6

Hi,

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

Danke!

Community Forum

NEWS

Metro Farben

Support us

785

32.6k

82.2k

1.3m