Skip to content
  • Home
  • 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
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] Material Design CSS für ioBroker.vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    936

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

[Projekt] Material Design CSS für ioBroker.vis

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.1k Views 68 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.
  • D davimas

    Danke für das Projekt - ich habe mir sogar die Anleitung ausgedruckt und lese immer wieder in der Mittagspause.

    Zwei Einsteigerfragen, wie ändere ich die Farbe der lnav?
    Bei der abar geht es mit "mdui-black-bg" Zugabe auf der Startpage, jedoch bekomm ich es nicht bei der lnav hin.

    Desweiteren sind die Farben ja festgelegt - und hätte gerne die abar in plüschrosa ;-))) Also habe ich in der CSS Klasse das "mdui-abar" weggemacht und so den Hintergrund farblich angepasst. Macht es jetzt was aus wenn die "abar" nicht als solche "festgelegt" ist?

    by,
    David

    P Offline
    P Offline
    Pittini
    Developer
    wrote on last edited by
    #390

    @davimas Wenn Du die vordefinierten Farben nicht magst, dann dort ändern wo se definiert sind und nicht iwelche Verrenkungen machen welche iwann zu Problemen führen (können) Definiert sind se im CSS Bereich.
    Inked2019-11-25 11_02_05-Window_LI.jpg

    D 1 Reply Last reply
    1
    • P Pittini

      @davimas Wenn Du die vordefinierten Farben nicht magst, dann dort ändern wo se definiert sind und nicht iwelche Verrenkungen machen welche iwann zu Problemen führen (können) Definiert sind se im CSS Bereich.
      Inked2019-11-25 11_02_05-Window_LI.jpg

      D Offline
      D Offline
      davimas
      wrote on last edited by
      #391

      @Pittini
      Perfekt - Danke hat funktioniert. Und die Schriftfarbe der Textes/Menü in der lnav?

      P 1 Reply Last reply
      0
      • D davimas

        @Pittini
        Perfekt - Danke hat funktioniert. Und die Schriftfarbe der Textes/Menü in der lnav?

        P Offline
        P Offline
        Pittini
        Developer
        wrote on last edited by
        #392

        @davimas said in [Projekt] Material Design CSS für ioBroker.vis:

        Und die Schriftfarbe der Textes/Menü in der lnav?

        Jedes mdui-blabla hat eine Entsprechung in der CSS Datei, mußt halt dort nach dem gewünschten mdui-xxx suchen.

        1 Reply Last reply
        1
        • UhulaU Uhula

          Vorab-Info:
          Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

          087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

          D Offline
          D Offline
          davimas
          wrote on last edited by
          #393

          @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

          Vorab-Info:
          Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

          087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

          Hey,

          sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

          by,
          David

          K 1 Reply Last reply
          0
          • S Offline
            S Offline
            Snapergy
            wrote on last edited by
            #394

            @Uhula
            erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

            Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

            D 1 Reply Last reply
            0
            • D davimas

              @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

              Vorab-Info:
              Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

              087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

              Hey,

              sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

              by,
              David

              K Offline
              K Offline
              K_o_bold
              wrote on last edited by
              #395

              @davimas ,
              @Uhula , das wäre echt super, wenn auch Chips zur Verfügung gestellt werden.

              1 Reply Last reply
              0
              • S Snapergy

                @Uhula
                erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

                Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

                D Offline
                D Offline
                dos1973
                wrote on last edited by
                #396

                @Snapergy
                Nimm doch einfach den DiscreteSlider aus dem MaterialDesign Adapter...?!

                S 1 Reply Last reply
                0
                • D dos1973

                  @Snapergy
                  Nimm doch einfach den DiscreteSlider aus dem MaterialDesign Adapter...?!

                  S Offline
                  S Offline
                  Snapergy
                  wrote on last edited by
                  #397

                  @dos1973
                  den gibt es leider nicht als vertikalen slider :(

                  1 Reply Last reply
                  0
                  • nukleuzN Offline
                    nukleuzN Offline
                    nukleuz
                    wrote on last edited by
                    #398

                    Gibt es schon das Update für die Chips?

                    Intel NUC -> ProxMox -> Debian -> ioBroker (Master)| RPI3B+ -> rtl_433 (Slave) | CCU2

                    1 Reply Last reply
                    0
                    • K Offline
                      K Offline
                      K_o_bold
                      wrote on last edited by K_o_bold
                      #399

                      So wie es aussieht, ist Uhula in diesem Forum nicht mehr so aktiv. Schade, denn die Chips sehen echt gut aus...

                      1 Reply Last reply
                      0
                      • UhulaU Offline
                        UhulaU Offline
                        Uhula
                        wrote on last edited by
                        #400

                        Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                        • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                        • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                        • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                        • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                        • alle material design Farben werden nun namentlich unterstützt
                        • Anpassung der MD_Demo und MD_Simple Projekte
                        • Anpassung der Dokumentation
                        • ...

                        Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                        Schöne Adventszeit noch!

                        Uhula - Leise und Weise
                        Ex: ioBroker on Gigabyte NUC Proxmox

                        Z D blauholstenB S frieda99F 5 Replies Last reply
                        5
                        • S Offline
                          S Offline
                          Schrauberheld
                          wrote on last edited by Schrauberheld
                          #401

                          Finde ich Mega das du noch an dem ganzen arbeitest :+1:

                          1 Reply Last reply
                          0
                          • UhulaU Uhula

                            Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                            • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                            • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                            • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                            • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                            • alle material design Farben werden nun namentlich unterstützt
                            • Anpassung der MD_Demo und MD_Simple Projekte
                            • Anpassung der Dokumentation
                            • ...

                            Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                            Schöne Adventszeit noch!

                            Z Offline
                            Z Offline
                            zahnheinrich
                            wrote on last edited by
                            #402

                            @Uhula
                            Da warte ich aber SEHR gespannt!
                            Ich glaube da spreche ich für eine größere Gemeinde, als du ahnst!

                            MfG Ulrich

                            D 1 Reply Last reply
                            0
                            • Z zahnheinrich

                              @Uhula
                              Da warte ich aber SEHR gespannt!
                              Ich glaube da spreche ich für eine größere Gemeinde, als du ahnst!

                              D Offline
                              D Offline
                              davimas
                              wrote on last edited by davimas
                              #403

                              @zahnheinrich

                              Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                              https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                              MeistertrM D 2 Replies Last reply
                              0
                              • UhulaU Uhula

                                Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                                • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                                • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                                • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                                • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                                • alle material design Farben werden nun namentlich unterstützt
                                • Anpassung der MD_Demo und MD_Simple Projekte
                                • Anpassung der Dokumentation
                                • ...

                                Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                                Schöne Adventszeit noch!

                                D Offline
                                D Offline
                                davimas
                                wrote on last edited by davimas
                                #404

                                @Uhula

                                Wäre cool wenn man "mdui-vibrate" als Klasse hätte - so wie die anderen neuen Widgets derzeit: "vibrateOnMobilDevices""

                                1 Reply Last reply
                                0
                                • K Offline
                                  K Offline
                                  K_o_bold
                                  wrote on last edited by
                                  #405

                                  Da is er ;-)....
                                  Super...da bin ich mal gespannt..hört sich gut an.

                                  1 Reply Last reply
                                  0
                                  • D davimas

                                    @zahnheinrich

                                    Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                                    https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                                    MeistertrM Offline
                                    MeistertrM Offline
                                    Meistertr
                                    Developer
                                    wrote on last edited by
                                    #406

                                    @davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

                                    1 Reply Last reply
                                    1
                                    • UhulaU Uhula

                                      Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                                      • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                                      • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                                      • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                                      • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                                      • alle material design Farben werden nun namentlich unterstützt
                                      • Anpassung der MD_Demo und MD_Simple Projekte
                                      • Anpassung der Dokumentation
                                      • ...

                                      Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                                      Schöne Adventszeit noch!

                                      blauholstenB Offline
                                      blauholstenB Offline
                                      blauholsten
                                      Developer
                                      wrote on last edited by
                                      #407

                                      @Uhula
                                      Bedeutung dein letzter Satz der Release kommt 2019 noch:grimacing: .....spaß bei Seite, ich freu mich riesig:clap:

                                      Nutze quasi deine viso schon seit dem es sie gibt

                                      Entwickler vom: - Viessman Adapter
                                      - Alarm Adapter

                                      1 Reply Last reply
                                      0
                                      • nukleuzN Offline
                                        nukleuzN Offline
                                        nukleuz
                                        wrote on last edited by
                                        #408

                                        Wir sind sehr gespannt 😎

                                        Intel NUC -> ProxMox -> Debian -> ioBroker (Master)| RPI3B+ -> rtl_433 (Slave) | CCU2

                                        1 Reply Last reply
                                        0
                                        • UhulaU Uhula

                                          Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                                          • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                                          • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                                          • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                                          • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                                          • alle material design Farben werden nun namentlich unterstützt
                                          • Anpassung der MD_Demo und MD_Simple Projekte
                                          • Anpassung der Dokumentation
                                          • ...

                                          Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                                          Schöne Adventszeit noch!

                                          S Offline
                                          S Offline
                                          Snapergy
                                          wrote on last edited by
                                          #409

                                          @Uhula
                                          vielleicht ist ja auch der Discrete Slider in vertikaler Form dabei ;)

                                          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

                                          578

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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