13 KiB
theme.park
A collection of themes/skins for use in conjunction with Organizr
Honourable mentions:
OrgArr - Sonarr v2/v3 - Radarr - Lidarr
Custom Sonarr V2 and V3/Radarr/Lidarr CSS for consistent UI in Organizr
Thank you iFelix18 for doing all the hard work! :)
The orgarr.css
theme will mess with your Xarr base theme.
orgarrg.css
is created purely for use with Organizr.
NOTE: When viewing orgarr in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.
orgarr-plex.css
If you want a regular Plex theme for your *arr setup, use the orgarr-plex.css
instead.
Setup
Expand
Screenshots
Expand
Subfilter
As the arr's doesn't have support for custom CSS you can get around that by using subfilter in Nginx.
Add this to your location context/block:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/orgarr.css">
</head>';
sub_filter_once on;
Here is a complete example:
#ARR CONTAINER
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;
server_name orgarr.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name orgarr.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://gilbn.github.io/theme.park/CSS/themes/orgarr.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;
}
}
GrafOrg - Grafana
Custom Grafana CSS for Organizr homepage integration and consistent UI.
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/login 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.
grafplex.css
If you want a regular Plex theme for your Grafana setup, use the grafplex.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 Grafana and add this:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/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://gilbn.github.io/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 - Netdata
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.
netplex.css
If you want a regular Plex theme for your Netdata setup, use the netplex.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 netdata and add this:
proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/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://gilbn.github.io/theme.park/CSS/themes/netorg.css">
</head>';
sub_filter_once on;
}
Custom HTML for Organizr Homepage
Monitorg - Monitorr
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/master/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://gilbn.github.io/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://gilbn.github.io/theme.park/CSS/themes/monitorg.css">
</head>';
sub_filter_once on;
}
}