# theme.park
A collection of themes/skins for use in conjunction with [Organizr](https://github.com/causefx/Organizr)
### Honourable mentions:
[leram84/layer.Cake/](https://github.com/leram84/layer.Cake/)
[rg9400/Cloud-Tautulli-Theme](https://github.com/rg9400/Cloud-Tautulli-Theme)
[Burry/organizr-v2-plex-theme](https://github.com/Burry/organizr-v2-plex-theme)
[iFelix18/Darkerr](https://github.com/iFelix18/Darkerr)
[ydkmlt84/DarkerNZBget](https://github.com/ydkmlt84/DarkerNZBget)
# OrgArr
Custom [Sonarr](https://github.com/Sonarr/Sonarr)/[Radarr](https://github.com/Radarr/Radarr)/[Lidarr](https://github.com/Sonarr/Sonarr) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr)
![](/Screenshots/orgarr/4.jpg)
Thank you iFelix18 for doing all the hard work! :)
#### The `orgarr.css` theme will mess with your Xarr base theme.
#### `graforg.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-blur.css`
If you want a regular Plex theme for your *arr setup, use the **`orgarr-blur.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](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx.
Add this to your location context/block:
```nginx
proxy_set_header Accept-Encoding "";
sub_filter
''
'
';
sub_filter_once on;
```
### Here is a complete example:
```nginx
#GRAFANA 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 graforg.domain.com;
include /config/nginx/ssl.conf;
location / {
proxy_pass http://192.168.1.34:3000;
proxy_set_header Accept-Encoding "";
sub_filter
''
'
';
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
Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration and consistent UI.
![](/Screenshots/graforg/3.jpg)
## 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](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx.
Create **another** reverse proxy for monitorr and add this:
```nginx
proxy_set_header Accept-Encoding "";
sub_filter
''
'
';
sub_filter_once on;
```
### Here is a complete example:
```nginx
#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
''
'
';
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
Thank you [Fma965](https://gist.github.com/Fma965) for the [code](https://gist.github.com/Fma965/d30ac1fa5695304a7d6dcdc748220027)
Change the ***Panel name*** to what you want and the ***src*** to the panel URL.
```css
Panel name
**
```
The URL can be found by clicking **share** on the panel you want to add.
![](/Screenshots/graforg/4.jpg)
If you dont want the ***Panel name*** text, just remove the `
` line entirely.
```css
Panel name
Panel name
Panel name
Panel name
```
***
# NetOrg
Custom [Netdata](https://github.com/firehol/netdata) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr)
![](/Screenshots/netorg/2.jpg)
## 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](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx.
Create **another** reverse proxy for monitorr and add this:
```nginx
proxy_set_header Accept-Encoding "";
sub_filter
''
'
';
sub_filter_once on;
```
### Here is a complete example:
```nginx
# NETDATA CONTAINER
location ~ /netdata/(?.*) {
#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
''
'
';
sub_filter_once on;
}
```
### Custom HTML for Organizr Homepage
```css
```
***
# Monitorg
Custom [Monitorr](https://github.com/Monitorr/Monitorr) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration.
![](/Screenshots/monitorg/1.jpg)
## 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:
```css
@import "https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css";
```
And add this in custom HTML in Organizr:
```css
```
### Subfilter
As this theme will change the base theme, you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx.
Create another reverse proxy for monitorr and add this:
```nginx
proxy_set_header Accept-Encoding "";
sub_filter
''
'
';
sub_filter_once on;
```
Here is a complete example:
```nginx
#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
''
'
';
sub_filter_once on;
}
}
```