2019-01-06 18:36:28 +01:00
```
dP dP dP
88 88 88
2019-01-06 18:37:51 +01:00
d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP
2019-01-06 18:36:28 +01:00
88 88' `88 88ooood8 88'` 88'`88 88ooood8 88' `88 88' ` 88 88' `88 88888"
88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b.
dP dP dP `88888P' dP dP dP ` 88888P' 88 88Y888P' `88888P8 dP dP ` YP
2019-01-06 18:38:25 +01:00
88
dP
2019-01-06 18:36:28 +01:00
```
#
2018-08-13 22:06:14 +02:00
A collection of themes/skins for use in conjunction with [Organizr ](https://github.com/causefx/Organizr )
2018-12-09 19:42:02 +01:00
## Setup
### Subfilter
2018-12-16 00:24:38 +01:00
As most of these apps 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.
2018-12-09 19:42:02 +01:00
2018-12-16 02:24:47 +01:00
Add this to your reverse proxy:
2018-12-16 00:24:38 +01:00
2018-12-09 19:42:02 +01:00
```nginx
2018-12-16 00:38:41 +01:00
proxy_set_header Accept-Encoding "";
sub_filter
'< / head > '
'< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/CUSTOM_CSS.css" >
< / head > ';
sub_filter_once on;
2018-12-09 19:42:02 +01:00
```
2018-12-16 02:26:53 +01:00
Where `CUSTOM_CSS` is the name of the theme. e.g. `nzbget-plex.css`
2018-12-16 02:25:53 +01:00
2018-12-09 19:42:02 +01:00
Here is a complete example:
2018-12-16 00:38:41 +01:00
2018-12-16 00:44:41 +01:00
< details > < summary > Expand< / summary >
2018-12-26 16:32:20 +01:00
2018-12-09 19:42:02 +01:00
```nginx
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
2018-12-16 00:44:41 +01:00
listen 80;
server_name plpp.domain.com;
return 301 https://$server_name$request_uri;
2018-12-09 19:42:02 +01:00
}
server {
listen 443 ssl http2;
server_name plpp.domain.com;
2018-12-26 16:32:20 +01:00
2018-12-16 00:38:41 +01:00
#SSL settings
2018-12-16 00:44:41 +01:00
include /config/nginx/ssl.conf
2018-12-09 19:42:02 +01:00
location / {
proxy_pass http://192.168.1.2:8701;
include /config/nginx/proxy.conf;
2018-12-16 00:38:41 +01:00
proxy_set_header Accept-Encoding "";
sub_filter
'< / head > '
'< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/plpporg.css" >
< / head > ';
sub_filter_once on;
2018-12-09 19:42:02 +01:00
}
}
```
< / details >
2018-12-16 00:24:38 +01:00
***
# PHP Library Presenter Dark/Plex Theme
Custom [PLPP ](https://github.com/Tensai75/plpp ) CSS to match the [Organizr ](https://github.com/causefx/Organizr ) theme.
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plpp/plpp.png)
#### `plpporg.css` is a dark theme that matches Organizr.
2018-12-26 16:32:20 +01:00
#### `plpp-plex.css` is a Plex theme for PLPP
2018-12-16 00:24:38 +01:00
2018-12-09 19:42:02 +01:00
***
2018-12-08 01:13:53 +01:00
# Guacamole Dark/Plex Theme
2018-12-08 01:13:29 +01:00
Custom [Guacamole ](https://guacamole.apache.org/ ) CSS to match the [Organizr ](https://github.com/causefx/Organizr ) theme.
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/guacorg/guacorg.png)
#### `guacorg.css` is a dark theme that matches Organizr.
2018-12-09 19:42:02 +01:00
#### `guacplex.css` is a Plex theme for Guacamole
2018-12-08 01:13:29 +01:00
2018-12-16 02:51:57 +01:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
2018-12-16 02:52:46 +01:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/guacorg/guac-1.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/guacorg/guac-2.png" > < / img >
2018-12-16 02:51:57 +01:00
< / p >
< / details >
2018-12-08 01:13:29 +01:00
***
2018-12-07 21:44:34 +01:00
# Plex Organizr Theme
Custom [Plex ](https://plex.tv ) CSS to match the [Organizr ](https://github.com/causefx/Organizr ) theme.
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plexorg/plexorg.png)
2018-12-16 01:43:40 +01:00
#### The `plexorg.css` theme is a dark theme that matches Organizr.
2018-12-07 21:44:34 +01:00
***
2018-08-16 14:17:46 +02:00
2018-12-26 16:32:20 +01:00
# OrgArr - Sonarr v2/v3 - Radarr - Lidarr - Bazarr Dark/Plex Theme
2018-08-18 00:37:51 +02:00
2018-12-26 16:32:20 +01:00
Custom [Sonarr V2 and V3 ](https://github.com/Sonarr/Sonarr )/[Radarr](https://github.com/Radarr/Radarr)/[Lidarr](https://github.com/Lidarr/Lidarr)/[Bazarr](https://github.com/morpheus65535/bazarr) CSS for consistent UI in [Organizr ](https://github.com/causefx/Organizr )
2018-12-09 03:58:07 +01:00
2018-12-16 00:51:54 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/sonarrv3.png)
2018-12-09 03:58:07 +01:00
2018-08-18 00:49:17 +02:00
Thank you iFelix18 for doing all the hard work! :)
2018-08-18 00:37:51 +02:00
2018-12-08 01:46:52 +01:00
#### The `orgarr.css` theme is a dark theme that matches the Organizr dark theme.
2018-08-18 00:37:51 +02:00
2018-12-08 01:46:52 +01:00
#### `orgarr-plex.css` If you want a regular Plex theme for your *arr setup, use the **`orgarr-plex.css`** instead.
2018-08-18 00:37:51 +02:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
2018-12-16 01:02:35 +01:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/sonarrv3-2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/sonarrv3-3.png" > < / img >
2018-10-20 16:47:20 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/1.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/2.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/3.jpg" > < / img >
2018-12-16 01:02:35 +01:00
2018-08-18 00:37:51 +02:00
< / p >
< / details >
2018-10-28 15:38:08 +01:00
***
2018-12-16 02:21:05 +01:00
# NZBGet Dark/Plex Theme
2018-10-28 15:38:08 +01:00
2018-12-07 21:35:59 +01:00
Custom CSS for [Nzbget ](https://github.com/nzbget/nzbget )
2018-12-09 03:58:07 +01:00
2018-12-16 02:20:21 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget-split.png)
#### The `nzborg.css` theme is a dark theme that matches the Organizr dark theme.
2018-12-09 03:58:07 +01:00
2018-12-16 01:59:55 +01:00
#### The `nzbget-plex.css` theme is a plex theme for NZBGet.
2018-12-16 01:59:22 +01:00
2018-10-28 16:04:13 +01:00
Thank you [ydkmlt84 ](https://github.com/ydkmlt84 ) for making the job easier :)
2018-10-28 15:38:08 +01:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget1.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget2.jpg" > < / img >
2018-12-16 02:24:03 +01:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget-split-2.png" > < / img >
2018-10-28 15:38:08 +01:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget3.png" > < / img >
< / p >
< / details >
2018-08-18 00:48:22 +02:00
***
2018-08-18 00:37:51 +02:00
2018-12-17 23:14:31 +01:00
# GrafOrg - Grafana Dark/Plex
2018-08-13 22:06:14 +02:00
2018-08-18 01:03:11 +02:00
Custom [Grafana ](https://github.com/grafana/grafana ) CSS for [Organizr ](https://github.com/causefx/Organizr ) homepage integration and consistent UI.
2018-12-09 03:58:07 +01:00
2018-12-16 01:21:08 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/grafana-1.png)
2018-12-26 16:32:20 +01:00
#### The `graforg.css` theme is a dark theme that matches the Organizr dark theme.
2018-12-16 01:43:40 +01:00
#### `grafplex.css` If you want a regular Plex theme for your Grafana setup, use the **`grafplex.css`** theme instead.
2018-08-13 22:06:14 +02:00
2018-12-26 16:32:20 +01:00
### **TIP:**
2018-12-23 01:14:27 +01:00
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.
https://grafana.technicalramblings.com/d/nLJXnLJiz/unraid-ups-dashboard?refresh=10s& orgId=1& kiosk=tv
https://grafana.technicalramblings.com/d/nLJXnLJiz/unraid-ups-dashboard?refresh=10s& orgId=1& kiosk
Check out my Varken dashboard here: https://grafana.com/dashboards/9558
2018-08-13 22:06:14 +02:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
2018-10-20 16:47:20 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/1.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/2.jpg" > < / img >
2018-08-13 22:06:14 +02:00
< / p >
< / details >
### Custom HTML for Organizr Homepage
2018-12-16 01:21:08 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/3.jpg)
2018-12-16 00:38:41 +01:00
< details > < summary > Expand< / summary >
2018-12-26 16:32:20 +01:00
2018-12-16 00:38:41 +01:00
Thank you [Fma965 ](https://gist.github.com/Fma965 ) for the base [code ](https://gist.github.com/Fma965/d30ac1fa5695304a7d6dcdc748220027 )
2018-08-13 22:06:14 +02:00
Change the ** *Panel name*** to what you want and the ** *src*** to the panel URL.
```css
< 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.
2018-10-20 16:51:25 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/4.png" > < / img >
2018-08-13 22:06:14 +02:00
If you dont want the ** *Panel name*** text, just remove the `<h5><span>` line entirely.
```css
< 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 >
```
< / details >
***
2018-12-17 23:14:31 +01:00
# NetOrg - Netdata Dark/Plex Theme
2018-08-13 22:06:14 +02:00
Custom [Netdata ](https://github.com/firehol/netdata ) CSS for consistent UI in [Organizr ](https://github.com/causefx/Organizr )
2018-12-16 01:48:18 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/netorg/netdata-1.png)
2018-12-16 01:43:40 +01:00
#### The `netorg.css` theme is a dark theme that matches Organizr.
2018-08-13 22:06:14 +02:00
2018-12-16 01:43:40 +01:00
#### `netplex.css` If you want a regular Plex theme for your Netdata setup, use the **`netplex.css`** instead.
2018-08-13 22:06:14 +02:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
2018-10-20 16:47:20 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/netorg/1.jpg" > < / img >
2018-12-16 01:48:18 +01:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/netorg/2.jpg" > < / img >
2018-08-13 22:06:14 +02:00
< / p >
< / details >
### Custom HTML for Organizr Homepage
***
2018-12-17 23:14:31 +01:00
# Monitorg - Monitorr Dark/Plex Theme
2018-08-13 22:06:14 +02:00
Custom [Monitorr ](https://github.com/Monitorr/Monitorr ) CSS for [Organizr ](https://github.com/causefx/Organizr ) homepage integration.
2018-08-13 22:09:33 +02:00
2018-10-20 16:47:20 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/monitorg/1-flat.jpg)
2018-08-13 22:06:14 +02:00
2019-01-06 19:13:45 +01:00
#### The `monitorg.css` 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 "minimum" version of the index.php `https://domain.com/monitorr/index.min.php`
2018-08-13 22:06:14 +02:00
2019-01-06 19:16:53 +01:00
#### For the dark theme use `monitorg-dark.css`
#### For the Plex theme use `monitorg-plex.css`
2018-08-13 22:06:14 +02:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
2018-10-20 16:47:20 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/monitorg/2.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/monitorg/3.jpg" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/monitorg/4.jpg" > < / img >
2018-08-13 22:06:14 +02:00
< / p >
< / details >
2018-12-16 00:38:41 +01:00
Add this in the Monitorr custom css box:
2018-08-13 22:06:14 +02:00
```css
2018-11-03 11:30:44 +01:00
@import "https://gilbn.github.io/theme.park/CSS/themes/monitorg.css";
2018-08-13 22:06:14 +02:00
```
And add this in custom HTML in Organizr:
```css
< div style = "overflow:hidden; height:260px" >
< embed style = "height:calc(100% + 50px)" width = '100%' src = 'https://domain.com/monitorr/index.min.php' / >
< / div >
```
2019-01-06 19:13:45 +01:00
**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. If you don't want this you can create two reverse proxies. One for monitorg and one for the monitorr dark/plex theme. And use subfilter on both instead of adding `@import "https://gilbn.github.io/theme.park/CSS/themes/monitorg.css";` in custom css.
2018-12-16 00:39:20 +01:00
***
### 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 )
[Archmonger/Blackberry-Flat ](https://github.com/Archmonger/Blackberry-Flat )