Updated Setup (markdown)
GilbN
parent
59e0d960b9
commit
99d3a97772
89
Setup.md
89
Setup.md
@ -1,6 +1,23 @@
|
||||
## Setup
|
||||
## Current themes in the repo:
|
||||
<ul>
|
||||
<li><a href="t#subfilter-method">Subfilter Method</a></li>
|
||||
<li><a href="#stylus-method">Stylus Method</a></li>
|
||||
<li><a href="#blackberry-theme-installer-method">Blackberry Theme Installer</a></li>
|
||||
</ul>
|
||||
|
||||
### Subfilter
|
||||
All apps have 5 themes to choose from.
|
||||
`https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.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
|
||||
|
||||
<https://blog.linuxserver.io/2019/04/25/letsencrypt-nginx-starter-guide/>
|
||||
|
||||
**Add this to your reverse proxy:**
|
||||
### Nginx
|
||||
Add this to your reverse proxy:
|
||||
|
||||
```nginx
|
||||
proxy_set_header Accept-Encoding "";
|
||||
sub_filter
|
||||
'</head>'
|
||||
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/CUSTOM_CSS.css">
|
||||
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css">
|
||||
</head>';
|
||||
sub_filter_once on;
|
||||
```
|
||||
**Where `CUSTOM_CSS.css` is the name of the theme you want!**
|
||||
|
||||
<https://github.com/gilbN/theme.park/tree/master/CSS/themes>
|
||||
|
||||
**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
|
||||
'</head>'
|
||||
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/plpporg.css">
|
||||
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css">
|
||||
</head>';
|
||||
sub_filter_once on;
|
||||
}
|
||||
}
|
||||
```
|
||||
**For Apache try this: (UNTESTED)**
|
||||
|
||||
### 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/CUSTOM_CSS.css">
|
||||
Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css">
|
||||
</head>';|'
|
||||
```
|
||||
**Like so**
|
||||
```
|
||||
|
||||
#### 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/orgarr.css">
|
||||
Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css">
|
||||
</head>';|'
|
||||
</Location>
|
||||
```
|
||||
|
||||
## 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/<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/
|
||||
|
||||
## 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");
|
||||
});
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user