-### 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