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
d7e1cd542c
theme.park/README.md
GilbN 94250d8642 danke
2018-08-18 00:49:17 +02:00

12 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

OrgArr

Custom Sonarr/Radarr/Lidarr CSS for consistent UI in Organizr homepage integration. Thank you iFelix18 for doing all the hard work! :)

The orgarr.css theme will mess with your Xarr base theme.

graforg.css is created purely for use with Organizr.

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

orgarr-blur.css

If you want a regular Plex theme for your *arr setup, use the orgarr-blur.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://rawgit.com/gilbN/theme.park/CSS/themes/orgarr.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 orgarr.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://rawgit.com/gilbN/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;
  }
}

GrafOrg

Custom Grafana CSS for Organizr homepage integration.

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/datasources for settings.

graforg.css is created purely for use with Organizr.

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

grafblur.css

If you want a regular Plex theme for your Grafana setup, use the grafblur.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 monitorr and add this:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/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://rawgit.com/gilbN/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

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.

netblur.css

If you want a regular Plex theme for your Netdata setup, use the netblur.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 monitorr and add this:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/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://rawgit.com/gilbN/theme.park/CSS/themes/netorg.css">
		</head>';
		sub_filter_once on;
	}

Custom HTML for Organizr Homepage

Monitorg

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://rawgit.com/gilbN/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://rawgit.com/gilbN/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://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css">
		</head>';
		sub_filter_once on;
  }
}