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

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    12
    2
    233

  • 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.7k

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

                          66

                          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