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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.3k

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

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.5k 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.
  • blauholstenB Offline
    blauholstenB Offline
    blauholsten
    Developer
    wrote on last edited by
    #186

    @0018:

    Hallo,

    ich spiele gerade ein wenig mit dem MD herum und hab ein kleines Problem mit der Schrift. Habe mir das aktuell MD_Demo importiert.

    Habe mir das mdui-label -basic -HTML widget exportiert und in meiner aktuellen VIS eingefügt.

    .

    Gibt es noch eine Einstellung oder warum sieht es so unterscheidlich aus? `
    Benutzt du denn auch in deinen Views die css Anweisungen aus dem Demo Projekt?

    Entwickler vom: - Viessman Adapter
    - Alarm Adapter

    1 Reply Last reply
    0
    • 0 Offline
      0 Offline
      0018
      wrote on last edited by
      #187

      @blauholsten:

      Benutzt du denn auch in deinen Views die css Anweisungen aus dem Demo Projekt? `

      Ja habe unter:

      Eigenschaften– CSS -- Projekt sowie unter Skripte

      die Sachen aus der Demo kopiert und eingefügt.

      1620_css.png

      Mfg
      0018

      1 Reply Last reply
      0
      • T Offline
        T Offline
        tempestas
        wrote on last edited by
        #188

        ich rate mal:

        muss eventuell ein Schriftsatz (Adapter) installiert sein?

        <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

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

          @0018:

          Gibt es noch eine Einstellung oder warum sieht es so unterscheidlich aus? `
          Nein, keine weitere Einstellung. Im vis CSS | Projekt, wo du die MD CSS hinein kopiert hast, wird die Schriftart am Anfang festgelegt:

          ****.vis-view,

          .vis-view .ui-widget {

          font-family: Roboto, Arial;

          font-size: 16px !important;

          color:#ffffff;

          }****

          Wenn das im gleichen Browser mal geht und mal nicht, vermute ich, dass irgendeine andere CSS-Anweisung "stärker" ist und die font-family verändert. Das kann sogar Widget-abhängig sein. Wenn du hier keine Ursache findest, versuch mal die Anweisung in

          ****.vis-view,

          .vis-view .ui-widget {

          font-family: Roboto, Arial !important;

          font-size: 16px !important;

          color:#ffffff;

          }****

          zu ändern.

          Ein besonderer Adapter muss nicht installiert sein. Die Roboto Schriftart scheint auch korrekt vorhanden zu sein, sonst würde sie auch im MD_Demo nicht korrekt angezeigt werden.

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

          1 Reply Last reply
          0
          • C Offline
            C Offline
            cuuira
            wrote on last edited by
            #190

            Nabend

            Ich habe leider keinen Plan von diesem ganzen CSS Sachen. Deswegen brauche ich mal eine Hilfe…. ich jetzt so einige Sachen in meinem Projekt angepasst und würde gerne bei einer bestimmten Auflösung die Namen kürzen. Dazu gibt es auch in der Anleitung eine Beschreibung. Leider weiß ich damit nichts anzufangen.

            > Wenn man hier Rücksicht auf ein responsive Design nehmen möchte, kann man den Text so gestalten, dass er bei Bildschirmauflösungen von max. 480px und mehr als 480px unterschiedlich dargestellt wird. Hierzu sind die CSS Klassen mdui-show480 und mdui-hide480 zu nutzen. Bsp: EGErdgeschoß

            Gruß Cuuira

            jpgorganizerJ 1 Reply Last reply
            0
            • 0 Offline
              0 Offline
              0018
              wrote on last edited by
              #191

              @Uhula:

              font-family: Roboto, Arial !important; `

              Danke, das hat geholfen!

              Mfg
              0018

              1 Reply Last reply
              0
              • C Offline
                C Offline
                cuuira
                wrote on last edited by
                #192

                Nabend….

                Habe jetzt mal ein bißchen angepasst und eingefügt.... kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? Habe die Quelle an Hand von dem "LOCAL" angepasst, aber sobald eine neue Quelle ins Spiel kommt, ist alles verschoben.

                Gruß

                cuuira
                4970_bildschirmfoto_2018-01-14_um_19.25.18.png
                4970_bildschirmfoto_2018-01-14_um_19.26.36.png

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

                  @cuuira:

                  kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
                  Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

                  • left: an den linken Rand des Tile, z.B. 13

                  • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

                  • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert)

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

                  1 Reply Last reply
                  1
                  • 0 Offline
                    0 Offline
                    0018
                    wrote on last edited by
                    #194

                    Hallo,

                    wie kann ich am besten das "yr.0.forecast.html" in das MD mit einbinden?

                    Mfg
                    0018

                    1 Reply Last reply
                    0
                    • C Offline
                      C Offline
                      Crockers
                      wrote on last edited by
                      #195

                      Hallo,

                      ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                      Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                      Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                      Wer kann mir auf die sprünge helfen?

                      Vielen Dank :)

                      1 Reply Last reply
                      0
                      • S Offline
                        S Offline
                        Sven2013
                        wrote on last edited by
                        #196

                        @Crockers:

                        Hallo,

                        ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                        Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                        Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                        Wer kann mir auf die sprünge helfen?

                        Vielen Dank :) `

                        Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                        Gruß Sven

                        Gesendet von iPhone mit Tapatalk

                        1 Reply Last reply
                        0
                        • C Offline
                          C Offline
                          Crockers
                          wrote on last edited by
                          #197

                          @Sven2013:

                          @Crockers:

                          Hallo,

                          ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                          Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                          Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                          Wer kann mir auf die sprünge helfen?

                          Vielen Dank :) `

                          Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                          Gruß Sven

                          Gesendet von iPhone mit Tapatalk `

                          Widgetnummer? :?:
                          5056_forum.png

                          1 Reply Last reply
                          0
                          • ? Offline
                            ? Offline
                            A Former User
                            wrote on last edited by
                            #198

                            Die Widgetnummer in deinem Screenshot ist w00012.

                            Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                            Dort steht noch eine falsche Nummer (w00312).

                            1 Reply Last reply
                            0
                            • C Offline
                              C Offline
                              Crockers
                              wrote on last edited by
                              #199

                              @nisio:

                              Die Widgetnummer in deinem Screenshot ist w00012.

                              Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                              Dort steht noch eine falsche Nummer (w00312). `

                              Kleine Ursache, große Wirkung. Perfekt. es funktioniert. Vielen Dank.

                              1 Reply Last reply
                              0
                              • C Offline
                                C Offline
                                cuuira
                                wrote on last edited by
                                #200

                                @Uhula:

                                @cuuira:

                                kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
                                Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

                                • left: an den linken Rand des Tile, z.B. 13

                                • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

                                • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert) `

                                Sorry für die fehlenden Angaben… aber du kannst ja zum Glück Gedanken lesen!!! :D

                                Deine Antwort hat natürlich geholfen.... THX

                                1 Reply Last reply
                                0
                                • 0 Offline
                                  0 Offline
                                  0018
                                  wrote on last edited by
                                  #201

                                  Hallo zusammen,

                                  ich habe ein Problem mit der Auflösung auf meinen Tab mit Android7.

                                  Ich habe das MD Design auf 1280x800 ausgelegt.

                                  Auf dem Tab wird es im Fully Kiosk Browser aber nur vergrößert dargestellt und ich kann nicht weiter rein zoomen, so das ich Scroll-Effekte habe, die ich nicht möchte. Bekomme also nur eine geringere Auflösung angezeigt.

                                  Kann mir jemand sagen woran das liegt?

                                  Mfg
                                  0018

                                  1 Reply Last reply
                                  0
                                  • R Offline
                                    R Offline
                                    reini
                                    wrote on last edited by
                                    #202

                                    Hallo Leute, wie bekomm ich denn die schönen Balken hin?! (wie von Ruhr70 gezeigt)

                                    Ist dies das Bar-Widget bzw. wie bekomm ich den Farbverlauf?

                                    thx

                                    edit

                                    erledigt, habs nach einiger Zeit hinbekommen!!
                                    3845_2018-01-23_12_37_21-2017-12-10_simple_md.png__png-grafik__2936___956_pixel_.png

                                    1 Reply Last reply
                                    0
                                    • M Offline
                                      M Offline
                                      Mac
                                      wrote on last edited by
                                      #203

                                      Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke.

                                      1 Reply Last reply
                                      0
                                      • R Offline
                                        R Offline
                                        reini
                                        wrote on last edited by
                                        #204

                                        2 Fragen bitte, wie bekomm ich denn das Bild FullScreen/zentriert? bzw. die Navigationsleiste (EG, OG usw.) schneidet es mir im Hochformat ab? (müsste die nicht wenn responsiv dann mehrzeilig werden ?!)

                                        @Mac:

                                        Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke. `

                                        als Widget nimmst du "Bar" , die Einstellungen bei Allgemein & Hintergrund machen lt. Screens

                                        Background: linear-gradient(to right,red,yellow,green)
                                        3845_unbenannt.png
                                        3845_unbenannt2.png
                                        3845_unbenannt3.png
                                        3845_img_3483.jpg

                                        1 Reply Last reply
                                        0
                                        • T Offline
                                          T Offline
                                          tempestas
                                          wrote on last edited by
                                          #205

                                          Hall uhula,

                                          eine Frage habe ich:

                                          ich kopiere mir Teile des MD (komplette Abschnitte, also z.B. alles, was unter /* INPUT */ steht ).

                                          Trotzdem sehen bei mir z.B. die jqui input Widgets nach Zuweisung der CSS Klasse ganz anders aus, als in deinen Vorlagen? Habe ich da was falsch gemacht, muss man doch einfach alles rüberkopieren?

                                          Danke vorab!

                                          Nachtrag: ok, war ne blöde Frage: alles rüberkopieren hilft natürlich. Da habe ich die Abhängigkeiten der einzelnen Abschnitte wohl noch nicht verstanden.

                                          Hach Mensch, es gibt aber auch viel zu lernen…

                                          Edit 2:

                                          ok, eine Frage habe ich nun doch. Wie bekomme ich biem jqui date time input nun die Sekunden weg? die werden immer angezeigt, reagieren nicht auf das "zeige keine Sekunden" (logisch, wird ja auch alles überschrieben).

                                          was müsste ich tun, um bei spezifischen jqui date time inputs den Unterstrich zu entfernen?

                                          DANKE!

                                          <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

                                          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

                                          309

                                          Online

                                          32.6k

                                          Users

                                          82.3k

                                          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