Mirrors/theme.park
1
0
Fork 0
mirror of https://github.com/gilbN/theme.park.git synced 2024-11-04 10:12:31 +01:00
Code Issues Releases Wiki Activity
a7c891ac61
theme.park/README.md
GilbN 06b4f2ea6b
Update README.md
2018-12-08 01:54:26 +01:00

18 KiB
Raw Blame History

theme.park

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

Honourable mentions:

leram84/layer.Cake

rg9400/Cloud-Tautulli-Theme

Burry/organizr-v2-plex-theme

iFelix18/Darkerr

ydkmlt84/DarkerNZBget

Archmonger/Blackberry-Flat

Guacamole Dark/Plex Theme

Custom Guacamole CSS to match the Organizr theme.

guacorg.css is a dark theme that matches Organizr.

guacplex.css

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

Setup

Expand

Subfilter

As the Guacamole doesn't have support for custom CSS you can get around that by using subfilter in Nginx.

Add this to your plex 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/guacorg.css">
		</head>';
		sub_filter_once on;

Here is a complete example:

#MONITORR CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
 	listen 80;
 	server_name guac.domain.com;
 	return 301 https://$server_name$request_uri;
}

server {  
    listen 443 ssl http2;
    server_name guac.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/guacorg.css">
		</head>';
		sub_filter_once on;
  }
}

Plex Organizr Theme

Custom Plex CSS to match the Organizr theme.

Setup

Expand

Subfilter

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

Add this to your plex 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/plexorg.css">
		</head>';
		sub_filter_once on;

Here is a complete example:

#MONITORR CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
 	listen 80;
 	server_name plex.domain.com;
 	return 301 https://$server_name$request_uri;
}

server {  
    listen 443 ssl http2;
    server_name plex.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/plexorg.css">
		</head>';
		sub_filter_once on;
  }
}

OrgArr - Sonarr v2/v3 - Radarr - Lidarr

Custom Sonarr V2 and V3/Radarr/Lidarr 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.

Setup

Expand

Screenshots

Expand

Subfilter

As the arr's doesn't have support for custom CSS you can get around that by using subfilter in Nginx.

Add this to your location context/block:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/orgarr.css">
</head>';
sub_filter_once on;

Here is a complete example:

#ARR CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
  listen 80;
  server_name orgarr.domain.com;
  return 301 https://$server_name$request_uri;
  }

server {
  listen 443 ssl http2;
  server_name orgarr.domain.com;

include /config/nginx/ssl.conf;

location / {
  proxy_pass http://192.168.1.34:3000;
  proxy_set_header Accept-Encoding "";
  sub_filter
  '</head>'
  '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/orgarr.css">
  </head>';
  sub_filter_once on;
  proxy_hide_header X-Frame-Options;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_http_version 1.1;
  proxy_pass_request_headers on;
  proxy_set_header Connection "keep-alive";
  proxy_store off;
  }
}

Nzbget Plex Theme

Custom CSS for Nzbget Thank you ydkmlt84 for making the job easier :)

Setup

Expand

Screenshots

Expand

Subfilter

Since Nzbget doesn't have support for custom CSS you can get around that by using subfilter in Nginx.

Add this to your location context/block:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/nzbget-plex.css">
</head>';
sub_filter_once on;

Here is a complete example:

#ARR CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
  listen 80;
  server_name nzbget.domain.com;
  return 301 https://$server_name$request_uri;
  }

server {
  listen 443 ssl http2;
  server_name nzbget.domain.com;

include /config/nginx/ssl.conf;

location / {
  proxy_pass http://192.168.1.34:3000;
  proxy_set_header Accept-Encoding "";
  sub_filter
  '</head>'
  '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/nzbget-plex.css">
  </head>';
  sub_filter_once on;
  proxy_hide_header X-Frame-Options;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_http_version 1.1;
  proxy_pass_request_headers on;
  proxy_set_header Connection "keep-alive";
  proxy_store off;
  }
}

GrafOrg - Grafana

Custom Grafana CSS for Organizr homepage integration and consistent UI.

Custom CSS for Organizr

The graforg.css theme will mess with your Grafana base theme. And it will hide the side menu. Go to https://graforg.domain.com/login for settings.

graforg.css is created purely for use with Organizr.

grafplex.css

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

Setup

Expand

Screenshots

Expand

Subfilter

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

Create another reverse proxy for Grafana and add this:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/graforg.css">
</head>';
sub_filter_once on;

Here is a complete example:

#GRAFANA CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
  listen 80;
  server_name graforg.domain.com;
  return 301 https://$server_name$request_uri;
  }

server {
  listen 443 ssl http2;
  server_name graforg.domain.com;

include /config/nginx/ssl.conf;

location / {
  proxy_pass http://192.168.1.34:3000;
  proxy_set_header Accept-Encoding "";
  sub_filter
  '</head>'
  '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/graforg.css">
  </head>';
  sub_filter_once on;
  proxy_hide_header X-Frame-Options;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Forwarded-Server $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_http_version 1.1;
  proxy_pass_request_headers on;
  proxy_set_header Connection "keep-alive";
  proxy_store off;
  }
}

Custom HTML for Organizr Homepage

Thank you Fma965 for the 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

Custom Netdata CSS for consistent UI in Organizr

Custom CSS for Organizr

The netorg.css theme will mess with your Netdata base theme.

netorg.css is created purely for use with Organizr.

NOTE: When viewing Netdata in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.

netplex.css

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

Setup

Expand

Screenshots

Expand

Subfilter

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

Create another reverse proxy for netdata and add this:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/netorg.css">
</head>';
sub_filter_once on;

Here is a complete example:

	# NETDATA CONTAINER
	location ~ /netdata/(?<ndpath>.*) {
		#auth_request /auth-user;
		auth_request /auth-4;   #=User
		proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://192.168.1.34:19999/$ndpath$is_args$args;
		proxy_http_version 1.1;
		proxy_pass_request_headers on;
		proxy_set_header Connection “keep-alive”;
		proxy_store off;
		gzip on;
    gzip_proxied any;
    gzip_types *;
		proxy_set_header Accept-Encoding "";
		sub_filter
		'</head>'
		'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/netorg.css">
		</head>';
		sub_filter_once on;
	}

Custom HTML for Organizr Homepage

Monitorg - Monitorr

Custom Monitorr CSS for Organizr homepage integration.

Custom CSS for Organizr

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

NOTE: When viewing /monitorr in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect.

Setup

Expand

Screenshots

Expand

Add this in the custom css box:

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

And add this in custom HTML in Organizr:

<div style="overflow:hidden; height:260px">
<embed style="height:calc(100% + 50px)" width='100%' src='https://domain.com/monitorr/index.min.php' />
</div>

Subfilter

As this theme will change the base theme, you can get around that by using subfilter in Nginx. Create another reverse proxy for monitorr and add this:

		proxy_set_header Accept-Encoding "";
		sub_filter
		'</head>'
		'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/monitorg.css">
		</head>';
		sub_filter_once on;

Here is a complete example:

#MONITORR CONTAINER

# REDIRECT HTTP TRAFFIC TO https://[domain.com]
server {
 	listen 80;
 	server_name monitorg.domain.com;
 	return 301 https://$server_name$request_uri;
}

server {  
    listen 443 ssl http2;
    server_name monitorg.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/monitorg.css">
		</head>';
		sub_filter_once on;
  }
}