From 99d3a9777248a7f08a1d25b63049704670c1be9d Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 23 Sep 2019 22:18:12 +0200 Subject: [PATCH] Updated Setup (markdown) --- Setup.md | 103 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 66 insertions(+), 37 deletions(-) diff --git a/Setup.md b/Setup.md index 8b821bd..ed00a40 100644 --- a/Setup.md +++ b/Setup.md @@ -1,6 +1,23 @@ ## Setup +## Current themes in the repo: + -### Subfilter +All apps have 5 themes to choose from. +`https://gilbn.github.io/theme.park/CSS/themes//.css` +```css +aquamarine.css +hotline.css +dark.css +plex.css +space-gray.css +``` +Example: `https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css` + +## Subfilter method 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. @@ -8,60 +25,72 @@ As most of these apps doesn't have support for custom CSS you can get around th -**Add this to your reverse proxy:** +### Nginx +Add this to your reverse proxy: + ```nginx proxy_set_header Accept-Encoding ""; sub_filter '' -' +' '; sub_filter_once on; ``` -**Where `CUSTOM_CSS.css` is the name of the theme you want!** - - - -**Here is a complete example: ** +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 -# 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; - -#SSL settings - include /config/nginx/ssl.conf - -location / { - proxy_pass http://192.168.1.2:8701; +location /sonarr { + proxy_pass http://localhost:8989/sonarr; include /config/nginx/proxy.conf; - proxy_set_header Accept-Encoding ""; - sub_filter - '' - ' - '; - sub_filter_once on; + proxy_set_header Accept-Encoding ""; + sub_filter + '' + ' + '; + sub_filter_once on; } -} ``` -**For Apache try this: (UNTESTED)** + +### Apache (Untested) ```apache -AddOutputFilterByType SUBSTITUTE text/html - Substitute 's| ' +AddOutputFilterByType SUBSTITUTE text/html + Substitute 's| ' ';|' -``` -**Like so** + ``` + +#### Example: ```apache ProxyPass http://localhost:8989/sonarr ProxyPassReverse http://localhost:8989/sonarr -AddOutputFilterByType SUBSTITUTE text/html - Substitute 's| ' +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/ + +## 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("","https://gilbn.github.io/theme.park/CSS/themes//.css"); + + // You can also use this for multiple themes at once by simply calling themeInstaller again! + themeInstaller("","https://gilbn.github.io/theme.park/CSS/themes//.css"); +}); ``` \ No newline at end of file