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

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

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

Hintergrund von Grafana Dashboard in VIS entfernen

Scheduled Pinned Locked Moved Grafana
vis
148 Posts 33 Posters 33.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 Online
    FeuersturmF Online
    Feuersturm
    wrote on last edited by
    #6

    Dank der Hilfe von @jkvarel habe ich es jetzt auch geschafft ein ganzes Dashboard transparent darzustellen.

    Man geht dafür wie folgt vor:

    • Boom Theme für Grafana installieren https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel
    • Neues Panel auf dem Dashboard hinzufügen und dann dort "Boom" auswählen
    • Nachfolgenden Custom Style / CSS Override einfügen:
    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;
    }
    

    Am Ende sieht es dann bei mir so aus (die Icons oben rechts gehören zu Boom und können natürlich ausgeblendet werden):
    cfedb260-f695-4403-8fe8-3f129f6c8f86-grafik.png

    AlmixxA 1 Reply Last reply
    4
    • FeuersturmF Feuersturm

      Dank der Hilfe von @jkvarel habe ich es jetzt auch geschafft ein ganzes Dashboard transparent darzustellen.

      Man geht dafür wie folgt vor:

      • Boom Theme für Grafana installieren https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel
      • Neues Panel auf dem Dashboard hinzufügen und dann dort "Boom" auswählen
      • Nachfolgenden Custom Style / CSS Override einfügen:
      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;
      }
      

      Am Ende sieht es dann bei mir so aus (die Icons oben rechts gehören zu Boom und können natürlich ausgeblendet werden):
      cfedb260-f695-4403-8fe8-3f129f6c8f86-grafik.png

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

      @Feuersturm
      Wie bekomme ich genau das plugin installiert.
      Wenn ich die Befehlszeile eingebe, erhalte ich einen Fehlermeldung:
      grafana.png

      FeuersturmF 1 Reply Last reply
      0
      • AlmixxA Almixx

        @Feuersturm
        Wie bekomme ich genau das plugin installiert.
        Wenn ich die Befehlszeile eingebe, erhalte ich einen Fehlermeldung:
        grafana.png

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

        @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 2 Replies Last reply
        1
        • 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 :slightly_smiling_face:

          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 :v:

                                      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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          686

                                          Online

                                          32.4k

                                          Users

                                          81.5k

                                          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