mirror of
https://github.com/gilbN/theme.park.git
synced 2024-10-27 06:12:54 +01:00
the readme is too damn long!
This commit is contained in:
parent
5c79ed5137
commit
0ad26efe28
776
README.md
776
README.md
@ -14,11 +14,19 @@
|
|||||||
<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>
|
<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>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
# Themes
|
||||||
|
|
||||||
|
![](/Screenshots/aquamarine_banner.png)
|
||||||
|
![](/Screenshots/hotline_banner.png)
|
||||||
|
![](/Screenshots/spacegray_banner.png)
|
||||||
|
![](/Screenshots/dark_banner.png)
|
||||||
|
![](/Screenshots/plex_banner.png)
|
||||||
|
|
||||||
# Setup
|
# Setup
|
||||||
|
|
||||||
All apps have 5 themes to choose from.
|
All apps have 5 themes to choose from.
|
||||||
`https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css`
|
`https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css`
|
||||||
```
|
```css
|
||||||
aquamarine.css
|
aquamarine.css
|
||||||
hotline.css
|
hotline.css
|
||||||
dark.css
|
dark.css
|
||||||
@ -105,750 +113,42 @@ $.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/theme_install
|
|||||||
|
|
||||||
## Current themes in the repo:
|
## Current themes in the repo:
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#sonarr-v2v3---radarr---lidarr---bazarr-themes">Sonarr</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#sonarr-v2v3---radarr---lidarr---bazarr-themes">Sonarr</a></li>
|
||||||
<li><a href="#sonarr-v2v3---radarr---lidarr---bazarr-themes">Radarr</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="#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">Lidarr</a></li>
|
||||||
<li><a href="#sonarr-v2v3---radarr---lidarr---bazarr-themes">Bazarr</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="#plex-themes">Plex</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#plex-themes">Plex</a></li>
|
||||||
<li><a href="#jellyfin-themes">Jellyfin</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#jellyfin-themes">Jellyfin</a></li>
|
||||||
<li><a href="#ombi-themes">Ombi</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#ombi-themes">Ombi</a></li>
|
||||||
<li><a href="#tautulli-themes">Tautulli</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#tautulli-themes">Tautulli</a></li>
|
||||||
<li><a href="#organizr-hotline-and-marine-theme">Organizr</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#organizr-hotline-and-marine-theme">Organizr</a></li>
|
||||||
<li><a href="#grafana-themes">Grafana</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#grafana-themes">Grafana</a></li>
|
||||||
<li><a href="#sabnzbd-themes">Sabnzbd</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#sabnzbd-themes">Sabnzbd</a></li>
|
||||||
<li><a href="#nzbget-themes">Nzbget</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#nzbget-themes">Nzbget</a></li>
|
||||||
<li><a href="#nzbhydra2-themes">NZBHydra2</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#nzbhydra2-themes">NZBHydra2</a></li>
|
||||||
<li><a href="#deluge-themes">Deluge</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#deluge-themes">Deluge</a></li>
|
||||||
<li><a href="#qbittorrent-themes">qBittorrent</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#qbittorrent-themes">qBittorrent</a></li>
|
||||||
<li><a href="#guacamole-themes">Guacamole</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#guacamole-themes">Guacamole</a></li>
|
||||||
<li><a href="#rutorrent-themes">ruTorrent</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#rutorrent-themes">ruTorrent</a></li>
|
||||||
<li><a href="#netdata-themes">Netdata</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#netdata-themes">Netdata</a></li>
|
||||||
<li><a href="#jackett-themes">Jackett</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#jackett-themes">Jackett</a></li>
|
||||||
<li><a href="#html5-speedtest-themes">html5speedtest</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#html5-speedtest-themes">html5speedtest</a></li>
|
||||||
<li><a href="#filebrowser-themes">Filebrowser</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#filebrowser-themes">Filebrowser</a></li>
|
||||||
<li><a href="#monitorr-themes">Monitorr</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#monitorr-themes">Monitorr</a></li>
|
||||||
<li><a href="#logarr-alpha-version-themes">Logarr</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#logarr-alpha-version-themes">Logarr</a></li>
|
||||||
<li><a href="#php-library-presenter-themes">PLPP</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#php-library-presenter-themes">PLPP</a></li>
|
||||||
<li><a href="#synclounge-themes">Synclounge</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#synclounge-themes">Synclounge</a></li>
|
||||||
<li><a href="#the-lounge-themes">The Lounge</a></li>
|
<li><a href="https://github.com/gilbN/theme.park/wiki/Themes#the-lounge-themes">The Lounge</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
## Wiki [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes)
|
## Wiki [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes)
|
||||||
***
|
***
|
||||||
# Organizr Hotline and Marine theme
|
|
||||||
Custom [Organizr](https://github.com/causefx/Organizr/) themes.
|
|
||||||
<p align="center">
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-hotline-theme2.png" alt="Screen Shot 1" width="49.15%" />
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-marine-theme2.png" alt="Screen Shot 2" width="49.15%" />
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-hotline-theme-login.png" alt="Screen Shot 3" width="49.15%" />
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-marine-theme-login.png" alt="Screen Shot 4" width="49.15%" />
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-hotline-theme.png"></img>
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-hotline-theme-login.png"></img>
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-marine-theme.png"></img>
|
|
||||||
<img src="/Screenshots/organizr-themes/organizr-marine-theme-login.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/guacorg/guac-1.png"></img>
|
|
||||||
<img src="/Screenshots/guacorg/guac-2.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
```
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# Jellyfin Themes
|
|
||||||
|
|
||||||
Custom [Jellyfin](https://github.com/jellyfin/jellyfin) CSS.
|
|
||||||
|
|
||||||
![](/Screenshots/jellyfin/jellyfin.gif)
|
|
||||||
|
|
||||||
```
|
|
||||||
https://gilbn.github.io/theme.park/CSS/themes/jellyfin/XXX.css
|
|
||||||
aquamarine.css
|
|
||||||
hotline.css
|
|
||||||
plex.css
|
|
||||||
dark.css
|
|
||||||
space-gray.css
|
|
||||||
```
|
|
||||||
|
|
||||||
### Screenshots
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/jellyfin/jellyfin1.jpg"></img>
|
|
||||||
<img src="/Screenshots/jellyfin/jellyfin2.png"></img>
|
|
||||||
<img src="/Screenshots/jellyfin/jellyfin3.jpg"></img>
|
|
||||||
<img src="/Screenshots/jellyfin/jellyfin4.png"></img>
|
|
||||||
<img src="/Screenshots/jellyfin/jellyfin5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/orgarr/sonarrv3-2.png"></img>
|
|
||||||
<img src="/Screenshots/orgarr/sonarrv3-3.png"></img>
|
|
||||||
<img src="/Screenshots/orgarr/1.jpg"></img>
|
|
||||||
<img src="/Screenshots/orgarr/2.jpg"></img>
|
|
||||||
<img src="/Screenshots/orgarr/3.jpg"></img>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/nzbget/nzbget1.jpg"></img>
|
|
||||||
<img src="/Screenshots/nzbget/nzbget2.jpg"></img>
|
|
||||||
<img src="/Screenshots/nzbget/nzbget-split-2.png"></img>
|
|
||||||
<img src="/Screenshots/nzbget/nzbget3.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/sabnzbd/sabnzbd_dark_2.png"></img>
|
|
||||||
<img src="/Screenshots/sabnzbd/sabnzbd_dark_3.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/graforg/1.jpg"></img>
|
|
||||||
<img src="/Screenshots/graforg/2.jpg"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Custom HTML for Organizr Homepage
|
|
||||||
|
|
||||||
|
|
||||||
![](/Screenshots/graforg/3.jpg)
|
|
||||||
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
|
|
||||||
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
|
|
||||||
<h5><span>Panel name</span></h5>
|
|
||||||
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/>**
|
|
||||||
```
|
|
||||||
The URL can be found by clicking **share** on the panel you want to add.
|
|
||||||
|
|
||||||
<img src="/Screenshots/graforg/4.png"></img>
|
|
||||||
|
|
||||||
If you dont want the ***Panel name*** text, just remove the `<h5><span>` line entirely.
|
|
||||||
|
|
||||||
```css
|
|
||||||
<style>
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: transparent;
|
|
||||||
margin-top:10px;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.flex-child {
|
|
||||||
flex: 1 1 1 1;
|
|
||||||
padding: 1px 1px 1px 1px;
|
|
||||||
}
|
|
||||||
#flex-grafanadwidget1 {
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
#flex-grafanadwidget2 {
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
#flex-grafanadwidget3 {
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
#flex-grafanadwidget4 {
|
|
||||||
min-width: 25%;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 1374px) {
|
|
||||||
#flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
|
|
||||||
min-width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 640px) {
|
|
||||||
#flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.flex-child>h5 {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
#announcementRow {
|
|
||||||
background-color:transparent !important;
|
|
||||||
}
|
|
||||||
.flex-child>h5 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
font-size: 15px;important;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
.overflowhider {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#grafanadwidget1 {
|
|
||||||
position: relative;
|
|
||||||
height: calc(250px);
|
|
||||||
width: calc(100%);
|
|
||||||
}
|
|
||||||
#grafanadwidget2 {
|
|
||||||
position: relative;
|
|
||||||
height:calc(250px);
|
|
||||||
width:calc(100%);
|
|
||||||
}
|
|
||||||
#grafanadwidget3 {
|
|
||||||
position: relative;
|
|
||||||
height: calc(250px);
|
|
||||||
width: calc(100%);
|
|
||||||
}
|
|
||||||
#grafanadwidget4 {
|
|
||||||
position: relative;
|
|
||||||
height:calc(250px);
|
|
||||||
width:calc(100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="announcementRow" class="row">
|
|
||||||
<div class="content-box flex">
|
|
||||||
<div class="flex-child" id="flex-grafanadwidget1">
|
|
||||||
<h5><span>Panel name</span></h5>
|
|
||||||
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-child box-shadow" id="flex-grafanadwidget2">
|
|
||||||
<h5><span>Panel name</span></h5>
|
|
||||||
<div class="overflowhider"><embed id="grafanadwidget2" src='https://graforg.domain.com/panel-embed-link' /></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-child" id="flex-grafanadwidget3">
|
|
||||||
<h5><span>Panel name</span></h5>
|
|
||||||
<div class="overflowhider"><embed id="grafanadwidget3" src='https://graforg.domain.com/panel-embed-link'/></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-child box-shadow" id="flex-grafanadwidget4">
|
|
||||||
<h5><span>Panel name</span></h5>
|
|
||||||
<div class="overflowhider"><embed id="grafanadwidget4" src='https://graforg.domain.com/panel-embed-link' /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/netorg/1.jpg"></img>
|
|
||||||
<img src="/Screenshots/netorg/2.jpg"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/monitorg/2.jpg"></img>
|
|
||||||
<img src="/Screenshots/monitorg/3.jpg"></img>
|
|
||||||
<img src="/Screenshots/monitorg/4.jpg"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
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
|
|
||||||
<div id="announcementRow" class="row"><h4 class="pull-left"><span>Monitorr</span></h4><hr class="hidden-xs"></div>
|
|
||||||
<div style="overflow:hidden; height:260px; width:calc(100% + 39px); -webkit-overflow-scrolling: touch; overflow-y: scroll;">
|
|
||||||
<iframe class="iframe" frameborder="0" src="https://monitorr.domain.com/index.min.php"></iframe>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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**
|
|
||||||
|
|
||||||
Can also be installed locally: https://filebrowser.xyz/configuration/custom-branding
|
|
||||||
|
|
||||||
In the `custom.css` file add `@import "https://gilbn.github.io/theme.park/CSS/themes/filebrowser/<THEME-NAME>.css";`
|
|
||||||
|
|
||||||
```
|
|
||||||
https://gilbn.github.io/theme.park/CSS/themes/filebrowser/XXX.css
|
|
||||||
aquamarine.css
|
|
||||||
hotline.css
|
|
||||||
dark.css
|
|
||||||
plex.css
|
|
||||||
space-gray.css
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Screenshots
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/filebrowser/filebrowser2.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/html5speedtest/html5speedtest_dark.png"></img>
|
|
||||||
<img src="/Screenshots/html5speedtest/html5speedtest_plex.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/qbittorrent/qbit1.png"></img>
|
|
||||||
<img src="/Screenshots/qbittorrent/qbit2.png"></img>
|
|
||||||
<img src="/Screenshots/qbittorrent/qbit3.png"></img>
|
|
||||||
<img src="/Screenshots/qbittorrent/qbit4.png"></img>
|
|
||||||
<img src="/Screenshots/qbittorrent/qbit5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/rutorrent/rutorrent1.png"></img>
|
|
||||||
<img src="/Screenshots/rutorrent/rutorrent2.png"></img>
|
|
||||||
<img src="/Screenshots/rutorrent/rutorrent3.png"></img>
|
|
||||||
<img src="/Screenshots/rutorrent/rutorrent4.png"></img>
|
|
||||||
<img src="/Screenshots/rutorrent/rutorrent5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/nzbhydra2/nzbhydra1.png"></img>
|
|
||||||
<img src="/Screenshots/nzbhydra2/nzbhydra2.png"></img>
|
|
||||||
<img src="/Screenshots/nzbhydra2/nzbhydra3.png"></img>
|
|
||||||
<img src="/Screenshots/nzbhydra2/nzbhydra4.png"></img>
|
|
||||||
<img src="/Screenshots/nzbhydra2/nzbhydra5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/synclounge/synclounge1.png"></img>
|
|
||||||
<img src="/Screenshots/synclounge/synclounge2.png"></img>
|
|
||||||
<img src="/Screenshots/synclounge/synclounge3.png"></img>
|
|
||||||
<img src="/Screenshots/synclounge/synclounge4.png"></img>
|
|
||||||
<img src="/Screenshots/synclounge/synclounge5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
***
|
|
||||||
# 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
|
|
||||||
<details><summary>Expand</summary>
|
|
||||||
<p>
|
|
||||||
<img src="/Screenshots/thelounge/thelounge1.png"></img>
|
|
||||||
<img src="/Screenshots/thelounge/thelounge2.png"></img>
|
|
||||||
<img src="/Screenshots/thelounge/thelounge3.png"></img>
|
|
||||||
<img src="/Screenshots/thelounge/thelounge4.png"></img>
|
|
||||||
<img src="/Screenshots/thelounge/thelounge5.png"></img>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Honourable mentions:
|
### Honourable mentions:
|
||||||
|
|
||||||
|
[Archmonger/Blackberry-Themes](https://github.com/Archmonger/Blackberry-Themes)
|
||||||
|
|
||||||
[leram84/layer.Cake](https://github.com/leram84/layer.Cake/)
|
[leram84/layer.Cake](https://github.com/leram84/layer.Cake/)
|
||||||
|
|
||||||
[rg9400/Cloud-Tautulli-Theme](https://github.com/rg9400/Cloud-Tautulli-Theme)
|
[rg9400/Cloud-Tautulli-Theme](https://github.com/rg9400/Cloud-Tautulli-Theme)
|
||||||
@ -858,5 +158,3 @@ space-gray.css
|
|||||||
[iFelix18/Darkerr](https://github.com/iFelix18/Darkerr)
|
[iFelix18/Darkerr](https://github.com/iFelix18/Darkerr)
|
||||||
|
|
||||||
[ydkmlt84/DarkerNZBget](https://github.com/ydkmlt84/DarkerNZBget)
|
[ydkmlt84/DarkerNZBget](https://github.com/ydkmlt84/DarkerNZBget)
|
||||||
|
|
||||||
[Archmonger/Blackberry-Themes](https://github.com/Archmonger/Blackberry-Themes)
|
|
||||||
|
BIN
Screenshots/aquamarine_banner.png
Normal file
BIN
Screenshots/aquamarine_banner.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 223 KiB |
BIN
Screenshots/dark_banner.png
Normal file
BIN
Screenshots/dark_banner.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
BIN
Screenshots/hotline_banner.png
Normal file
BIN
Screenshots/hotline_banner.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 215 KiB |
BIN
Screenshots/plex_banner.png
Normal file
BIN
Screenshots/plex_banner.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 248 KiB |
BIN
Screenshots/spacegray_banner.png
Normal file
BIN
Screenshots/spacegray_banner.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 221 KiB |
Loading…
Reference in New Issue
Block a user