2018-08-13 14:24:30 +02:00
# theme.park
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-08-18 00:45:33 +02:00
### Honourable mentions:
2018-08-13 22:30:11 +02:00
2018-10-19 17:10:31 +02:00
[leram84/layer.Cake ](https://github.com/leram84/layer.Cake/ )
2018-08-13 22:30:11 +02:00
[rg9400/Cloud-Tautulli-Theme ](https://github.com/rg9400/Cloud-Tautulli-Theme )
[Burry/organizr-v2-plex-theme ](https://github.com/Burry/organizr-v2-plex-theme )
2018-08-16 14:17:46 +02:00
[iFelix18/Darkerr ](https://github.com/iFelix18/Darkerr )
[ydkmlt84/DarkerNZBget ](https://github.com/ydkmlt84/DarkerNZBget )
2018-10-19 17:09:53 +02:00
[Archmonger/Blackberry-Flat ](https://github.com/Archmonger/Blackberry-Flat )
2018-08-18 16:19:53 +02:00
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
Add this to your plex 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 00:24:38 +01:00
Where `CUSTOM_CSS` is the name of the theme css.
2018-12-09 19:42:02 +01:00
Here is a complete example:
2018-12-16 00:24:38 +01:00
< details > < summary > Expand< / summary >
2018-12-16 00:38:41 +01:00
2018-12-09 19:42:02 +01:00
```nginx
# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
listen 80;
server_name plpp.domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name plpp.domain.com;
2018-12-16 00:38:41 +01:00
#SSL settings
2018-12-09 19:42:02 +01:00
include /config/nginx/ssl.conf
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.
#### `plpp-plex.css` is a Plex theme for PLPP
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-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 00:38:41 +01:00
#### `plexorg.css` is a dark theme that matches Organizr.
2018-12-07 21:44:34 +01:00
***
2018-08-16 14:17:46 +02:00
2018-10-23 17:10:59 +02:00
# OrgArr - Sonarr v2/v3 - Radarr - Lidarr
2018-08-18 00:37:51 +02:00
2018-10-22 19:40:42 +02:00
Custom [Sonarr V2 and V3 ](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 )
2018-12-09 03:58:07 +01:00
2018-10-20 16:44:34 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/4.jpg)
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-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 >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/5.png" > < / img >
2018-08-18 00:37:51 +02:00
< / p >
< / details >
2018-10-28 15:38:08 +01:00
***
# Nzbget Plex Theme
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-10-28 15:38:42 +01:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget1.jpg)
2018-12-09 03:58:07 +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 >
< 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-10-23 17:10:59 +02:00
# GrafOrg - Grafana
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-10-20 16:47:20 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/3.jpg)
2018-12-09 03:58:07 +01:00
2018-08-13 22:06:14 +02:00
## Custom CSS for Organizr
2018-08-26 22:37:46 +02:00
#### 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.
2018-08-13 22:06:14 +02:00
2018-08-13 22:13:36 +02:00
#### `graforg.css` is created purely for use with Organizr.
2018-08-13 22:06:14 +02:00
2018-08-28 07:35:28 +02:00
#### `grafplex.css`
2018-08-28 07:38:49 +02:00
If you want a regular Plex theme for your Grafana setup, use the ** `grafplex.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/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 00:38:41 +01:00
< details > < summary > Expand< / summary >
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-10-23 17:10:59 +02:00
# NetOrg - Netdata
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-10-20 16:47:20 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/netorg/2.jpg)
2018-08-13 22:06:14 +02:00
## Custom CSS for Organizr
2018-08-13 22:13:36 +02:00
#### The `netorg.css` theme will mess with your Netdata base theme.
2018-08-13 22:06:14 +02:00
2018-08-13 22:13:36 +02:00
#### `netorg.css` is created purely for use with Organizr.
2018-08-13 22:06:14 +02:00
**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.
2018-08-28 07:35:28 +02:00
#### `netplex.css`
2018-08-28 07:38:49 +02:00
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-08-13 22:06:14 +02:00
< / p >
< / details >
### Custom HTML for Organizr Homepage
***
2018-10-23 17:10:59 +02:00
# Monitorg - Monitorr
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
## 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.
### 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 >
```