A collection of themes/skins for use in conjunction with Organizr or standalone.

Buy Me A Coffee

Screen Shot 1 Screen Shot 2 Screen Shot 3 Screen Shot 4

# Setup All apps have 5 themes to choose from. `https://gilbn.github.io/theme.park/CSS/themes//.css` ``` aquamarine.css hotline.css dark.css plex.css space-gray.css ``` Example: `https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css` 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. ## Subfilter method ### Nginx Add this to your reverse proxy: ```nginx proxy_set_header Accept-Encoding ""; sub_filter '' ' '; sub_filter_once on; ``` Where `APP_NAME` is the app you want to theme and `THEME.css` is the name of the theme. e.g. `aquamarine.css` #### Example: ```nginx location /sonarr { proxy_pass http://localhost:8989/sonarr; include /config/nginx/proxy.conf; proxy_set_header Accept-Encoding ""; sub_filter '' ' '; sub_filter_once on; } ``` ### Apache (Untested) ```apache AddOutputFilterByType SUBSTITUTE text/html Substitute 's| ' ';|' ``` #### Example: ```apache ProxyPass http://localhost:8989/sonarr ProxyPassReverse http://localhost:8989/sonarr AddOutputFilterByType SUBSTITUTE text/html Substitute 's| ' ';|' ``` ## Stylus method Stylus is a browser extention that can inject custom css to the webpage of your choosing. Add this in the style page: ```css @import "https://gilbn.github.io/theme.park/CSS/themes//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/ ## [Feature requests](https://feathub.com/gilbN/theme.park) [![Feature Requests](https://feathub.com/gilbN/theme.park?format=svg)](http://feathub.com/gilbN/theme.park) ## Current themes in the repo: *** # Organizr Hotline and Marine theme Custom [Organizr](https://github.com/causefx/Organizr/) themes.

<<<<<<< HEAD Screen Shot 1 Screen Shot 2 Screen Shot 3 Screen Shot 4 ======= Screen Shot 1 Screen Shot 2 Screen Shot 3 Screen Shot 4 >>>>>>> dc08672102aaec165f6bec623ed510c6c0249044

Aquamarine are the colors from https://heimdall.site that I fell in love with. All themes are highly customizable in regards of which radial gradient color combination you want. #### Installation: Themes can be found in the "Theme Marketplace" in Organizr. ### Screenshots
Expand

*** # Ombi Themes Custom [Ombi](https://github.com/tidusjar/Ombi) CSS. **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 space-gray.css ``` ![](/Screenshots/ombi/ombi.gif) *** # Jackett Themes Custom [Jackett](https://github.com/Jackett/Jackett) CSS. ``` https://gilbn.github.io/theme.park/CSS/themes/jackett/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ![](/Screenshots/jackett/jackett.gif) *** # PHP Library Presenter Themes Custom [PLPP](https://github.com/Tensai75/plpp) CSS. ![](/Screenshots/plpp/plpp.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/plpp/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` *** # Guacamole Themes Custom [Guacamole](https://guacamole.apache.org/) CSS. ![](/Screenshots/guacorg/guacamole.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/guacamole/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # Plex Themes Custom [Plex](https://plex.tv) CSS. ![](/Screenshots/plexorg/plex.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/plex/XXX.css aquamarine.css hotline.css dark.css space-gray.css ``` *** # Sonarr v2/v3 - Radarr - Lidarr - Bazarr Themes 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. ![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/orgarr/orgarr.gif) ``` 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 space-gray.css ``` Thank you iFelix18 for doing all the hard work on v2! :) ### Screenshots
Expand

*** # NZBGet Themes Custom CSS for [Nzbget](https://github.com/nzbget/nzbget) ![](/Screenshots/nzbget/nzbget.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/nzbget/XXX.css aquamarine.css hotline.css plex.css dark.css space-gray.css ``` Thank you [ydkmlt84](https://github.com/ydkmlt84) for making the job easier :) ### Screenshots
Expand

*** # SABnzbd Themes Custom CSS for [SABnzbd](https://github.com/sabnzbd/sabnzbd) ![](/Screenshots/sabnzbd/sabnzbd.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/sabnzbd/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` **Note: SABnzbd theme must be set to `Glitter`** ### Screenshots
Expand

