2019-01-07 20:11:10 +01:00
< h1 align = "center" >
2019-06-22 18:07:13 +02:00
< img src = "https://i.imgur.com/OkX6Zup.png" >
2019-01-07 20:11:10 +01:00
< / h1 >
< p align = "center" >
2019-06-25 21:32:01 +02:00
A collection of themes/skins for use in conjunction with < a href = "https://github.com/causefx/Organizr/" target = "_blank" > Organizr< / a > or standalone.
2019-01-07 20:11:10 +01:00
< p align = "center" >
2019-08-26 06:57:12 +02:00
< a href = "https://www.buymeacoffee.com/oY5Nk8GHK" target = "_blank" > < img src = "https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt = "Buy Me A Coffee" style = "height: auto !important;width: auto !important;" > < / a > < a href = "https://discord.gg/HM5uUKU" rel = "noopener" > < img class = "alignnone" title = "theme.park!" src = "https://img.shields.io/badge/chat-Discord-blue.svg?style=for-the-badge&logo=discord" alt = "" height = "37" / > < / a >
2019-07-17 17:35:58 +02:00
< / a > < a href = "https://technicalramblings.com/" rel = "noopener" > < img class = "alignnone" title = "technicalramblings!" src = "https://img.shields.io/badge/blog-technicalramblings.com-informational.svg?style=for-the-badge" alt = "" height = "37" / > < / a >
2019-01-07 20:11:10 +01:00
< br / >
< br / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/sonarrv3.png" alt = "Screen Shot 1" width = "49.15%" / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/grafana-1.png" alt = "Screen Shot 2" width = "49.15%" / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plexorg/plexorg.png" alt = "Screen Shot 3" width = "49.15%" / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plpp/plpp.png" alt = "Screen Shot 4" width = "49.15%" / >
< / p >
2018-08-13 22:06:14 +02:00
2019-08-01 17:21:33 +02:00
# Setup
2018-12-09 19:42:02 +01:00
2019-08-25 23:15:45 +02:00
All apps have 5 themes to choose from.
2019-07-31 19:54:55 +02:00
`https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css`
```
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 23:15:45 +02:00
space-gray.css
2019-07-31 19:54:55 +02:00
```
2019-07-31 19:55:32 +02:00
Example: `https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css`
2018-12-16 00:24:38 +01:00
2019-07-31 19:54:55 +02: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 or a browser addon called Stylus.
2019-08-03 14:41:23 +02:00
## Subfilter method
2019-08-04 14:21:49 +02:00
### Nginx
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 > '
2019-07-28 15:52:51 +02:00
'< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css" >
2018-12-16 00:38:41 +01:00
< / head > ';
sub_filter_once on;
2018-12-09 19:42:02 +01:00
```
2019-08-03 17:47:05 +02:00
Where `APP_NAME` is the app you want to theme and `THEME.css` is the name of the theme. e.g. `aquamarine.css`
2018-12-16 02:25:53 +01:00
2019-08-04 14:21:49 +02:00
#### Example:
2018-12-09 19:42:02 +01:00
```nginx
2019-08-04 14:21:49 +02:00
location /sonarr {
proxy_pass http://localhost:8989/sonarr;
2018-12-09 19:42:02 +01:00
include /config/nginx/proxy.conf;
2018-12-16 00:38:41 +01:00
proxy_set_header Accept-Encoding "";
sub_filter
'< / head > '
2019-08-04 14:21:49 +02:00
'< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css" >
2018-12-16 00:38:41 +01:00
< / head > ';
sub_filter_once on;
2018-12-09 19:42:02 +01:00
}
```
2019-08-04 14:21:49 +02:00
### Apache (Untested)
```apache
AddOutputFilterByType SUBSTITUTE text/html
Substitute 's|< / head > '< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css" >
< / head > ';|'
```
#### Example:
```apache
< Location / sonarr >
ProxyPass http://localhost:8989/sonarr
ProxyPassReverse http://localhost:8989/sonarr
AddOutputFilterByType SUBSTITUTE text/html
Substitute 's|< / head > '< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css" >
< / head > ';|'
< / Location >
```
2018-12-09 19:42:02 +01:00
2019-08-03 17:47:05 +02:00
## Stylus method
2019-08-03 14:41:23 +02:00
Stylus is a browser extention that can inject custom css to the webpage of your choosing.
2019-07-31 19:54:55 +02:00
Add this in the style page:
```css
@import "https://gilbn.github.io/theme.park/CSS/themes/< APP_NAME > /THEME.css";
```
Example: `@import "https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css";`
Link to Chrome extention: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
Link to Firefox extention: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
2019-07-28 17:29:37 +02:00
## [Feature requests](https://feathub.com/gilbN/theme.park)
[![Feature Requests ](https://feathub.com/gilbN/theme.park?format=svg )](http://feathub.com/gilbN/theme.park)
2019-06-05 16:59:16 +02:00
2019-07-28 15:52:51 +02:00
## Current themes in the repo:
< ul >
2019-07-28 16:07:17 +02:00
< li > < a href = "https://github.com/gilbN/theme.park#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Sonarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Radarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Lidarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Bazarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park#plex-themes" > Plex< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#ombi-themes" > Ombi< / a > < / li >
2019-08-21 01:12:18 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#tautulli-themes" > Tautulli< / a > < / li >
2019-07-28 16:07:17 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#organizr-hotline-and-marine-theme" > Organizr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#grafana-themes" > Grafana< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#sabnzbd-themes" > Sabnzbd< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#nzbget-themes" > Nzbget< / a > < / li >
2019-08-31 21:27:33 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#nzbhydra2-themes" > NZBHydra2< / a > < / li >
2019-08-24 15:16:24 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#deluge-themes" > Deluge< / a > < / li >
2019-08-31 17:46:50 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#qbittorrent-themes" > qBittorrent< / a > < / li >
2019-07-28 16:07:17 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#guacamole-themes" > Guacamole< / a > < / li >
2019-09-01 01:41:02 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#rutorrent-themes" > ruTorrent< / a > < / li >
2019-07-28 16:07:17 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#netdata-themes" > Netdata< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#jackett-themes" > Jackett< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#html5-speedtest-themes" > html5speedtest< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#filebrowser-themes" > Filebrowser< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#monitorr-themes" > Monitorr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#logarr-alpha-version-themes" > Logarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#php-library-presenter-themes" > PLPP< / a > < / li >
2019-09-01 17:26:15 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/blob/master/README.md#synclounge-themes" > Synclounge< / a > < / li >
2019-07-28 15:52:51 +02:00
< / ul >
2018-12-16 00:24:38 +01:00
***
2019-06-13 22:53:52 +02:00
# Organizr Hotline and Marine theme
Custom [Organizr ](https://github.com/causefx/Organizr/ ) themes.
< p align = "center" >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-hotline-theme2.png" alt = "Screen Shot 1" width = "49.15%" / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-marine-theme2.png" alt = "Screen Shot 2" width = "49.15%" / >
2019-06-14 20:44:41 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-hotline-theme-login.png" alt = "Screen Shot 3" width = "49.15%" / >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-marine-theme-login.png" alt = "Screen Shot 4" width = "49.15%" / >
2019-06-13 22:53:52 +02:00
< / p >
2019-09-01 17:35:37 +02:00
2019-07-23 19:27:48 +02:00
Aquamarine are the colors from https://heimdall.site that I fell in love with.
2019-07-23 19:27:03 +02:00
All themes are highly customizable in regards of which radial gradient color combination you want.
2019-06-13 22:53:52 +02:00
2019-06-17 00:02:40 +02:00
#### Installation: Themes can be found in the "Theme Marketplace" in Organizr.
2019-06-13 22:53:52 +02:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-hotline-theme.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-hotline-theme-login.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-marine-theme.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr-themes/organizr-marine-theme-login.png" > < / img >
< / p >
< / details >
2019-07-28 16:01:14 +02:00
***
# Ombi Themes
2019-09-01 17:35:37 +02:00
Custom [Ombi ](https://github.com/tidusjar/Ombi ) CSS.
2019-07-28 16:01:14 +02:00
**Install by adding `@import "https://gilbn.github.io/theme.park/CSS/themes/ombi/THEME_NAME.css";` in custom css**
```
https://gilbn.github.io/theme.park/CSS/themes/ombi/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 16:01:14 +02:00
```
2019-08-04 11:15:33 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/ombi/ombi.gif)
2019-06-13 22:53:52 +02:00
***
2019-07-28 16:04:28 +02:00
# Jackett Themes
2019-06-13 22:53:52 +02:00
2019-09-01 17:35:37 +02:00
Custom [Jackett ](https://github.com/Jackett/Jackett ) CSS.
2019-07-28 16:04:28 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/jackett/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 16:04:28 +02:00
```
2019-08-04 11:15:33 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/jackett/jackett.gif)
2019-07-28 16:04:28 +02:00
***
2019-07-28 15:52:51 +02:00
# PHP Library Presenter Themes
2018-12-16 00:24:38 +01:00
2019-09-01 17:35:37 +02:00
Custom [PLPP ](https://github.com/Tensai75/plpp ) CSS.
2018-12-16 00:24:38 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plpp/plpp.gif)
2018-12-16 00:24:38 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/plpp/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2018-12-16 00:24:38 +01:00
2018-12-09 19:42:02 +01:00
***
2019-07-28 16:02:57 +02:00
# Guacamole Themes
2018-12-08 01:13:29 +01:00
2019-09-01 17:35:37 +02:00
Custom [Guacamole ](https://guacamole.apache.org/ ) CSS.
2018-12-08 01:13:29 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/guacorg/guacamole.gif)
2018-12-08 01:13:29 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/guacamole/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
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
***
2019-07-28 15:52:51 +02:00
# Plex Themes
2018-12-07 21:44:34 +01:00
2019-09-01 17:35:37 +02:00
Custom [Plex ](https://plex.tv ) CSS.
2018-12-07 21:44:34 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plexorg/plex.gif)
2018-12-07 21:44:34 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/plex/XXX.css
aquamarine.css
hotline.css
dark.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2018-12-07 21:44:34 +01:00
***
2018-08-16 14:17:46 +02:00
2019-07-28 15:52:51 +02:00
# Sonarr v2/v3 - Radarr - Lidarr - Bazarr Themes
2018-08-18 00:37:51 +02:00
2019-09-01 17:35:37 +02: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.
2018-12-09 03:58:07 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/orgarr.gif)
2018-12-09 03:58:07 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/sonarr/XXX.css
https://gilbn.github.io/theme.park/CSS/themes/radarr/XXX.css
https://gilbn.github.io/theme.park/CSS/themes/lidarr/XXX.css
https://gilbn.github.io/theme.park/CSS/themes/bazarr/XXX.css
aquamarine.css
hotline.css
plex.css
dark.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2018-08-18 00:37:51 +02:00
2019-07-28 15:52:51 +02:00
Thank you iFelix18 for doing all the hard work on v2! :)
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
***
2019-07-28 15:52:51 +02:00
# NZBGet Themes
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
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbget/nzbget.gif)
2018-12-16 02:20:21 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/nzbget/XXX.css
aquamarine.css
hotline.css
plex.css
dark.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
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
2019-07-28 15:55:09 +02:00
# SABnzbd Themes
2019-03-07 23:01:15 +01:00
Custom CSS for [SABnzbd ](https://github.com/sabnzbd/sabnzbd )
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/sabnzbd/sabnzbd.gif)
2019-03-07 23:01:15 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/sabnzbd/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2019-03-07 23:01:15 +01:00
2019-06-06 23:08:01 +02:00
**Note: SABnzbd theme must be set to `Glitter` **
2019-03-07 23:01:15 +01:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/sabnzbd/sabnzbd_dark_2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/sabnzbd/sabnzbd_dark_3.png" > < / img >
< / p >
< / details >
***
2019-07-28 15:52:51 +02:00
# Grafana Themes
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
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/grafana.gif)
2018-12-16 01:21:08 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/grafana/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 17:23:59 +02:00
organizr-dashboard.css
2019-07-28 15:52:51 +02:00
```
2019-07-24 18:12:30 +02:00
2019-07-28 15:52:51 +02:00
#### For panel integration on the Organizr homepage you can use `organizr-dashboard.css` if you use the Plex theme in Organizr. The theme is an "internal" theme that is meant to be used in an Organizr iframe as the background is set to transparent.
NOTE: When viewing Grafana in Organizr iframe using `organizr-dashboard.css` 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 grafana organizr homepage integration and one for the regular grafana theme.
2019-07-24 18:12:30 +02:00
2019-01-19 16:20:08 +01:00
### Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/
2018-08-13 22:06:14 +02:00
2019-04-20 22:50:15 +02:00
![](https://technicalramblings.com/wp-content/uploads/2019/01/orgdash.jpg)
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.
2019-07-28 17:23:59 +02:00
![](https://i.imgur.com/pVSKUzi.png)
2018-12-23 01:14:27 +01:00
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
2019-01-18 19:11:37 +01:00
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 >
***
2019-07-28 15:52:51 +02:00
# Netdata Themes
2018-08-13 22:06:14 +02:00
2019-09-01 17:35:37 +02:00
Custom [Netdata ](https://github.com/firehol/netdata ) CSS.
2018-08-13 22:06:14 +02:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/netorg/netdata.gif)
2018-12-16 01:48:18 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/netdata/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
organizr-dashboard.css
```
2018-08-13 22:06:14 +02:00
2019-07-28 15:52:51 +02:00
#### The `organizr-dashboard.css` theme is an "internal" theme that is meant to be used in an Organizr iframe as the background is set to transparent. [The theme can be used to integrate Netadata on the Organizr Homepage](https://technicalramblings.com/blog/spice-up-your-homepage/)
2019-04-15 17:05:48 +02:00
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
***
2019-07-28 15:52:51 +02:00
# Monitorr Themes
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
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/monitorg/monitorr.gif)
2018-08-13 22:06:14 +02:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/monitorr/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
organizr-dashboard.css
```
#### The `organizr-dashboard.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` for Organizr homepage integration.
2019-01-27 11:05:22 +01:00
**NOTE:**
2019-07-28 15:52:51 +02:00
When viewing monitorr in Organizr iframe using `organizr-dashboard.css` 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 monitorr organizr homepage integration 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/organizr-dashboard.css";` in the monitorr custom 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
2019-07-28 15:52:51 +02:00
@import "https://gilbn.github.io/theme.park/CSS/themes/monitorr/THEME_NAME.css";
2018-08-13 22:06:14 +02:00
```
And add this in custom HTML in Organizr:
```css
2019-01-18 19:11:37 +01:00
< div id = "announcementRow" class = "row" > < h4 class = "pull-left" > < span > Monitorr< / span > < / h4 > < hr class = "hidden-xs" > < / div >
2019-04-27 17:01:12 +02:00
< div style = "overflow:hidden; height:260px; width:calc(100% + 39px); -webkit-overflow-scrolling: touch; overflow-y: scroll;" >
2019-01-18 19:11:37 +01:00
< iframe class = "iframe" frameborder = "0" src = "https://monitorr.domain.com/index.min.php" > < / iframe >
2018-08-13 22:06:14 +02:00
< / div >
```
2019-01-06 19:13:45 +01:00
2019-03-11 21:00:43 +01:00
***
2019-07-28 16:05:47 +02:00
# Logarr alpha version Themes
2019-06-22 03:32:51 +02:00
2019-09-01 17:35:37 +02:00
Custom [Logarr ](https://github.com/Monitorr/logarr/tree/alpha ) CSS.
2019-06-22 03:32:51 +02:00
2019-08-04 13:27:10 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/logarr/logarr.gif)
2019-06-22 03:32:51 +02:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/logarr/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2019-06-22 03:32:51 +02:00
2019-06-22 03:53:21 +02:00
***
2019-06-22 03:32:51 +02:00
2019-07-28 16:05:47 +02:00
# Filebrowser Themes
2019-03-11 21:00:43 +01:00
2019-09-01 17:35:37 +02:00
Custom [Filebrowser ](https://github.com/filebrowser/filebrowser ) CSS.
2019-03-11 21:00:43 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/filebrowser/filebrowser.gif)
2019-03-11 21:00:43 +01:00
Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css
**https://github.com/Archmonger/Blackberry-Themes**
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/filebrowser/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2019-03-11 21:00:43 +01:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/filebrowser/filebrowser2.png" > < / img >
< / p >
< / details >
2019-03-25 19:43:14 +01:00
***
2019-07-28 16:05:47 +02:00
# HTML5 Speedtest Themes
2019-03-25 19:43:14 +01:00
2019-09-01 17:35:37 +02:00
Custom [HTML5 Speedtest ](https://github.com/adolfintel/speedtest ) CSS.
2019-03-25 19:43:14 +01:00
2019-08-04 13:25:37 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/html5speedtest/speedtest.gif)
2019-03-25 19:43:14 +01:00
2019-07-28 15:52:51 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/html5speedtest/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-07-28 15:52:51 +02:00
```
2019-03-25 19:43:14 +01:00
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/html5speedtest/html5speedtest_dark.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/html5speedtest/html5speedtest_plex.png" > < / img >
< / p >
< / details >
2018-12-16 00:39:20 +01:00
***
2019-08-21 01:01:07 +02:00
# Tautulli Themes
2019-09-01 17:35:37 +02:00
Custom [Tautulli ](https://github.com/Tautulli/Tautulli ) CSS.
2019-08-21 01:01:07 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/tautulli/tautulli.gif)
```
https://gilbn.github.io/theme.park/CSS/themes/tautulli/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
2019-08-25 12:07:55 +02:00
space-gray.css
2019-08-21 01:01:07 +02:00
```
2019-08-24 15:16:24 +02:00
***
# Deluge Themes
2019-09-01 17:35:37 +02:00
Custom [Deluge ](https://github.com/deluge-torrent/deluge ) CSS.
2019-08-24 15:16:24 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/deluge/deluge.gif)
2019-08-21 01:01:07 +02:00
2019-08-24 15:41:45 +02:00
Based on https://github.com/halianelf/deluge-dark @halianelf Thanks for making the job easier!
2019-08-24 15:16:24 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/deluge/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css
```
2019-08-31 15:26:48 +02:00
***
# qBittorrent Themes
2019-09-01 17:35:37 +02:00
Custom [qBitorrent ](https://github.com/qbittorrent/qBittorrent ) CSS.
2019-08-31 15:26:48 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbittorrent.gif)
2019-09-03 17:13:13 +02:00
NOTE: You need to change or remove the CSP header.
2019-09-01 18:53:57 +02:00
Add this in your reverse proxy:
```nginx
proxy_hide_header "x-webkit-csp";
proxy_hide_header "content-security-policy";
```
2019-08-31 15:26:48 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/qbittorrent/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css
```
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbit1.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbit2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbit3.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbit4.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/qbittorrent/qbit5.png" > < / img >
< / p >
< / details >
2019-08-31 21:28:58 +02:00
2019-09-01 10:17:20 +02:00
***
2019-09-01 01:41:02 +02:00
# ruTorrent Themes
2019-09-01 17:35:37 +02:00
Custom [ruTorrent ](https://github.com/Novik/ruTorrent ) CSS.
2019-09-01 01:41:02 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent.gif)
2019-09-01 17:18:17 +02:00
**Theme needs to be `Standard` in settings!**
2019-09-01 01:41:02 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/rutorrent/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css
```
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent1.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent3.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent4.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/rutorrent/rutorrent5.png" > < / img >
< / p >
< / details >
2019-09-01 01:45:44 +02:00
2019-09-01 10:17:20 +02:00
***
2019-08-31 21:27:33 +02:00
# NZBhydra2 Themes
2019-09-01 17:35:37 +02:00
Custom [NZBHydra ](https://github.com/theotherp/nzbhydra2 ) CSS.
2019-08-31 21:27:33 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra2.gif)
2019-08-31 15:26:48 +02:00
2019-08-31 21:27:33 +02:00
```
https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css
```
### Screenshots
< details > < summary > Expand< / summary >
< p >
2019-08-31 21:29:56 +02:00
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra1.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra3.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra4.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra5.png" > < / img >
2019-08-31 21:27:33 +02:00
< / p >
< / details >
2019-09-01 17:26:15 +02:00
***
# Synclounge Themes
2019-09-01 17:35:37 +02:00
Custom [Synclounge ](https://github.com/samcm/SyncLounge ) CSS.
2019-09-01 17:26:15 +02:00
![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge.gif)
```
https://gilbn.github.io/theme.park/CSS/themes/synclounge/XXX.css
aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css
```
### Screenshots
< details > < summary > Expand< / summary >
< p >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge1.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge2.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge3.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge4.png" > < / img >
< img src = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/synclounge/synclounge5.png" > < / img >
< / p >
< / details >
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 )