| CSS/themes | ||
| Resources | ||
| Screenshots | ||
| README.md | ||
theme.park
A collection of themes/skins for use in conjunction with Organizr
Honourable mentions:
GrafOrg
Custom Grafana CSS for Organizr homepage integration.
Custom CSS for Organizr
The graforg.css theme will mess with your Grafana base theme. And it will hide the side menu. Go to https://graforg.domain.com/datasources for settings.
graforg.css is created purely for use with Organizr.
NOTE: When viewing Grafana in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.
grafblur.css
If you want a regular Plex theme for your Grafana setup, use the grafblur.css instead.
Setup
Expand
Screenshots
Expand
Subfilter
As Grafana doesn't have support for custom CSS you can get around that by using subfilter in Nginx.
Create another reverse proxy for monitorr and add this:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/graforg.css">
</head>';
sub_filter_once on;
Here is a complete example:
#GRAFANA CONTAINER
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;
server_name graforg.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name graforg.domain.com;
include /config/nginx/ssl.conf;
location / {
proxy_pass http://192.168.1.34:3000;
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/graforg.css">
</head>';
sub_filter_once on;
proxy_hide_header X-Frame-Options;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_pass_request_headers on;
proxy_set_header Connection "keep-alive";
proxy_store off;
}
}
Custom HTML for Organizr Homepage
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.
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>
NetOrg
Custom Netdata CSS for consistent UI in Organizr
Custom CSS for Organizr
The netorg.css theme will mess with your Netdata base theme.
netorg.css is created purely for use with Organizr.
NOTE: When viewing Netdata in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.
netblur.css
If you want a regular Plex theme for your Netdata setup, use the netblur.css instead.
Setup
Expand
Screenshots
Expand
Subfilter
As Netdata doesn't have support for custom CSS you can get around that by using subfilter in Nginx.
Create another reverse proxy for monitorr and add this:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/netorg.css">
</head>';
sub_filter_once on;
Here is a complete example:
# NETDATA CONTAINER
location ~ /netdata/(?<ndpath>.*) {
#auth_request /auth-user;
auth_request /auth-4; #=User
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://192.168.1.34:19999/$ndpath$is_args$args;
proxy_http_version 1.1;
proxy_pass_request_headers on;
proxy_set_header Connection “keep-alive”;
proxy_store off;
gzip on;
gzip_proxied any;
gzip_types *;
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/netorg.css">
</head>';
sub_filter_once on;
}
Custom HTML for Organizr Homepage
Monitorg
Custom Monitorr CSS for Organizr homepage integration.
Custom CSS for Organizr
This theme will mess with your Monitorr base theme. And it will hide the settings button. Go to /monitorr/settings.php for settings.
It is created purely for use with Organizr.
NOTE: When viewing /monitorr in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.
Setup
Expand
Screenshots
Expand
Add this in the custom css box:
@import "https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css";
And add this in custom HTML in Organizr:
<div style="overflow:hidden; height:260px">
<embed style="height:calc(100% + 50px)" width='100%' src='https://domain.com/monitorr/index.min.php' />
</div>
Subfilter
As this theme will change the base theme, you can get around that by using subfilter in Nginx. Create another reverse proxy for monitorr and add this:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css">
</head>';
sub_filter_once on;
Here is a complete example:
#MONITORR CONTAINER
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;
server_name monitorg.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name monitorg.domain.com;
#SSL settings
include /config/nginx/ssl.conf
location / {
proxy_pass http://192.168.1.2:8701;
include /config/nginx/proxy.conf;
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css">
</head>';
sub_filter_once on;
}
}