Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Off Topic
  4. Grafana
  5. Hintergrund von Grafana Dashboard in VIS entfernen

NEWS

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

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

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

Hintergrund von Grafana Dashboard in VIS entfernen

Hintergrund von Grafana Dashboard in VIS entfernen

Scheduled Pinned Locked Moved Grafana
vis
148 Posts 33 Posters 32.5k Views 40 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.
  • FeuersturmF Feuersturm

    @Almixx Hast du mal versucht das Plugin mit sudo bzw. als root user zu installieren? Ich hab nur grundlegende Linuxkenntnisse, aber die Fehlermeldung sagt ja, dass Schreibrechte fehlen.

    Ansonsten hab ich den gleichen Befehl für die Installation verwendet, wie er auch in der Anleitung von Boom stetht

    grafana-cli plugins install yesoreyeram-boomtheme-panel
    
    AlmixxA Offline
    AlmixxA Offline
    Almixx
    wrote on last edited by
    #9

    @Feuersturm
    habe auch keine Linuxkenntnisse, aber sudo war das Zauberwort 🙂

    1 Reply Last reply
    0
    • FeuersturmF Feuersturm

      @Almixx Hast du mal versucht das Plugin mit sudo bzw. als root user zu installieren? Ich hab nur grundlegende Linuxkenntnisse, aber die Fehlermeldung sagt ja, dass Schreibrechte fehlen.

      Ansonsten hab ich den gleichen Befehl für die Installation verwendet, wie er auch in der Anleitung von Boom stetht

      grafana-cli plugins install yesoreyeram-boomtheme-panel
      
      AlmixxA Offline
      AlmixxA Offline
      Almixx
      wrote on last edited by
      #10

      @Feuersturm
      das transparente klappt bei mir noch nicht so richtig, es wird zwar einiges weggemacht, aber das Panel hat immernoch einen schwarzen Background. Habe deine CSS anweisungen eingetragen...

      FeuersturmF 1 Reply Last reply
      0
      • AlmixxA Almixx

        @Feuersturm
        das transparente klappt bei mir noch nicht so richtig, es wird zwar einiges weggemacht, aber das Panel hat immernoch einen schwarzen Background. Habe deine CSS anweisungen eingetragen...

        FeuersturmF Online
        FeuersturmF Online
        Feuersturm
        wrote on last edited by
        #11

        @Almixx Hi, hast du nur ein einzelnes Panel oder ein ganzes Dashboard in VIS eingebunden?
        Zeig bitte einmal einen Screenshot vom aktuellen Ergebnis und deinen CSS Code.

        AlmixxA 1 Reply Last reply
        0
        • FeuersturmF Feuersturm

          @Almixx Hi, hast du nur ein einzelnes Panel oder ein ganzes Dashboard in VIS eingebunden?
          Zeig bitte einmal einen Screenshot vom aktuellen Ergebnis und deinen CSS Code.

          AlmixxA Offline
          AlmixxA Offline
          Almixx
          wrote on last edited by
          #12

          @Feuersturm
          ich hab nur das panel mit iframe eingebettet...
          grafana.png
          grafana2.png

          FeuersturmF 1 Reply Last reply
          0
          • AlmixxA Almixx

            @Feuersturm
            ich hab nur das panel mit iframe eingebettet...
            grafana.png
            grafana2.png

            FeuersturmF Online
            FeuersturmF Online
            Feuersturm
            wrote on last edited by
            #13

            @Almixx Bei einzelnen Panels greift Bloom nicht. Kann dir heute abend schreiben was du dann machen musst.

            AlmixxA 1 Reply Last reply
            0
            • FeuersturmF Feuersturm

              @Almixx Bei einzelnen Panels greift Bloom nicht. Kann dir heute abend schreiben was du dann machen musst.

              AlmixxA Offline
              AlmixxA Offline
              Almixx
              wrote on last edited by
              #14

              @Feuersturm
              das wäre cool, danke..

              FeuersturmF 1 Reply Last reply
              0
              • AlmixxA Almixx

                @Feuersturm
                das wäre cool, danke..

                FeuersturmF Online
                FeuersturmF Online
                Feuersturm
                wrote on last edited by
                #15

                @Almixx Du musst diese Anleitung hier befolgen: https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4

                Meine mygrafana.css für die transparente Darstellung sieht aktuell so aus. Der relevant Teil ist der Abschnitt mit body.dashboard-solo, .panel-container, .main-view
                Ich bin selber noch etwas am experimentieren.

                @charset "UTF-8";
                
                body.dashboard-solo, .panel-container, .main-view{
                background-color: transparent;
                }
                
                .graph-legend-table th{
                color: white;
                }
                
                .view{
                   /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
                   /*background-color: #332939  !important;*/
                }
                
                .graph-legend-table .graph-legend-series:nth-child(2n) {
                    /*background: #FF2D49;*/
                }
                

                In Grafana nimmst du beim Share dann den Embeded Tab
                da3eab57-1c6d-4de4-9b4a-26b05479d466-grafik.png
                und fügst den markieren Link dann in ein "Basic html" Widget ein.

                Das Ergebnis sieht dann zum Beispiel so aus:
                788e5bc9-c73b-464b-9af2-e6cefd7a6b11-grafik.png

                AlmixxA N 2 Replies Last reply
                2
                • FeuersturmF Feuersturm

                  @Almixx Du musst diese Anleitung hier befolgen: https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4

                  Meine mygrafana.css für die transparente Darstellung sieht aktuell so aus. Der relevant Teil ist der Abschnitt mit body.dashboard-solo, .panel-container, .main-view
                  Ich bin selber noch etwas am experimentieren.

                  @charset "UTF-8";
                  
                  body.dashboard-solo, .panel-container, .main-view{
                  background-color: transparent;
                  }
                  
                  .graph-legend-table th{
                  color: white;
                  }
                  
                  .view{
                     /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
                     /*background-color: #332939  !important;*/
                  }
                  
                  .graph-legend-table .graph-legend-series:nth-child(2n) {
                      /*background: #FF2D49;*/
                  }
                  

                  In Grafana nimmst du beim Share dann den Embeded Tab
                  da3eab57-1c6d-4de4-9b4a-26b05479d466-grafik.png
                  und fügst den markieren Link dann in ein "Basic html" Widget ein.

                  Das Ergebnis sieht dann zum Beispiel so aus:
                  788e5bc9-c73b-464b-9af2-e6cefd7a6b11-grafik.png

                  AlmixxA Offline
                  AlmixxA Offline
                  Almixx
                  wrote on last edited by Almixx
                  #16

                  @Feuersturm
                  hat geklappt, dankeschön !

                  1 Reply Last reply
                  1
                  • FeuersturmF Feuersturm

                    @Almixx Du musst diese Anleitung hier befolgen: https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4

                    Meine mygrafana.css für die transparente Darstellung sieht aktuell so aus. Der relevant Teil ist der Abschnitt mit body.dashboard-solo, .panel-container, .main-view
                    Ich bin selber noch etwas am experimentieren.

                    @charset "UTF-8";
                    
                    body.dashboard-solo, .panel-container, .main-view{
                    background-color: transparent;
                    }
                    
                    .graph-legend-table th{
                    color: white;
                    }
                    
                    .view{
                       /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
                       /*background-color: #332939  !important;*/
                    }
                    
                    .graph-legend-table .graph-legend-series:nth-child(2n) {
                        /*background: #FF2D49;*/
                    }
                    

                    In Grafana nimmst du beim Share dann den Embeded Tab
                    da3eab57-1c6d-4de4-9b4a-26b05479d466-grafik.png
                    und fügst den markieren Link dann in ein "Basic html" Widget ein.

                    Das Ergebnis sieht dann zum Beispiel so aus:
                    788e5bc9-c73b-464b-9af2-e6cefd7a6b11-grafik.png

                    N Offline
                    N Offline
                    nousefor82
                    wrote on last edited by
                    #17

                    @Feuersturm

                    Servus, hast du herausgefunden, wie man die Schriftart ändern kann?

                    VG

                    FeuersturmF 1 Reply Last reply
                    0
                    • N nousefor82

                      @Feuersturm

                      Servus, hast du herausgefunden, wie man die Schriftart ändern kann?

                      VG

                      FeuersturmF Online
                      FeuersturmF Online
                      Feuersturm
                      wrote on last edited by
                      #18

                      @nousefor82 da kann ich dir leider nicht helfen.
                      @jkvarel Hast du da was auf Lager?

                      jkvarelJ 1 Reply Last reply
                      0
                      • JB_SullivanJ Offline
                        JB_SullivanJ Offline
                        JB_Sullivan
                        wrote on last edited by JB_Sullivan
                        #19

                        Guten Morgen zusammen,
                        gibt es einen Trick wie man das BOOM Theme aktiviert?

                        Wenn ich alles so eintrage wie oben und anschließend Theme als Default anklicke sollte das doch eigentlich übernommen werden oder?

                        2a47db67-da48-49a3-bd13-8e3d1aec8532-image.png

                        Erstelle ich hinterher mit z.B. Graph eine ein neues Panel und habe dieses als einziges im Dashboard, sollte das ganze dann hinterher doch im VIS auch transparent angezeigt werden - oder? Tut es aber leider nicht 😞 Wo liegt mein Fehler?

                        0c159ab3-f872-47de-9559-28aa263e2759-image.png

                        9cb5b168-3373-4468-9d44-af72806f2837-image.png

                        Also die Themes umschalten geht und da ändert sich in Grafana auch was - nur im VIS wird es immer noch nicht transparent angezeigt.

                        b3d2ce7e-eb69-4cc5-a26d-a48baaeb717b-image.png

                        362ee61b-4253-470f-ad7c-e2fd40bd2225-image.png

                        16fbc639-ff44-430a-89db-565f7d11342c-image.png

                        ioBroker auf Intel Core i3-5005U NUC und Windwos10 Pro

                        FeuersturmF Master67M 2 Replies Last reply
                        0
                        • JB_SullivanJ JB_Sullivan

                          Guten Morgen zusammen,
                          gibt es einen Trick wie man das BOOM Theme aktiviert?

                          Wenn ich alles so eintrage wie oben und anschließend Theme als Default anklicke sollte das doch eigentlich übernommen werden oder?

                          2a47db67-da48-49a3-bd13-8e3d1aec8532-image.png

                          Erstelle ich hinterher mit z.B. Graph eine ein neues Panel und habe dieses als einziges im Dashboard, sollte das ganze dann hinterher doch im VIS auch transparent angezeigt werden - oder? Tut es aber leider nicht 😞 Wo liegt mein Fehler?

                          0c159ab3-f872-47de-9559-28aa263e2759-image.png

                          9cb5b168-3373-4468-9d44-af72806f2837-image.png

                          Also die Themes umschalten geht und da ändert sich in Grafana auch was - nur im VIS wird es immer noch nicht transparent angezeigt.

                          b3d2ce7e-eb69-4cc5-a26d-a48baaeb717b-image.png

                          362ee61b-4253-470f-ad7c-e2fd40bd2225-image.png

                          16fbc639-ff44-430a-89db-565f7d11342c-image.png

                          FeuersturmF Online
                          FeuersturmF Online
                          Feuersturm
                          wrote on last edited by
                          #20

                          @JB_Sullivan Boom greift nur, wenn du das ganze Dasboard in einem iframe darstellst.

                          Soll nur ein Panel transparent sein musst du diese Anleitung befolgen: https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/6

                          JB_SullivanJ 1 Reply Last reply
                          0
                          • JB_SullivanJ JB_Sullivan

                            Guten Morgen zusammen,
                            gibt es einen Trick wie man das BOOM Theme aktiviert?

                            Wenn ich alles so eintrage wie oben und anschließend Theme als Default anklicke sollte das doch eigentlich übernommen werden oder?

                            2a47db67-da48-49a3-bd13-8e3d1aec8532-image.png

                            Erstelle ich hinterher mit z.B. Graph eine ein neues Panel und habe dieses als einziges im Dashboard, sollte das ganze dann hinterher doch im VIS auch transparent angezeigt werden - oder? Tut es aber leider nicht 😞 Wo liegt mein Fehler?

                            0c159ab3-f872-47de-9559-28aa263e2759-image.png

                            9cb5b168-3373-4468-9d44-af72806f2837-image.png

                            Also die Themes umschalten geht und da ändert sich in Grafana auch was - nur im VIS wird es immer noch nicht transparent angezeigt.

                            b3d2ce7e-eb69-4cc5-a26d-a48baaeb717b-image.png

                            362ee61b-4253-470f-ad7c-e2fd40bd2225-image.png

                            16fbc639-ff44-430a-89db-565f7d11342c-image.png

                            Master67M Offline
                            Master67M Offline
                            Master67
                            wrote on last edited by
                            #21

                            @JB_Sullivan .... Sorry was ist den ein Boom?
                            Ich nutze auch Grafana in der Vis wenn ich hinter den http link noch ein "&kiosk" eingebe sehe ich nur das Dashboard ohne Schaltflächen, ist das als Boom gemeint (also die Schaltflächen)?!

                            Gruß Master67

                            FeuersturmF 1 Reply Last reply
                            0
                            • Master67M Master67

                              @JB_Sullivan .... Sorry was ist den ein Boom?
                              Ich nutze auch Grafana in der Vis wenn ich hinter den http link noch ein "&kiosk" eingebe sehe ich nur das Dashboard ohne Schaltflächen, ist das als Boom gemeint (also die Schaltflächen)?!

                              FeuersturmF Online
                              FeuersturmF Online
                              Feuersturm
                              wrote on last edited by Feuersturm
                              #22

                              @Master67

                              Mit dem Boom Plugin für Grafana  https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel kann man sich den Hintergrund individuell gestalten. In meinem Fall nutze ich es dafür um den Hintergrund von einem Dashboard transparent zu machen, um es in meine Vis einzusetzen (siehe hier https://forum.iobroker.net/post/520727)

                              Master67M 1 Reply Last reply
                              0
                              • FeuersturmF Feuersturm

                                @Master67

                                Mit dem Boom Plugin für Grafana  https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel kann man sich den Hintergrund individuell gestalten. In meinem Fall nutze ich es dafür um den Hintergrund von einem Dashboard transparent zu machen, um es in meine Vis einzusetzen (siehe hier https://forum.iobroker.net/post/520727)

                                Master67M Offline
                                Master67M Offline
                                Master67
                                wrote on last edited by
                                #23

                                @Feuersturm ..... Danke... ich verstehe ✌

                                Gruß Master67

                                1 Reply Last reply
                                0
                                • FeuersturmF Feuersturm

                                  @JB_Sullivan Boom greift nur, wenn du das ganze Dasboard in einem iframe darstellst.

                                  Soll nur ein Panel transparent sein musst du diese Anleitung befolgen: https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/6

                                  JB_SullivanJ Offline
                                  JB_SullivanJ Offline
                                  JB_Sullivan
                                  wrote on last edited by JB_Sullivan
                                  #24

                                  @Feuersturm

                                  Ja, ich weiß - das ist ja das ganze Dashboard. Ich habe da nur einen Trend drin abgelegt und erstelle einen "Teilen" Link von dem Dashboard und nicht nur von dem Trend - trotzdem geht es nicht.

                                  Ich habe es sogar soweit, das mit der Sternenhimmel angezeigt wird. Sobald ich aber den generierten Link von dem "Sternen Dashboard" in ein VIS iframe einfüge, ist der Hintergrund wieder schwarz - egal ob KIOSK Mode oder nicht.

                                  4f6671b9-27a9-462c-8c22-b0939da58d45-image.png

                                  8191fa3f-4838-40e3-89e8-04a08bc0f06a-image.png

                                  ioBroker auf Intel Core i3-5005U NUC und Windwos10 Pro

                                  FeuersturmF 1 Reply Last reply
                                  0
                                  • JB_SullivanJ JB_Sullivan

                                    @Feuersturm

                                    Ja, ich weiß - das ist ja das ganze Dashboard. Ich habe da nur einen Trend drin abgelegt und erstelle einen "Teilen" Link von dem Dashboard und nicht nur von dem Trend - trotzdem geht es nicht.

                                    Ich habe es sogar soweit, das mit der Sternenhimmel angezeigt wird. Sobald ich aber den generierten Link von dem "Sternen Dashboard" in ein VIS iframe einfüge, ist der Hintergrund wieder schwarz - egal ob KIOSK Mode oder nicht.

                                    4f6671b9-27a9-462c-8c22-b0939da58d45-image.png

                                    8191fa3f-4838-40e3-89e8-04a08bc0f06a-image.png

                                    FeuersturmF Online
                                    FeuersturmF Online
                                    Feuersturm
                                    wrote on last edited by
                                    #25

                                    @JB_Sullivan Poste doch mal bitte, was im Feld Custom Style / CSS Override steht. Ich glaube du hast bei dir den falschen Inhalt drin. Es sieht nach dem aus was bei mir in der grafana.css ist, welche man für die transparenten Panesl braucht.

                                    Bei mir ist folgendes drin:

                                    body{
                                    background: transparent;
                                    }
                                    
                                    .page-dashboard .main-view, .page-explore .main-view{
                                    background: transparent !important;
                                    border: 0px solid transparent !important;
                                    }
                                    
                                    .panel-container{
                                        border: 0px solid #1F2129  !important;
                                    }
                                    
                                    .graph-legend-table .graph-legend-series:nth-child(2n) {
                                        background: transparent;
                                    }
                                    
                                    JB_SullivanJ 1 Reply Last reply
                                    0
                                    • FeuersturmF Feuersturm

                                      @JB_Sullivan Poste doch mal bitte, was im Feld Custom Style / CSS Override steht. Ich glaube du hast bei dir den falschen Inhalt drin. Es sieht nach dem aus was bei mir in der grafana.css ist, welche man für die transparenten Panesl braucht.

                                      Bei mir ist folgendes drin:

                                      body{
                                      background: transparent;
                                      }
                                      
                                      .page-dashboard .main-view, .page-explore .main-view{
                                      background: transparent !important;
                                      border: 0px solid transparent !important;
                                      }
                                      
                                      .panel-container{
                                          border: 0px solid #1F2129  !important;
                                      }
                                      
                                      .graph-legend-table .graph-legend-series:nth-child(2n) {
                                          background: transparent;
                                      }
                                      
                                      JB_SullivanJ Offline
                                      JB_SullivanJ Offline
                                      JB_Sullivan
                                      wrote on last edited by JB_Sullivan
                                      #26

                                      @Feuersturm sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

                                      Das ist interessant - ich habe genau das in dem Custom CSS von BOOM drin stehen. Den ganzen Nachmittag lang immer und immer wieder. Ich habe immer schön brav Apply und Save gedrückt und es hat nie funktioniert.

                                      Wenn ich dann via Edit wieder zurück gekommen bin, war jedes mal das Custom CSS wieder weg. Ich habe es dann irgend wann aufgegeben. Eben habe ich es nochmal versucht und nun geht es - frag mich nicht was da Sache war.

                                      Auf jeden Fall ist es jetzt transparent - naja nun geht die Arbeit los ...... alle bereits bestehenden Trends erstmal transparent machen. Man gut das ich gleich von Anfang an nur einen Trend pro Dashbord verwendet habe.

                                      d2f466c8-f57e-4faa-bbea-ad35d90e6f0f-image.png

                                      BTW: Gibt es eine schnelle Möglichkeit, das ganze Kontrastreicher zugestalten?

                                      ioBroker auf Intel Core i3-5005U NUC und Windwos10 Pro

                                      1 Reply Last reply
                                      0
                                      • FeuersturmF Feuersturm

                                        @nousefor82 da kann ich dir leider nicht helfen.
                                        @jkvarel Hast du da was auf Lager?

                                        jkvarelJ Offline
                                        jkvarelJ Offline
                                        jkvarel
                                        Developer
                                        wrote on last edited by jkvarel
                                        #27

                                        @Feuersturm @nousefor82
                                        etwas spät aber ja das geht
                                        So kannst du für das ganze Dashboard die Schriftart ändern:
                                        .dashboard-content{
                                        font-family: cursive;
                                        }

                                        S NashraN 2 Replies Last reply
                                        0
                                        • jkvarelJ jkvarel

                                          @Feuersturm @nousefor82
                                          etwas spät aber ja das geht
                                          So kannst du für das ganze Dashboard die Schriftart ändern:
                                          .dashboard-content{
                                          font-family: cursive;
                                          }

                                          S Do not disturb
                                          S Do not disturb
                                          stenmic
                                          wrote on last edited by stenmic
                                          #28

                                          @jkvarel
                                          zur Info,
                                          man kann auch google fonts einbinden.
                                          den „Link“ dazu muss man ebenfalls in der „ usr\share\grafana\public\views\index.html“ angeben.
                                          Das gilt auch für den .panel-container
                                          Die Schriftgröße geht über z.B. font-size: 24px;

                                          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

                                          610

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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