Skip to content

logo Grafana (Deprecated)

Custom Grafana CSS

Organizr Dark Theme

https://theme-park.dev/CSS/themes/grafana/XXX.css
aquamarine.css
hotline.css
plex.css
dark.css
space-gray.css
organizr.css

🛠️ Installation

Setup

Can be installed with reverse-proxy/ Stylus ect. (See wiki)

Grafana Plugin

Or use the theme plugin: https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel

Organizr

For panel integration on the Organizr homepage you can use organizr-dashboard.css. The theme is an "internal" theme that is meant to be used in an Organizr iframe as the background is set to transparent. NOTE: When viewing Grafana in Organizr iframe using organizr-dashboard.css it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. If you don't want this you can create two reverse proxies. One for grafana organizr homepage integration and one for the regular grafana theme.

Note

Click the kiosk button and use that link if you don't want to show the top bar and side bar inside Organizr! There are two modes, one where the side menu and variables ect disappear and one where just the panels are visible.

view

Check out my Varken dashboard here: https://grafana.com/dashboards/9558

Custom HTML for Organizr Homepage

Expand

Change the Panel name to what you want and the src to the panel URL.

<h5><span>Panel name</span></h5>
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/>**

The URL can be found by clicking share on the panel you want to add.

embed

If you dont want the Panel name text, just remove the <h5><span> line entirely.

<style>
.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-top:10px;
    box-shadow: none !important;
}
.flex-child {
    flex: 1 1 1 1;
    padding: 1px 1px 1px 1px;
}
#flex-grafanadwidget1 {
    min-width: 25%;
}
#flex-grafanadwidget2 {
    min-width: 25%;
}
#flex-grafanadwidget3 {
    min-width: 25%;
}
#flex-grafanadwidget4 {
    min-width: 25%;
}
@media only screen and (max-width: 1374px) {
    #flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
        min-width: 50%;
    }
}
@media only screen and (max-width: 640px) {
    #flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
        min-width: 100%;
    }
@media only screen and (max-width: 400px) {
    .flex-child>h5 {
    margin-left: 15px;
    }
#announcementRow {
    background-color:transparent !important;
}
.flex-child>h5 {
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 15px;important;
    color: #eee;
}
.overflowhider {
    height: 100%;
    overflow: hidden;
}
#grafanadwidget1 {
    position: relative;
    height: calc(250px);
    width: calc(100%);
}
#grafanadwidget2 {
    position: relative;
    height:calc(250px);
    width:calc(100%);
}
#grafanadwidget3 {
    position: relative;
    height: calc(250px);
    width: calc(100%);
}
#grafanadwidget4 {
    position: relative;
    height:calc(250px);
    width:calc(100%);
}
</style>

<div id="announcementRow" class="row">
    <div class="content-box flex">
<div class="flex-child" id="flex-grafanadwidget1">
<h5><span>Panel name</span></h5>
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/></div>
</div>
<div class="flex-child box-shadow" id="flex-grafanadwidget2">
<h5><span>Panel name</span></h5>
<div class="overflowhider"><embed id="grafanadwidget2" src='https://graforg.domain.com/panel-embed-link' /></div>
</div>
<div class="flex-child" id="flex-grafanadwidget3">
<h5><span>Panel name</span></h5>
<div class="overflowhider"><embed id="grafanadwidget3" src='https://graforg.domain.com/panel-embed-link'/></div>
</div>
<div class="flex-child box-shadow" id="flex-grafanadwidget4">
<h5><span>Panel name</span></h5>
<div class="overflowhider"><embed id="grafanadwidget4" src='https://graforg.domain.com/panel-embed-link' /></div>
</div>
    </div>
</div>

Screenshots

Aquamarine Theme

Hotline Theme

Hotpink Theme

Dracula Theme

Dark Theme

Organizr Theme

Space-gray Theme

Overseerr Theme

Plex Theme

Nord Theme


Last update: October 25, 2021