Navigations Button hervorheben

youngster91

Hallo zusammen,

bin schon ziemlich begeistert von ioBroker und Vis und gerade ein bisschen am rumspielen.

Da bin ich auf die Navigationsbuttons gestoßen.

Gibt es bei den Navigations-Icon-Buttons die Möglichkeit über CSS oder sonst wie hervorzuheben wo welcher gerade geklickt wurde (so dass man in der Navigation weiß wo man gerade ist). Habe es bisher nur hinbekommen, dass solange ich drauf klicke die Farbe ändert. Würde es gerne per CSS machen, da ich dann auch sagen könnte bei anklicken Farbe und Schrift ändern oder anderes Bild einfügen oder ähnliches und zum Lernen ist es ganz gut wenn man mal ein wenig damit rumgespielt hat.

Eine weitere Frage wäre, wie kann man bei "static navigation Tile navigation" die Schrift unten größer machen oder eventuell sogar verschieben? Gibt es da eine Möglichkeit, dass man den Text Beliebig verschieben kann so dass er nicht nur noch unten ist sondern z.B. da wo die "Ikone" ist?

Ihr könnt mir auch gerne noch weitere Möglichkeiten nennen.

Vielleicht weiß ja jemand eine einfache und elegante Lösung

youngster91

habe auch shcon von Bluefox diese Anleitung http://forum.iobroker.de/viewtopic.php?t=1020 gesehen, was ja eig genau ist was ich machen will, aber kann da nicht unterschiedlich einstellen für Aktiv oder nicht Aktiv. Alles was ich bisher gefunden habe, da haben die Leute immer noch einen HTML Code mit eingebunden, aber ich habe keine Ahnung wie ich hier das am Besten machen sollte (vielleicht weiß das ja auch jemand von euch).

pix

Hallo,

ich habe das hier schon erklärt:

http://forum.iobroker.de/viewtopic.php?t=1020#p8042

Eine neue View erstellen (zB Name "Navigation").

Darin nimmst du das Metro Navigations Widget. Du kannst den Hintergrund ja gestalten, wie du willst. Für jeden Menüpunkt ein Widget. Du kannst sie dann nebeneinander oder übereinander anordnen. Jedes verwendete Widget zeigt ja nur auf jeweils eine externe View.

In allen Views, die später die Navigation zeigen sollen, musst du nun das Widget "View in Widget" platzieren. Inhalt ist die View "Navigation", die du zuvor erstellt hast.

Wenn du nun auf einer View bist, die in der Navigationsliste dabei ist, dann wird diese markiert (so wie du es vorher in den Metro-Navi-Widgets festgelegt hast).

Ich habs kurz aufgemalt. Entschuldige die schlechte Qualität: 261_bildschirmfoto_2016-04-15_um_20.48.41.jpg

Gruß

Pix

youngster91

Kannst du mir denn sagen, wie ich die Metro so änder wie ich will. Z.B. wo das riesen lila Feld ist sollte mein Text sein und nicht unten, wie kann ich den Text größer oder kleienr machen und die Schriftfarbe ändern?

http://www.fotos-hochladen.net/view/unbenannte4pchbfkwy.png ~~Wenn ich unter CSS Font&Text irgendetwas änder tut sich an dem Text gar nichts, das einzige was ich also machen kann wäre die Größe desWidgets auf die Größe des kleinen schraffierten Vierecks zu ziehen und dort anstatt Navigation, meinen Text reinschreiben und ein Bild meiner Wahl. Aber das ist ja jetzt auch noch nicht viel was ich machen kann, wenn ich es nicht größer ziehen kann als der schraffierte Balken ist und ich an der Schrift etc. nichts ändern kann.

Hoffe weißt was ich meine und kannst mir helfen?~~

pix

Hallo,

hier mal eins von mir exportiert:

[{"tpl":"tplMetroTileNav","data":{"visibility-cond":"==","visibility-val":1,"hover":false,"transform":true,"label":"Kamera","bg_class":"bg-transparent","bg_class_active":"ribbed-cyan","badge_bg_class":"bg-transparent","badge_bg_class_active":"bg-transparent","icon_badge":"icon-camera-2","brand_bg_class":"bg-transparent","brand_bg_class_active":"bg-transparent","icon_class":"","nav_view":"Kamera","name":"Navigation zu Kameras (iPad)","icon_src":"","icon_height":"100","icon_width":"100","select_current":false,"icon_top":"14","icon_left":"22","views":null,"badge_top":"0","badge_left":"0","gestures-offsetX":0,"gestures-offsetY":0},"style":{"left":"106px","top":"5px","z-index":"25","width":"100px","height":"40px","font-family":""},"widgetSet":"metro"}]

Du kannst die Schrift in Metro Tiles so ändern: http://forum.iobroker.net/viewtopic.php … 37&p=14739

.metro .label {font-size: 35px !important }

Edit: Das Schraffierte ist im Editor das sogenannte "Abzeichen". Das kann, wenn aktiv, eine andere Farbe/Hintergrund haben, als wenn es nicht aktiv wäre.

Gruß

Pix

youngster91

Kann ich denn auch die Größe des Abzeichens ändern falls ich z.B. einen größeren Button machen will und kann ich dann in dem größeren Button die Schrift einigermaßen frei platzieren?

