A collection of themes/skins for use in conjunction with Organizr

Setup

Subfilter

As most of these apps doesn't have support for custom CSS you can get around that by using subfilter in Nginx.

Add this to your reverse proxy:

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">
</head>';
sub_filter_once on;

Where CUSTOM_CSS is the name of the theme. e.g. nzbget-plex.css

Here is a complete example:

Expand

# 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;
    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">
	</head>';
	sub_filter_once on;
  }
}

PHP Library Presenter Dark/Plex Theme

Custom PLPP CSS to match the Organizr theme.

`plpporg.css` is a dark theme that matches Organizr.

`plpp-plex.css` is a Plex theme for PLPP

Guacamole Dark/Plex Theme

Custom Guacamole CSS to match the Organizr theme.

`guacorg.css` is a dark theme that matches Organizr.

`guacplex.css` is a Plex theme for Guacamole

Screenshots

Expand

Plex Organizr Theme

Custom Plex CSS to match the Organizr theme.

The `plexorg.css` theme is a dark theme that matches Organizr.

OrgArr - Sonarr v2/v3 - Radarr - Lidarr - Bazarr Dark/Plex Theme

Custom Sonarr V2 and V3/Radarr/Lidarr/Bazarr CSS for consistent UI in Organizr

Thank you iFelix18 for doing all the hard work! :)

The `orgarr.css` theme is a dark theme that matches the Organizr dark theme.

`orgarr-plex.css` If you want a regular Plex theme for your *arr setup, use the `orgarr-plex.css` instead.

Screenshots

Expand

NZBGet Dark/Plex Theme

Custom CSS for Nzbget

The `nzborg.css` theme is a dark theme that matches the Organizr dark theme.

The `nzbget-plex.css` theme is a plex theme for NZBGet.

Thank you ydkmlt84 for making the job easier :)

Screenshots

Expand

SABnzbd Dark Theme

Custom CSS for SABnzbd

Use the `sabnzbd_dark.css` for a dark theme that matches the Organizr dark theme.

Note: SABnzbd theme must be set to Glitter

Screenshots

Expand

GrafOrg - Grafana Dark/Plex

Custom Grafana CSS for Organizr homepage integration and consistent UI.

The `graforg.css` theme is a dark theme that matches the Organizr dark theme.

`grafplex.css`: If you want a regular Plex theme for your Grafana setup, use the `grafplex.css` theme instead.

For panel integration on the Organizr homepage you can use `graforg-dashboard.css` if you use the Plex theme in Organizr.

Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/

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://grafana.technicalramblings.com/d/nLJXnLJiz/unraid-ups-dashboard?refresh=10s&orgId=1&kiosk=tv https://grafana.technicalramblings.com/d/nLJXnLJiz/unraid-ups-dashboard?refresh=10s&orgId=1&kiosk

Check out my Varken dashboard here: https://grafana.com/dashboards/9558

Screenshots

Expand

Custom HTML for Organizr Homepage

Expand

Thank you Fma965 for the base code

Change the Panel name to what you want and the src to the panel URL.

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

If you dont want the Panel name text, just remove the <h5><span> line entirely.

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

NetOrg - Netdata Dark/Plex Theme

Custom Netdata CSS for consistent UI in Organizr

The `netorg.css` theme is a dark theme that matches Organizr.

`netplex.css` If you want a regular Plex theme for your Netdata setup, use the `netplex.css` instead.

Screenshots

Expand

Custom HTML for Organizr Homepage

Monitorg - Monitorr Dark/Plex Theme

Custom Monitorr CSS for Organizr homepage integration.

The `monitorg.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 monitorg.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/monitorg.css"; in the monitorr custom css.

For the dark theme use `monitorg-dark.css`

For the Plex theme use `monitorg-plex.css`

Screenshots

Expand

Add this in the Monitorr custom css box:

@import "https://gilbn.github.io/theme.park/CSS/themes/monitorg.css";

And add this in custom HTML in Organizr:

<div id="announcementRow" class="row"><h4 class="pull-left"><span>Monitorr</span></h4><hr class="hidden-xs"></div>
<div style="overflow:hidden; height:260px; -webkit-overflow-scrolling: touch; overflow-y: scroll;">
<iframe class="iframe" frameborder="0" src="https://monitorr.domain.com/index.min.php"></iframe>
</div>

Filebrowser - Dark Theme

Custom Filebrowser CSS for consistent UI in Organizr.

Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css https://github.com/Archmonger/Blackberry-Themes

The css is named `filebrowser_dark.css`

Screenshots

Expand

Honourable mentions:

leram84/layer.Cake

rg9400/Cloud-Tautulli-Theme

Burry/organizr-v2-plex-theme

iFelix18/Darkerr

ydkmlt84/DarkerNZBget

Archmonger/Blackberry-Flat

HalianElf/theme.park

Setup

Subfilter

PHP Library Presenter Dark/Plex Theme

plpporg.css is a dark theme that matches Organizr.

plpp-plex.css is a Plex theme for PLPP

Guacamole Dark/Plex Theme

guacorg.css is a dark theme that matches Organizr.

guacplex.css is a Plex theme for Guacamole

Screenshots

Plex Organizr Theme

The plexorg.css theme is a dark theme that matches Organizr.

OrgArr - Sonarr v2/v3 - Radarr - Lidarr - Bazarr Dark/Plex Theme

The orgarr.css theme is a dark theme that matches the Organizr dark theme.

orgarr-plex.css If you want a regular Plex theme for your *arr setup, use the orgarr-plex.css instead.

Screenshots

NZBGet Dark/Plex Theme

The nzborg.css theme is a dark theme that matches the Organizr dark theme.

The nzbget-plex.css theme is a plex theme for NZBGet.

Screenshots

SABnzbd Dark Theme

Use the sabnzbd_dark.css for a dark theme that matches the Organizr dark theme.

Screenshots

GrafOrg - Grafana Dark/Plex

The graforg.css theme is a dark theme that matches the Organizr dark theme.

grafplex.css: If you want a regular Plex theme for your Grafana setup, use the grafplex.css theme instead.

For panel integration on the Organizr homepage you can use graforg-dashboard.css if you use the Plex theme in Organizr.

Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/

TIP:

Screenshots

Custom HTML for Organizr Homepage

NetOrg - Netdata Dark/Plex Theme

The netorg.css theme is a dark theme that matches Organizr.

netplex.css If you want a regular Plex theme for your Netdata setup, use the netplex.css instead.

Screenshots

Custom HTML for Organizr Homepage

Monitorg - Monitorr Dark/Plex Theme

The monitorg.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.

For the dark theme use monitorg-dark.css

For the Plex theme use monitorg-plex.css

Screenshots

Filebrowser - Dark Theme

The css is named filebrowser_dark.css

Screenshots

Honourable mentions:

`plpporg.css` is a dark theme that matches Organizr.

`plpp-plex.css` is a Plex theme for PLPP

`guacorg.css` is a dark theme that matches Organizr.

`guacplex.css` is a Plex theme for Guacamole

The `plexorg.css` theme is a dark theme that matches Organizr.

The `orgarr.css` theme is a dark theme that matches the Organizr dark theme.

`orgarr-plex.css` If you want a regular Plex theme for your *arr setup, use the `orgarr-plex.css` instead.

The `nzborg.css` theme is a dark theme that matches the Organizr dark theme.

The `nzbget-plex.css` theme is a plex theme for NZBGet.

Use the `sabnzbd_dark.css` for a dark theme that matches the Organizr dark theme.

The `graforg.css` theme is a dark theme that matches the Organizr dark theme.

`grafplex.css`: If you want a regular Plex theme for your Grafana setup, use the `grafplex.css` theme instead.

For panel integration on the Organizr homepage you can use `graforg-dashboard.css` if you use the Plex theme in Organizr.

The `netorg.css` theme is a dark theme that matches Organizr.

`netplex.css` If you want a regular Plex theme for your Netdata setup, use the `netplex.css` instead.

The `monitorg.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.

For the dark theme use `monitorg-dark.css`

For the Plex theme use `monitorg-plex.css`

The css is named `filebrowser_dark.css`