*** # Grafana Themes Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration and consistent UI. ![](/Screenshots/graforg/grafana.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/grafana/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css organizr-dashboard.css ``` #### 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. ### Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/ ![](https://technicalramblings.com/wp-content/uploads/2019/01/orgdash.jpg) ### **TIP:** 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://i.imgur.com/pVSKUzi.png) Check out my Varken dashboard here: https://grafana.com/dashboards/9558 ### Screenshots
Expand

### Custom HTML for Organizr Homepage ![](/Screenshots/graforg/3.jpg)
Expand Thank you [Fma965](https://gist.github.com/Fma965) for the base [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. If you dont want the ***Panel name*** text, just remove the `
` line entirely. ```css
Panel name
Panel name
Panel name
Panel name
```
*** # Netdata Themes Custom [Netdata](https://github.com/firehol/netdata) CSS. ![](/Screenshots/netorg/netdata.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/netdata/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css organizr-dashboard.css ``` #### 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/) ### Screenshots
Expand

### Custom HTML for Organizr Homepage *** # Monitorr Themes Custom [Monitorr](https://github.com/Monitorr/Monitorr) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration. ![](/Screenshots/monitorg/monitorr.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/monitorr/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css 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. **NOTE:** 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. ### Screenshots
Expand

Add this in the Monitorr custom css box: ```css @import "https://gilbn.github.io/theme.park/CSS/themes/monitorr/THEME_NAME.css"; ``` And add this in custom HTML in Organizr: ```css

Monitorr

``` *** # Logarr alpha version Themes Custom [Logarr](https://github.com/Monitorr/logarr/tree/alpha) CSS. ![](/Screenshots/logarr/logarr.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/logarr/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` *** # Filebrowser Themes Custom [Filebrowser](https://github.com/filebrowser/filebrowser) CSS. ![](/Screenshots/filebrowser/filebrowser.gif) Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css **https://github.com/Archmonger/Blackberry-Themes** ``` https://gilbn.github.io/theme.park/CSS/themes/filebrowser/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # HTML5 Speedtest Themes Custom [HTML5 Speedtest](https://github.com/adolfintel/speedtest) CSS. ![](/Screenshots/html5speedtest/speedtest.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/html5speedtest/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # Tautulli Themes Custom [Tautulli](https://github.com/Tautulli/Tautulli) CSS. ![](/Screenshots/tautulli/tautulli.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/tautulli/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` *** # Deluge Themes Custom [Deluge](https://github.com/deluge-torrent/deluge) CSS. ![](/Screenshots/deluge/deluge.gif) Based on https://github.com/halianelf/deluge-dark @halianelf Thanks for making the job easier! ``` https://gilbn.github.io/theme.park/CSS/themes/deluge/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` *** # qBittorrent Themes Custom [qBitorrent](https://github.com/qbittorrent/qBittorrent) CSS. ![](/Screenshots/qbittorrent/qbittorrent.gif) NOTE: You need to change or remove the CSP header. Add this in your reverse proxy: ```nginx proxy_hide_header "x-webkit-csp"; proxy_hide_header "content-security-policy"; ``` ``` https://gilbn.github.io/theme.park/CSS/themes/qbittorrent/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # ruTorrent Themes Custom [ruTorrent](https://github.com/Novik/ruTorrent) CSS. ![](/Screenshots/rutorrent/rutorrent.gif) **Theme needs to be `Standard` in settings!** ``` https://gilbn.github.io/theme.park/CSS/themes/rutorrent/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # NZBhydra2 Themes Custom [NZBHydra](https://github.com/theotherp/nzbhydra2) CSS. ![](/Screenshots/nzbhydra2/nzbhydra2.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

*** # Synclounge Themes Custom [Synclounge](https://github.com/samcm/SyncLounge) CSS. ![](/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
Expand

*** # The Lounge Themes Custom [The Lounge](https://github.com/thelounge/thelounge) CSS. ![](/Screenshots/thelounge/thelounge.gif) ``` https://gilbn.github.io/theme.park/CSS/themes/thelounge/XXX.css aquamarine.css hotline.css dark.css plex.css space-gray.css ``` ### Screenshots
Expand

### 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-Themes](https://github.com/Archmonger/Blackberry-Themes)