Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.8k Aufrufe 68 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • T Offline
    T Offline
    tempestas
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      0
      • C Offline
        C Offline
        cuuira
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • 0 Offline
          0 Offline
          0018
          schrieb am zuletzt editiert von
          #191

          @Uhula:

          font-family: Roboto, Arial !important; `

          Danke, das hat geholfen!

          Mfg
          0018

          1 Antwort Letzte Antwort
          0
          • C Offline
            C Offline
            cuuira
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            0
            • UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              1
              • 0 Offline
                0 Offline
                0018
                schrieb am zuletzt editiert von
                #194

                Hallo,

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

                Mfg
                0018

                1 Antwort Letzte Antwort
                0
                • C Offline
                  C Offline
                  Crockers
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • S Offline
                    S Offline
                    Sven2013
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • C Offline
                      C Offline
                      Crockers
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • ? Offline
                        ? Offline
                        Ein ehemaliger Benutzer
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        0
                        • C Offline
                          C Offline
                          Crockers
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          0
                          • C Offline
                            C Offline
                            cuuira
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • 0 Offline
                              0 Offline
                              0018
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              0
                              • R Offline
                                R Offline
                                reini
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                0
                                • M Offline
                                  M Offline
                                  Mac
                                  schrieb am zuletzt editiert von
                                  #203

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • R Offline
                                    R Offline
                                    reini
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    0
                                    • T Offline
                                      T Offline
                                      tempestas
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      0
                                      • T Offline
                                        T Offline
                                        tempestas
                                        schrieb am zuletzt editiert von
                                        #206

                                        Da man die Sekunden wohl nicht ausschalten kann im Widget habe ich mir jetzt so beholfen, die Schrift und die Bottom-Border unsichtbar zu machen und dann das Ganze als unsichtbares Overlay über meine Zeitanszeige zu legen, die sich dann wiederum aus den Stunden und Minuten, die man mit dem Widget einstellt, speist.

                                        Etwas von Hinten durchs Auge in die Brust, aber funktioniert!

                                        <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 Antwort Letzte Antwort
                                        0
                                        • R Offline
                                          R Offline
                                          reini
                                          schrieb am zuletzt editiert von
                                          #207

                                          Hallo Leute,

                                          habe ich mit dem responsiven Design auch eine Chance diverse reingesetzte Widgets im Bild richtig positioniert zu bekommen? Bild wird auf die Breite angepasst, die Widgets stehen aber dann zum Teil irgendwo herum..
                                          3845_img_3502.png

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          758

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe