# 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/Lidarr/Lidarr) 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; } } ```