Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Navigations Button hervorheben

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.0k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.0k

Navigations Button hervorheben

Navigations Button hervorheben

Scheduled Pinned Locked Moved Visualisierung
17 Posts 4 Posters 6.9k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Y Offline
    Y Offline
    youngster91
    wrote on last edited by
    #4

    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?~~

    1 Reply Last reply
    0
    • P Offline
      P Offline
      pix
      wrote on last edited by
      #5

      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

      ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

      1 Reply Last reply
      0
      • Y Offline
        Y Offline
        youngster91
        wrote on last edited by
        #6

        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.

        1 Reply Last reply
        0
        • P Offline
          P Offline
          pix
          wrote on last edited by
          #7

          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

          ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

          1 Reply Last reply
          0
          • Y Offline
            Y Offline
            youngster91
            wrote on last edited by
            #8

            @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 😉

            1 Reply Last reply
            0
            • Y Offline
              Y Offline
              youngster91
              wrote on last edited by
              #9

              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?

              1 Reply Last reply
              0
              • P Offline
                P Offline
                pix
                wrote on last edited by
                #10

                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

                ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                1 Reply Last reply
                0
                • Y Offline
                  Y Offline
                  youngster91
                  wrote on last edited by
                  #11

                  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 🙂

                  1 Reply Last reply
                  0
                  • P Offline
                    P Offline
                    pix
                    wrote on last edited by
                    #12

                    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

                    ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      Schnubbi
                      wrote on last edited by
                      #13

                      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?

                      1 Reply Last reply
                      0
                      • P Offline
                        P Offline
                        pix
                        wrote on last edited by
                        #14

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

                        Pix

                        ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                        1 Reply Last reply
                        0
                        • S Offline
                          S Offline
                          Schnubbi
                          wrote on last edited by
                          #15

                          Hallo,

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

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            Superdad
                            wrote on last edited by
                            #16

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

                            CCU3

                            iOBroker auf IntelNUC Proxmox

                            1 Reply Last reply
                            0
                            • S Offline
                              S Offline
                              Schnubbi
                              wrote on last edited by
                              #17

                              da ist dann nichts dargestellt. keine Farben

                              kann ich ohne Probleme den adapter noch deinstallieren?

                              derzeit läuft dies noch auf meinem Windows PC

                              1 Reply Last reply
                              0
                              Reply
                              • Reply as topic
                              Log in to reply
                              • Oldest to Newest
                              • Newest to Oldest
                              • Most Votes


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              571

                              Online

                              32.4k

                              Users

                              81.3k

                              Topics

                              1.3m

                              Posts
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                              ioBroker Community 2014-2025
                              logo
                              • Login

                              • Don't have an account? Register

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Recent
                              • Tags
                              • Unread 0
                              • Categories
                              • Unreplied
                              • Popular
                              • GitHub
                              • Docu
                              • Hilfe