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-09-07 09:18: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 / >
2019-09-18 00:28:28 +02:00
< a href = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/ombi/ombi1.png" rel = "noopener" > < img src = "/Screenshots/ombi/ombi1.png" alt = "Screen Shot 1" width = "49.15%" / > < / a >
< a href = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/sonarr/sonarr2.jpg" rel = "noopener" > < img src = "/Screenshots/sonarr/sonarr2.jpg" alt = "Screen Shot 2" width = "49.15%" / > < / a >
< a href = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/deluge/deluge1.png" rel = "noopener" > < img src = "/Screenshots/deluge/deluge1.png" alt = "Screen Shot 3" width = "49.15%" / > < / a >
< a href = "https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plexorg/plex1.jpg" rel = "noopener" > < img src = "/Screenshots/plexorg/plex1.jpg" alt = "Screen Shot 4" width = "49.15%" / > < / a >
2019-01-07 20:11:10 +01:00
< / p >
2018-08-13 22:06:14 +02:00
2019-09-22 18:36:41 +02:00
# Themes
![](/Screenshots/aquamarine_banner.png)
![](/Screenshots/hotline_banner.png)
![](/Screenshots/spacegray_banner.png)
![](/Screenshots/dark_banner.png)
![](/Screenshots/plex_banner.png)
2019-08-01 17:21:33 +02:00
# Setup
2018-12-09 19:42:02 +01:00
2019-09-07 09:18:58 +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`
2019-09-22 18:36:41 +02:00
```css
2019-07-31 19:54:55 +02:00
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
2019-09-07 09:18:58 +02:00
AddOutputFilterByType SUBSTITUTE text/html
2019-08-04 14:21:49 +02:00
Substitute 's|< / head > '< link rel = "stylesheet" type = "text/css" href = "https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css" >
< / head > ';|'
```
2019-09-07 09:18:58 +02:00
2019-08-04 14:21:49 +02:00
#### Example:
```apache
< Location / sonarr >
ProxyPass http://localhost:8989/sonarr
ProxyPassReverse http://localhost:8989/sonarr
2019-09-07 09:18:58 +02:00
AddOutputFilterByType SUBSTITUTE text/html
2019-08-04 14:21:49 +02:00
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-09-07 09:18:58 +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-09-20 03:48:17 +02:00
## Blackberry Theme Installer method
[Blackberry Themes ](https://github.com/Archmonger/Blackberry-Themes ) provides a easy to use method of using JS to theme your Organizr tabs. This will only work if your Organizr tab is on a subdirectory (does not work with subdomains). These themes will only be applied when viewed within Organizr.
```js
$.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/theme_installer.js', function(){
// First variable is your Organizr tab name. Second variable is a link to the theme you want to apply.
themeInstaller("< TAB_NAME > ","https://gilbn.github.io/theme.park/CSS/themes/< APP_NAME > /< THEME_NAME > .css");
// You can also use this for multiple themes at once by simply calling themeInstaller again!
themeInstaller("< TAB_NAME > ","https://gilbn.github.io/theme.park/CSS/themes/< APP_NAME > /< THEME_NAME > .css");
});
```
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-09-07 09:18:58 +02:00
## Current themes in the repo:
2019-07-28 15:52:51 +02:00
< ul >
2019-09-22 18:36:41 +02:00
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Sonarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themeshttps://github.com/gilbN/theme.park/wiki/Themes#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Radarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Lidarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#sonarr-v2v3---radarr---lidarr---bazarr-themes" > Bazarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#plex-themes" > Plex< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#jellyfin-themes" > Jellyfin< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#ombi-themes" > Ombi< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#tautulli-themes" > Tautulli< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#organizr-hotline-and-marine-theme" > Organizr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#grafana-themes" > Grafana< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#sabnzbd-themes" > Sabnzbd< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#nzbget-themes" > Nzbget< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#nzbhydra2-themes" > NZBHydra2< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#deluge-themes" > Deluge< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#qbittorrent-themes" > qBittorrent< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#guacamole-themes" > Guacamole< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#rutorrent-themes" > ruTorrent< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#netdata-themes" > Netdata< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#jackett-themes" > Jackett< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#html5-speedtest-themes" > html5speedtest< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#filebrowser-themes" > Filebrowser< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#monitorr-themes" > Monitorr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#logarr-alpha-version-themes" > Logarr< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#php-library-presenter-themes" > PLPP< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#synclounge-themes" > Synclounge< / a > < / li >
< li > < a href = "https://github.com/gilbN/theme.park/wiki/Themes#the-lounge-themes" > The Lounge< / a > < / li >
2019-07-28 15:52:51 +02:00
< / ul >
2019-09-11 23:51:16 +02:00
## Wiki [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes)
2018-12-16 00:24:38 +01:00
***
2019-09-05 12:10:01 +02:00
2018-12-16 00:39:20 +01:00
### Honourable mentions:
2019-09-22 18:36:41 +02:00
[Archmonger/Blackberry-Themes ](https://github.com/Archmonger/Blackberry-Themes )
2018-12-16 00:39:20 +01:00
[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 )