Ansonsten wäre der Button genau das was ich suche, nur hätte halt gerne die Möglichkeit nicht von der maximalen Höhe des Abzeichens abhängig zu sein.

pix

Hast du dir denn die Einstellungsmöglichkeiten des Widgets mal angesehen?

Das Abzeichen lässt sich ziemlich frei platzieren. 261_bildschirmfoto_2016-04-16_um_02.09.01.jpg
Den Text kannst du eben auch mit den CSS-Einstellungen von .metro .label verändern (margin, padding, rahmen, etc.). Irgendwo hier im Forum steht auch noch, wie man das nur auf eine View anwendet (also die View "Navigation" in diesem Falle).

Letztlich gibt es noch den Workaround, sich selbst Icons in Photoshop zu basteln, die schon einen Text haben. Das Icon dann als Abzeichen verwenden. Ist erstmal mühsam, aber geht immerhin.

Gruß

Pix

youngster91

~~@pix:~~

Hast du dir denn die Einstellungsmöglichkeiten des Widgets mal angesehen?

Das Abzeichen lässt sich ziemlich frei platzieren. filename="Bildschirmfoto 2016-04-16 um 02.09.01.jpg" index="0">~~ `

Da liegt das Problem, bei mir tut sich nämlich mit den von dir gezeigten Einstellungen nichts ich versuche mal Metro zu deinstallieren und wieder drauf zu machen und melde mich dann nochmal

youngster91

Also auch nach deinstallieren tut sich nichts wie auf dem Bild zu sehen ist.

http://www.bilder-upload.eu/show.php?file=d28496-1460798064.png ~~Weiß jmd woran das liegen könnte?~~

pix

Hallo youngster,

erstmal bitte ich dich, die im Forum eingebaute Bild/Datei-Funktion zu nutzen. Wir brauchen keine externen Hoster

Du kannst die Bilddatei im Abzeichen (engl. Batch) beliebig mit CSS verschieben. Deine Installation war sicher schon korrekt. Anbei ein Screenshot und ein paar Beispielbefehle für das Batch.

! ````
.metro .label {
height: 3em;
}
.metro .label {
font-size: 2em !important;
}
! .metro .badge {
height: 50px !important;
width: 150px !important;
border: 5px solid red !important;
}
! .metro .badge img {
height: 100% !important;
border: 3px solid pink !important;
padding-left: 30px !important;
}


>!  ![261_bildschirmfoto_2016-04-16_um_14.27.19.jpg](/assets/uploads/files/261_bildschirmfoto_2016-04-16_um_14.27.19.jpg) 
Aber bedenke, dass dieser Code ****alle**** Metro-Widgets im Projekt beeinflusst. Wenn du nur ein bestimmtes Widget ändern willst, dann kannst du dessen Widgetnummer (hier W00204) als id in die CCS einbauen oder noch besser eine CSS-Klasse (ohne Punkt) in den Widgeteinstellungen definieren. Letzteres ist praktisch, wenn man mehrere Widgets gleich formatieren will. ![261_bildschirmfoto_2016-04-16_um_14.24.38.jpg](/assets/uploads/files/261_bildschirmfoto_2016-04-16_um_14.24.38.jpg) Das __!important__ hinter jedem Befehl ist nicht schön, aber notwendig, sonst gelten die Standard-Formatierungen.

Wie soll denn deine Navigation aussehen? Vielleicht kann ich dir helfen.

Gruß,

Pix

youngster91

Perfekt, genauso hab ich mir das vorgestellt danke dir

Könntest du mir eventuell auch noch sagen, wie ich die Bildgröße ändern kann, weil wenn ich die unter badge img ändern will tut sich nichts (werder mit height, max-heigth noch sonst was) und wie lautet der Befehl um einen eigenen Icon einzufügen?

Vielen Dank schon einmal

pix

Hallo youngster,

das ist kein CSS Befehl, sondern das kannst du unter den Widgeteinstellungen/Abzeichen/Abzeichen URL festlegen. Dann im Pulldown Menü auf Custom stellen. Habe dir in http://forum.iobroker.net/viewtopic.php?f=30&t=2687#p23917 einen Screenshot dazu gemacht (zweiter Spoiler). Abzeichen-Höhe und Breite, sowie Position lassen sich erstmal über die Schieberegler einstellen.

Gruß

Pix

Schnubbi

Hallo,

ich nutze das metro - tile navigation, jedoch keine ich keine Hintergrundfarbe wählen. Bei mir steht nur "keins".

Könnte mir vielleicht jemand helfen?

pix

Ein Screenshot wäre hilfreich. Kannst du denn für die anderen Bereiche (Brandhintergrund, etc…) Farben auswählen?

Pix

Schnubbi

Hallo,

anbei der Screenshot. Ich würde gerne einen Hintergrund einstellen, wenn ich zum Beispiel auf der "View" DG bin.
3093_unbenannt.jpg

Superdad

Und wenn du mal auf den Pfeil neben "keins" drückst?

Schnubbi

da ist dann nichts dargestellt. keine Farben

kann ich ohne Probleme den adapter noch deinstallieren?

derzeit läuft dies noch auf meinem Windows PC

NEWS

Navigations Button hervorheben

Support us

614

32.4k

81.3k

1.3m