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] MDCSS v2: Material Design CSS Version 2

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.0k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 182.0k Views 77 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.
  • H heinzie

    Hallo,

    bei mir fehlen leider die Farbkreise unter\Einstellungen
    Muss man dafür ggf. noch etwas installieren?

    a4b22e5f-eb39-4472-aa65-718a925762e1-grafik.png

    D Offline
    D Offline
    der-eine
    wrote on last edited by
    #561

    @heinzie nein, aktuelles Skript im Projekt Reiter und die aktuelle VIS von Uhula. Läuft sonst out of the Box.

    H 1 Reply Last reply
    0
    • D der-eine

      @heinzie nein, aktuelles Skript im Projekt Reiter und die aktuelle VIS von Uhula. Läuft sonst out of the Box.

      H Offline
      H Offline
      heinzie
      wrote on last edited by
      #562

      @der-eine Habe mir sicherheitshalber noch einmal das Beispeilprojekt MD_Simple gealden.
      Keine Änderungen (nur Pfade angepaßt) , gleicher Fehler. In der script Datei muss ich doch nichts ändern, oder?

      D 1 Reply Last reply
      0
      • H heinzie

        @der-eine Habe mir sicherheitshalber noch einmal das Beispeilprojekt MD_Simple gealden.
        Keine Änderungen (nur Pfade angepaßt) , gleicher Fehler. In der script Datei muss ich doch nichts ändern, oder?

        D Offline
        D Offline
        der-eine
        wrote on last edited by
        #563

        @heinzie Nein nicht das ich wüsste nur die Pfade zu den Icons.
        Wie sieht es dann bei Dir aus? Mach mal bitte ein Screenshot.

        H 1 Reply Last reply
        0
        • D der-eine

          @heinzie Nein nicht das ich wüsste nur die Pfade zu den Icons.
          Wie sieht es dann bei Dir aus? Mach mal bitte ein Screenshot.

          H Offline
          H Offline
          heinzie
          wrote on last edited by
          #564

          @der-eine sieht so aus:
          be6620a3-187e-4d3d-887a-786fb18a8a16-grafik.png

          70e87b73-ff83-453f-9268-708cd57faf0a-grafik.png

          D 1 Reply Last reply
          0
          • H heinzie

            @der-eine sieht so aus:
            be6620a3-187e-4d3d-887a-786fb18a8a16-grafik.png

            70e87b73-ff83-453f-9268-708cd57faf0a-grafik.png

            D Offline
            D Offline
            der-eine
            wrote on last edited by
            #565

            @heinzie schau mal ob Du den Adapter vis-colorpicker installiert hast und wenn nicht installier den mal.

            H 1 Reply Last reply
            0
            • D der-eine

              @heinzie schau mal ob Du den Adapter vis-colorpicker installiert hast und wenn nicht installier den mal.

              H Offline
              H Offline
              heinzie
              wrote on last edited by
              #566

              @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

              @heinzie schau mal ob Du den Adapter vis-colorpicker installiert hast und wenn nicht installier den mal.

              Vielen Dank, dass war der Fehler, muss man nur wissen

              D 1 Reply Last reply
              0
              • H heinzie

                @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                @heinzie schau mal ob Du den Adapter vis-colorpicker installiert hast und wenn nicht installier den mal.

                Vielen Dank, dass war der Fehler, muss man nur wissen

                D Offline
                D Offline
                der-eine
                wrote on last edited by
                #567

                @heinzie super dann viel Spaß damit.

                1 Reply Last reply
                0
                • UhulaU Uhula
                  Um ein Feedback zu erhalten wäre es schön, wenn jeder, der das MDCSS v2 nutzt, den 1.Beitrag des Themas positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!

                  Da das Ursprungsthema MD CSS v1 mit über 600 Antworten schon recht voll ist, starte ich hier zur Version 2 ein neues Thema.

                  Beim Material Design CSS v2 handelt es sich nicht um einen Adapter mit eigenen Widgets, stattdessen erhalten die Standard-Widgets basic und jqui nur "neue Kleider" und erweiterte Funktionen. Heißt, sie stellen sich im Material Design Style dar.

                  Bilder sagen mehr, also:
                  1b41efac-859e-48db-bb8b-fe4964a827b6-image.png 76ff28ed-1e6f-40ba-8865-6b1a03f5ee87-image.png

                  Einen Demo-Film gibt es hier: Video (MP4-Datei, ca. 64 MB, dort downloaden)

                  Ein Demo-Projekt für den Import in ioBroker.vis hier: MD_Demo

                  Ein Simple-Projekt als Basis für eigene Projekte hier: MD_Simple

                  Das Handbuch wir noch von der v1 auf v2 überarbeitet.

                  Das GitHub-Projekt gibt es hier GitHub.

                  Links zu weiteren Beiträgen/Vorlagen hier im Forum zum MD CSS v2:

                  • Forenthemensuche nach "MDCSS v2"
                  • [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen
                  • [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen
                  • [Vorlage] MDCSS v2: tr-064/devices-Adapter in vis anzeigen
                  • [Vorlage] MDCSS v2: Homatic-Log in vis anzeigen
                  • [Vorlage] MDCSS v2: ical Kalendar in vis anzeigen
                  • [Vorlage] MDCSS v2: Adapter-Instanzen in vis anzeigen
                  • [Vorlage] MDCSS v2: Backitup Log in vis anzeigen

                  Hinweis: Dieses Projekt hat nichts mit den tollen Material Design Widgets von @Scrounger zu tun. Dabei handelt es sich um einen eigenen vis-Adapter, beim Material Design CSS nur um CSS und Skriptanweisungen, welche direkt im Projekt verwendet werden.

                  M Offline
                  M Offline
                  Mike Hellracer
                  wrote on last edited by
                  #568

                  @Uhula
                  Hi, ich habe die Scripts für die Logs und View importiert.
                  Ical, ioBroker, tr-064, ping sind Ok.
                  Bei Adapter und BackitUp stimmt die Ansicht der List und Tabelle nicht.
                  Es wird alles angezeigt und die Filter funktionieren auch.
                  Aber die Ansicht der Spalten stimmt bei mir nicht . Die erste Zeile mit den Gesamtwerten ist noch OK (Icon und Zusammenfassung) Ab der nächsten Zeile sind Icon und Zusammenfassung weit auseinander.
                  list.PNG

                  Dominik F.D 1 Reply Last reply
                  0
                  • M Mike Hellracer

                    @Uhula
                    Hi, ich habe die Scripts für die Logs und View importiert.
                    Ical, ioBroker, tr-064, ping sind Ok.
                    Bei Adapter und BackitUp stimmt die Ansicht der List und Tabelle nicht.
                    Es wird alles angezeigt und die Filter funktionieren auch.
                    Aber die Ansicht der Spalten stimmt bei mir nicht . Die erste Zeile mit den Gesamtwerten ist noch OK (Icon und Zusammenfassung) Ab der nächsten Zeile sind Icon und Zusammenfassung weit auseinander.
                    list.PNG

                    Dominik F.D Offline
                    Dominik F.D Offline
                    Dominik F.
                    wrote on last edited by
                    #569

                    @Mike-Hellracer

                    Hast du zufällig in Zeile 517 check_circle_outlined? wenn ja, versuch mal check_circle

                    M 1 Reply Last reply
                    0
                    • Dominik F.D Dominik F.

                      @Mike-Hellracer

                      Hast du zufällig in Zeile 517 check_circle_outlined? wenn ja, versuch mal check_circle

                      M Offline
                      M Offline
                      Mike Hellracer
                      wrote on last edited by
                      #570

                      @Dominik-F
                      Danke das war es!
                      Aber war eine andere Zeile.

                      A 1 Reply Last reply
                      0
                      • M Mike Hellracer

                        @Dominik-F
                        Danke das war es!
                        Aber war eine andere Zeile.

                        A Offline
                        A Offline
                        ak1
                        wrote on last edited by
                        #571

                        Wie kann ich die Farbe der Kopfzeile eine Card im Vollbild ändern.
                        In den Bildern seht ihr die Card zum BackItUp Log. Der Hintergrund des Kopfbereichs ist in einem helleren grau gehalten, wie bei allen meinen Karten mit dem von mir bevorzugten Farbschema.
                        Wenn ich die Karte dann allerdings in den Vollbildmodus bringe, entspricht die Hintergrundfarbe des Kopfbereichs der Hintergrundfarbe der gesamten Card.

                        Kann ich dies irgendwie ändern?

                        Danke und Gruß
                        ak1IMG_0779.png IMG_0778.png

                        harrymH UhulaU 2 Replies Last reply
                        0
                        • A ak1

                          Wie kann ich die Farbe der Kopfzeile eine Card im Vollbild ändern.
                          In den Bildern seht ihr die Card zum BackItUp Log. Der Hintergrund des Kopfbereichs ist in einem helleren grau gehalten, wie bei allen meinen Karten mit dem von mir bevorzugten Farbschema.
                          Wenn ich die Karte dann allerdings in den Vollbildmodus bringe, entspricht die Hintergrundfarbe des Kopfbereichs der Hintergrundfarbe der gesamten Card.

                          Kann ich dies irgendwie ändern?

                          Danke und Gruß
                          ak1IMG_0779.png IMG_0778.png

                          harrymH Offline
                          harrymH Offline
                          harrym
                          wrote on last edited by
                          #572

                          @ak1 versuchs mal mit card-title-bg

                          ASRock FM2A88X-ITX+ mit 32GB RAM, 128GB SSD mit Proxmox, 3x1 TB SSD als RAID mit CT und VMs.

                          A 1 Reply Last reply
                          0
                          • harrymH harrym

                            @ak1 versuchs mal mit card-title-bg

                            A Offline
                            A Offline
                            ak1
                            wrote on last edited by
                            #573

                            @harrym sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                            @ak1 versuchs mal mit card-title-bg

                            Sorry, kannst Du kurz erklären, wie Du das meinst?

                            Denkst Du vielleicht an sowas?

                            mdui-title-green-bg
                            

                            Das funktioniert bei der normalen Karte. Sobald ich die Karte jedoch in den Vollbildmodus schalte, weicht die gewählte Farbe der Hintergrundfarbe.

                            1 Reply Last reply
                            0
                            • A ak1

                              Wie kann ich die Farbe der Kopfzeile eine Card im Vollbild ändern.
                              In den Bildern seht ihr die Card zum BackItUp Log. Der Hintergrund des Kopfbereichs ist in einem helleren grau gehalten, wie bei allen meinen Karten mit dem von mir bevorzugten Farbschema.
                              Wenn ich die Karte dann allerdings in den Vollbildmodus bringe, entspricht die Hintergrundfarbe des Kopfbereichs der Hintergrundfarbe der gesamten Card.

                              Kann ich dies irgendwie ändern?

                              Danke und Gruß
                              ak1IMG_0779.png IMG_0778.png

                              UhulaU Offline
                              UhulaU Offline
                              Uhula
                              wrote on last edited by
                              #574

                              @ak1 Nö, leider nicht. Das habe ich nicht vorgesehen, weil im Vollbild-Modus ja keine Notwendigkeit besteht mehrere Cards voneinander durch ihre Kopfzeilen unterscheiden zu müssen.

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

                              A 1 Reply Last reply
                              1
                              • UhulaU Uhula

                                @ak1 Nö, leider nicht. Das habe ich nicht vorgesehen, weil im Vollbild-Modus ja keine Notwendigkeit besteht mehrere Cards voneinander durch ihre Kopfzeilen unterscheiden zu müssen.

                                A Offline
                                A Offline
                                ak1
                                wrote on last edited by
                                #575

                                @Uhula
                                Danke für die Rückmeldung. Kein Problem.
                                Ich persönlich würde es für stimmiger und konsistenter halten, wenn die Farbgebung genauso wäre, wie bei einer Card im normalen Modus. Für mich ist der Vollbild-Modus weniger ein echtes Vollbild für den eigentlichen Inhalt der Card. Vielmehr sehe ich es als maximale Vergrößerung der Card, wobei z.B. Effekte wie mdui-card-raised und auch die Kopfzeile mit allen Bedienelementen erhalten bleiben. Eine optische Trennung der Card vom (am Rand sichtbaren Hintergrund - zumindest bei "raised") und eine optische Trennung des Kopfes mit Titelzeile und Bedienelementen vom Rest der Card, wäre in meinen Augen schicker.

                                Aber wie gesagt, kein echtes Problem und vielleicht auch einfach eine Geschmacksache.

                                A 1 Reply Last reply
                                0
                                • A ak1

                                  @Uhula
                                  Danke für die Rückmeldung. Kein Problem.
                                  Ich persönlich würde es für stimmiger und konsistenter halten, wenn die Farbgebung genauso wäre, wie bei einer Card im normalen Modus. Für mich ist der Vollbild-Modus weniger ein echtes Vollbild für den eigentlichen Inhalt der Card. Vielmehr sehe ich es als maximale Vergrößerung der Card, wobei z.B. Effekte wie mdui-card-raised und auch die Kopfzeile mit allen Bedienelementen erhalten bleiben. Eine optische Trennung der Card vom (am Rand sichtbaren Hintergrund - zumindest bei "raised") und eine optische Trennung des Kopfes mit Titelzeile und Bedienelementen vom Rest der Card, wäre in meinen Augen schicker.

                                  Aber wie gesagt, kein echtes Problem und vielleicht auch einfach eine Geschmacksache.

                                  A Offline
                                  A Offline
                                  ak1
                                  wrote on last edited by
                                  #576

                                  Ich muss nochmal eine Frage stellen:
                                  Ich habe hier eine Card ("Timer"), welche seltsam reagiert, wenn ich sie mit dem Expand Icon verkleinere.
                                  Man sieht das im zweiten Bild. Das unterste Widget der Card hängt dann nämlich in der Kopfzeile. Dieses Widget ist eine jqui - Select Value List und hat die CSS Klasse mdui-select.

                                  Hat jemand eine Idee, was hier falsch läuft?
                                  IMG_0229.png
                                  IMG_0230.png

                                  D 1 Reply Last reply
                                  0
                                  • A ak1

                                    Ich muss nochmal eine Frage stellen:
                                    Ich habe hier eine Card ("Timer"), welche seltsam reagiert, wenn ich sie mit dem Expand Icon verkleinere.
                                    Man sieht das im zweiten Bild. Das unterste Widget der Card hängt dann nämlich in der Kopfzeile. Dieses Widget ist eine jqui - Select Value List und hat die CSS Klasse mdui-select.

                                    Hat jemand eine Idee, was hier falsch läuft?
                                    IMG_0229.png
                                    IMG_0230.png

                                    D Offline
                                    D Offline
                                    der-eine
                                    wrote on last edited by
                                    #577

                                    @ak1 kann es sein, dass der Inhalt der Card über 80px ist?

                                    A 1 Reply Last reply
                                    0
                                    • D der-eine

                                      @ak1 kann es sein, dass der Inhalt der Card über 80px ist?

                                      A Offline
                                      A Offline
                                      ak1
                                      wrote on last edited by
                                      #578

                                      @der-eine Die Card hat eine Höhe von 4 (bis max. 6 Rows). Das Widget am unteren Rand hatte eine vertikale/Top Positionierung mittels:

                                      calc(100% - 48px)
                                      

                                      Vielleicht war das ein Problem. Ich habe das Widget nun vor der Tabelle positioniert. Und jetzt funktioniert alles.

                                      Danke für Deine Rückmeldung!

                                      1 Reply Last reply
                                      1
                                      • UhulaU Uhula
                                        Um ein Feedback zu erhalten wäre es schön, wenn jeder, der das MDCSS v2 nutzt, den 1.Beitrag des Themas positiv bewertet (Pfeil nach oben oder unten ;-) ). Ich kann dann auch abschätzen, ob sich die weitere Pflege lohnt. Thx!

                                        Da das Ursprungsthema MD CSS v1 mit über 600 Antworten schon recht voll ist, starte ich hier zur Version 2 ein neues Thema.

                                        Beim Material Design CSS v2 handelt es sich nicht um einen Adapter mit eigenen Widgets, stattdessen erhalten die Standard-Widgets basic und jqui nur "neue Kleider" und erweiterte Funktionen. Heißt, sie stellen sich im Material Design Style dar.

                                        Bilder sagen mehr, also:
                                        1b41efac-859e-48db-bb8b-fe4964a827b6-image.png 76ff28ed-1e6f-40ba-8865-6b1a03f5ee87-image.png

                                        Einen Demo-Film gibt es hier: Video (MP4-Datei, ca. 64 MB, dort downloaden)

                                        Ein Demo-Projekt für den Import in ioBroker.vis hier: MD_Demo

                                        Ein Simple-Projekt als Basis für eigene Projekte hier: MD_Simple

                                        Das Handbuch wir noch von der v1 auf v2 überarbeitet.

                                        Das GitHub-Projekt gibt es hier GitHub.

                                        Links zu weiteren Beiträgen/Vorlagen hier im Forum zum MD CSS v2:

                                        • Forenthemensuche nach "MDCSS v2"
                                        • [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen
                                        • [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen
                                        • [Vorlage] MDCSS v2: tr-064/devices-Adapter in vis anzeigen
                                        • [Vorlage] MDCSS v2: Homatic-Log in vis anzeigen
                                        • [Vorlage] MDCSS v2: ical Kalendar in vis anzeigen
                                        • [Vorlage] MDCSS v2: Adapter-Instanzen in vis anzeigen
                                        • [Vorlage] MDCSS v2: Backitup Log in vis anzeigen

                                        Hinweis: Dieses Projekt hat nichts mit den tollen Material Design Widgets von @Scrounger zu tun. Dabei handelt es sich um einen eigenen vis-Adapter, beim Material Design CSS nur um CSS und Skriptanweisungen, welche direkt im Projekt verwendet werden.

                                        M Offline
                                        M Offline
                                        Mike Hellracer
                                        wrote on last edited by Mike Hellracer
                                        #579

                                        @Uhula
                                        Hi, habe das Projekt 1:1 installiert aber ich bekomme einige Material Icons nicht angezeigt.
                                        https://material.io/resources/icons/?icon=coronavirus&style=baseline
                                        z.B. water_damage, contrsuction, coronavirus
                                        aber es sind noch einige andere.
                                        Aber z.B. funktionieren cake, home, help und info
                                        hier noch meine Einträge aus der CSS
                                        für die Material-Icons

                                        @font-face {
                                         font-family: 'Material Icons';
                                         font-style: normal;
                                         font-weight: 400;
                                         src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.eot); /* For IE6-8 */
                                         src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.woff) format('woff'),
                                              url(/vis.0/MD_Mike/images/MaterialIcons-Regular.ttf) format('truetype');
                                              
                                        }
                                        


                                        und für die MaterialDesign-Icons

                                        @font-face {
                                         font-family: "Material Design Icons";
                                         src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.eot?v=5.5.55");
                                         src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.woff?v=5.5.55") format("woff"), 
                                         url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.ttf?v=5.5.55") format("truetype");
                                         font-weight: normal;
                                         font-style: normal;
                                        }
                                        

                                        C 1 Reply Last reply
                                        0
                                        • M Mike Hellracer

                                          @Uhula
                                          Hi, habe das Projekt 1:1 installiert aber ich bekomme einige Material Icons nicht angezeigt.
                                          https://material.io/resources/icons/?icon=coronavirus&style=baseline
                                          z.B. water_damage, contrsuction, coronavirus
                                          aber es sind noch einige andere.
                                          Aber z.B. funktionieren cake, home, help und info
                                          hier noch meine Einträge aus der CSS
                                          für die Material-Icons

                                          @font-face {
                                           font-family: 'Material Icons';
                                           font-style: normal;
                                           font-weight: 400;
                                           src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.eot); /* For IE6-8 */
                                           src: url(/vis.0/MD_Mike/images/MaterialIcons-Regular.woff) format('woff'),
                                                url(/vis.0/MD_Mike/images/MaterialIcons-Regular.ttf) format('truetype');
                                                
                                          }
                                          


                                          und für die MaterialDesign-Icons

                                          @font-face {
                                           font-family: "Material Design Icons";
                                           src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.eot?v=5.5.55");
                                           src: url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.woff?v=5.5.55") format("woff"), 
                                           url("/vis.0/Mike_Prod/images/materialdesignicons-webfont.ttf?v=5.5.55") format("truetype");
                                           font-weight: normal;
                                           font-style: normal;
                                          }
                                          

                                          C Offline
                                          C Offline
                                          Chrunchy
                                          wrote on last edited by
                                          #580

                                          @Mike-Hellracer ich vermute mal, dass @Uhula nicht jedesmal die iconfont-dateien aktualisiert.
                                          Du kannst sie hier herunterladen. Soweit ich das festgestellt habe, ist die .eot-Datei nur noch bis Version 3.0.2 vorhanden.

                                          Pakage herunterladen und die Dateien aus dem Verzeichnis iconfont bzw. font in dein VIS-Verzeichnis kopieren.

                                          Gruß Chrunchy

                                          Z UhulaU 2 Replies 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

                                          809

                                          Online

                                          32.5k

                                          Users

                                          81.6k

                                          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