Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[hmanfred]

Hallo zusammen,

bin relativ neu im Thema. Aber erst mal Hut ab zu dem, was ioBroker leistet und auch, wie hier im Forum geholfen wird!

Nach anfänglicher Euphorie bin ich aber einigermaßen gefrustet, weil alles nicht so voran geht, wie ich mir das wünsche. Aber dafür gibt's ja euch. :-)

Ich habe zu den Metro Widgets eine Frage am Beispiel "Tile Navigation":

Es gibt da unter Allgemein - Beschriftung die Möglichkeit einen Text einzutragen, der angezeigt wird. Ich möchte ihn verwenden, die navigation zusätzlich zum Icon zu erleichtern. Also z.B. Icon "Notenschlüssel" und Text "Musik".

Wie kann ich den Text formatieren? Er bleibt immer in der gleichen Größe, auch wenn ich das Widget größer ziehe. Auf dem Handydisplay ist er dann u.U. unlesbar.

Jegliche Einstellung unter CSS Font & Text wird ignoriert.

Danke für jeden hilfreichen Hinweis.

Manfred

[Marc.Matic]

Hallo!

Hatte das gleiche Problem…

Die Metro Widgets "überschreiben" die CSS Einstellungen im Widget Reiter. Daher muss man z.B. im CSS Reiter die Klassen noch mal selber überschreiben...

.metro .label {

font-family: roboto-local-condesed-regular !important;

font-size: 17px !important;

}

Damit überschreibe ich einfach pauschal alles, was mit den Metro Labels zu tun hat. Bei der Font Family muss man natürlich was passendes eintragen. Wichtig ist, dass !important; am Ende steht, nur so wird auch definitiv diese CSS Anweisung genutzt und nicht irgend eine, die vom Browser an anderer Stelle geladen wird.

Das bezieht sich jetzt aber nur auf Labels. Hiermit kann man ALLES was von Metro ist überschreiben:

.metro * {

font-family: roboto-local-condesed-regular !important;

font-size: 17px !important;

}

Wenn unterschiedliche Bereiche unterschiedlich Formatiert sein sollen so muss man das natürlich mit einzelnen Styles definieren.

Die sind alle in metro-bootstrap.css zu finden. (Bei mir z.B. in opt/iobroker/node_modules/iobroker.vis-metro.

Dort könntest du die Styles auch einfach überschreiben/ändern, aber ich mache das immer über den CSS Reiter damit ich die Adapter in ihrem Originalzustand lasse. Erleichtert ein späteres Updates eines Adapters weil man sich an sein "Hand anlegen" nicht mehr erinnern muss.

Lg

Marc

[hmanfred]

Danke Marc, das scheint zu klappen. Dennoch dazu ein paar weitere Fragen:

Ich mache den Eintrag auch für jedes einzelne Widget.

Kann ich den Eintrag im CSS-Reiter so gestalten, dass ich dann zusätzlich noch im Widget-Reiter feintunen kann? Also z.B. size und align?

[Marc.Matic]

Ich habe mich damit nicht so wirklich im Detail beschäftigt und es nur soweit verstanden, dass die Metro Widgets die Einstellungen im Widget Reiter ignorieren (meine jedenfalls, das hier in einem Beitrag gelesen zu haben). Letztendlich müsstest du das alles über die CSS Befehle machen. Ist natürlich nicht so komfortabel aber solange man zum Ziel kommt. Ich hab in dem Beispiel halt nur Größe und Schrift angepasst.

Als Referenz für alle CSS Styles:

http://www.w3schools.com/cssref/

[pix]

Hier gibt es noch mehr: * Farben http://forum.iobroker.net/viewtopic.php?f=30&t=2849

• Badge http://forum.iobroker.net/viewtopic.php … 87&p=23917

• Schrift: http://forum.iobroker.net/viewtopic.php … 37&p=23367

Gruß

Pix

[thomassch]

Hallo Wissende :-)

ich würde gerne bei dem metro den Text über die gesamte Breite legen

Ich meine den Label Text der hat links und rechts einen sehr großen Abstand zum Rand.

Ich habe leider kein CSS gefunden der das machen könnte.!

Gruss

Thomas