diff --git a/CSS/themes/grafblur.css b/CSS/themes/grafblur.css new file mode 100644 index 00000000..a45b611f --- /dev/null +++ b/CSS/themes/grafblur.css @@ -0,0 +1,167 @@ +/* GRAFANA BLUR THEME */ +body { + background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + background-color: rgba(0,0,0,.0); + color:#FFFFFF; +} +.main-view { + background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; +} + +/* sidemenu */ +.sidemenu-open .sidemenu { + background: rgba(0, 0, 0, .25); +} +.sidemenu__logo:hover { + background: rgba(0, 0, 0, .25); +} +.sidemenu-item.active, .sidemenu-item:hover { + background-color: rgba(0, 0, 0, .25); +} + +/* Dashboard dropdown menu */ +.search-dropdown__col_1 { + background: rgba(0, 0, 0, 0) !important; +} +.search-container { + left: 0px !important; +} +.navbar-page-btn { + color: #FFFFFF !important; +} + +/* Panel fullscreen navbar */ +.panel-in-fullscreen .navbar { + background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); +} + +/* Dashboard search menu */ +.search-field-wrapper { + background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + background-color: rgba(0,0,0,.0); + box-shadow: none !important; +} +.search-field-wrapper>input { + height: 55px !important; + background-color: rgba(0, 0, 0, 0.25) !important; +} +.search-field-icon { + background-color: rgba(0, 0, 0, .25) !important; +} + +/* Dashboard settings menu */ +.dashboard-settings__aside { + background: rgba(0, 0, 0, .25) !important; +} +.dashboard-page--settings-open .navbar { + background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); +} +.navbar-button--primary { + border-color: #ffffff00 !important; +} +.dashboard-settings__aside-header { + color: #ffffff !important; +} +.dashboard-settings__nav-item { + color: #ffffff !important; +} +.bootstrap-tagsinput { + background-color: #09090b; +} +.gf-form-select-wrapper .gf-form-input { + background-color: #393a3b !important; +} + +/* Variable label color */ +.template-variable { + color: #FFFFFF !important; +} + +/* Variable label box */ +.gf-form-label { + background-color: rgba(0, 0, 0, 0.25) !important; + border: none !important; +} + +/* Variable dashboard dropdown */ +.variable-value-link { + padding: 7.4px 10px !important; + background-color: rgba(0, 0, 0, 0.25) !important; + border: none !important; + color: #FFFFFF !important; +} + +/* Variable input box */ +.gf-form-input { + color: #FFFFFF !important; + background-color: rgba(255, 255, 255, 0.15) !important; + border: 0px solid #262628 !important; + +} + +/* NAVBAR BUTTONS */ +.navbar-button { + color: #FFFFFF !important; + background-color: #00000040 !important; + background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; +} + +/* Custom Range Refreshing every X Dropdown */ +.gf-timepicker-absolute-section select { + background-color: #393a3b !important; +} +.gf-form-input:focus { + box-shadow: none !important; +} + +/* PANEL BACKGROUND COLOR*/ +.panel-container { + background-color: rgba(0, 0, 0, .25) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} +.panel-container.panel-transparent { + background-color: rgba(0, 0, 0, .25) !important; +} +.panel-header:hover { + background-color: rgba(0, 0, 0, 0.25) !important; +} +/* ////PANEL BACKGROUND COLOR//// */ + +.graph-legend-table .graph-legend-series:nth-child(odd) { + background: rgba(0, 0, 0, 0) !important; +} + +/* Panel text color*/ +div.flot-text { + color: #ffffff!important; +} + +/* panel loading circle*/ +.panel-loading { + color: #ffffff!important; +} + +/* panel resize arrow */ +.theme-dark .react-grid-item>.react-resizable-handle:after { + border-right: 2px solid #fff !important; + border-bottom: 2px solid #fff !important; +} + +/* table panel background color */ +.table-panel-container { + background-color: rgba(0, 0, 0, .25) !important; +} diff --git a/CSS/themes/graforg.css b/CSS/themes/graforg.css new file mode 100644 index 00000000..c438955f --- /dev/null +++ b/CSS/themes/graforg.css @@ -0,0 +1,153 @@ +/* GRAFANA ORG THEME */ +body { + color: #FFFFFF !important; + background-color: rgba(0, 0, 0, 0) !important; +} +.main-view { + background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; +} + +/* Hide sidemenu */ +.sidemenu { + display: none !important; +} + +/* Dashboard dropdown menu */ +.search-dropdown__col_1 { + background: rgba(0, 0, 0, 0) !important; +} +.search-container { + left: 0px !important; +} +.navbar-page-btn { + color: #FFFFFF !important; +} + +/* Panel fullscreen navbar */ +.panel-in-fullscreen .navbar { + background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); +} + +/* Dashboard search menu */ +.search-field-wrapper { + background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + background-color: rgba(0,0,0,.0); + box-shadow: none !important; +} +.search-field-wrapper>input { + height: 55px !important; + background-color: rgba(0, 0, 0, 0.25) !important; +} +.search-field-icon { + background-color: rgba(0, 0, 0, .25) !important; +} + +/* Dashboard settings menu */ +.dashboard-settings__aside { + background: rgba(0, 0, 0, .25) !important; +} +.dashboard-page--settings-open .navbar { + background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); +} +.navbar-button--primary { + border-color: #ffffff00 !important; +} +.dashboard-settings__aside-header { + color: #ffffff !important; +} +.dashboard-settings__nav-item { + color: #ffffff !important; +} +.bootstrap-tagsinput { + background-color: #09090b; +} +.gf-form-select-wrapper .gf-form-input { + background-color: #393a3b !important; +} + +/* Variable label color */ +.template-variable { + color: #FFFFFF !important; +} + +/* Variable label box */ +.gf-form-label { + background-color: rgba(0, 0, 0, 0.25) !important; + border: none !important; +} + +/* Variable dashboard dropdown */ +.variable-value-link { + padding: 7.4px 10px !important; + background-color: rgba(0, 0, 0, 0.25) !important; + border: none !important; + color: #FFFFFF !important; +} + +/* Variable input box */ +.gf-form-input { + color: #FFFFFF !important; + background-color: rgba(255, 255, 255, 0.15) !important; + border: 0px solid #262628 !important; + +} + +/* NAVBAR BUTTONS */ +.navbar-button { + color: #FFFFFF !important; + background-color: #00000040 !important; + background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; +} + +/* Custom Range Refreshing every X Dropdown */ +.gf-timepicker-absolute-section select { + background-color: #393a3b !important; +} +.gf-form-input:focus { + box-shadow: none !important; +} + +/* PANEL BACKGROUND COLOR*/ +.panel-container { + background-color: rgba(0, 0, 0, .25) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} +.panel-container.panel-transparent { + background-color: rgba(0, 0, 0, .25) !important; +} +.panel-header:hover { + background-color: rgba(0, 0, 0, 0.25) !important; +} +/* ////PANEL BACKGROUND COLOR//// */ + +.graph-legend-table .graph-legend-series:nth-child(odd) { + background: rgba(0, 0, 0, 0) !important; +} + +/* Panel text color*/ +div.flot-text { + color: #ffffff!important; +} + +/* panel loading circle*/ +.panel-loading { + color: #ffffff!important; +} + +/* panel resize arrow */ +.theme-dark .react-grid-item>.react-resizable-handle:after { + border-right: 2px solid #fff !important; + border-bottom: 2px solid #fff !important; +} + +/* table panel background color */ +.table-panel-container { + background-color: rgba(0, 0, 0, .25) !important; +} diff --git a/CSS/themes/monitorg.css b/CSS/themes/monitorg.css new file mode 100644 index 00000000..fc6d48d4 --- /dev/null +++ b/CSS/themes/monitorg.css @@ -0,0 +1,109 @@ +body { + background-color: transparent !important; +} + +.container { + max-width: 100% !important; + padding-right: 2rem !important; +} +#stats { + background-color: rgba(0,0,0,.15) !important; + padding-left: .0rem !important; + padding-right: 1.11rem !important; +} +#hd { + padding-left: 0.8rem !important; +} +.double-val-label>span.success { + background-color: #28a745 !important; +} +.servicetile:hover, .servicetile:focus { + text-shadow: 0 0 20px #000; +} +#servicetitle:hover, #servicetitle:focus { + text-shadow: 0 0 20px #000; +} +#servicetitle { + color: #fff !important; +} +.btnoffline, .btnunknown, .btnonline { + box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; + -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; +} +.btnonline { + background-color: #28a745 !important; +} +#time { + background-color: rgba(0,0,0,.15) !important; + color: #fff !important; +} +#slidertable { +background-color: rgba(0,0,0,.15) !important +} +#textslider { + color: #fff !important; +} +.dtg { + color: #fff !important; +} +.datemin { + color: #fff !important; +} +#center { + background-color: rgba(0,0,0,.0) !important; + box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; +} +.col-lg-4 { + background-color: rgba(0,0,0,.15) !important; + margin: 1rem .1rem 1.5rem 1rem !important; + width: 9rem !important; +} +#clock { + background-color: rgba(0,0,0,.15) !important; + color: #fff !important; +} +.date { + color: #fff !important; +} +#summary { + background-color: #e84242 !important; + border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; + box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; +} +.pace, .pace-progress { + background: rgba(0,0,0,.15) !important; +} +.pace, .pace-progress-inner { + box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; +} +.footer { + color: transparent !important; +} +.footer:hover { + text-shadow: 0 0 15px transparent !important; +} +#footer { + color: transparent !important; +} +.alpaca-control-label, .alpaca-control.radio { + color: black !important; +} +.navbar-brand { + text-shadow: 0 0 15px #000000 !important; + } +.Rtable-cell { + color: #000000 !important; +} +#colorkey { + color: #000000 !important; +} +@media only screen and (max-width: 775px) { + #slidertable { + display: none !important; + } + + #time { + display: none !important; + } +} + diff --git a/CSS/themes/netblur.css b/CSS/themes/netblur.css new file mode 100644 index 00000000..00cd39f1 --- /dev/null +++ b/CSS/themes/netblur.css @@ -0,0 +1,90 @@ +body { + background-image: url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-light.png"); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: #ffffff !important; +} +/* Navbar */ +.navbar-default { + background-image: url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-light-dark.png"); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} +.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { + background-color: rgba(0, 0, 0, .25) !important; + color: #ffffff !important; +} +.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { + background-color: rgba(0, 0, 0, .25) !important; +} +.navbar-default, .navbar-inverse { + border: 0px solid rgba(0, 0, 0, 0.6) !important; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important; +} +.navbar-default .navbar-brand { + color: #ffffff !important; +} +.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { + color: #ffffff !important; + background-color: rgba(0, 0, 0, .25) !important; +} +.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { + border-right: 1px solid rgba(0, 0, 0, 0) !important; + border-left: 1px solid rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.dropdown-menu { + background-color: #141a1d !important; + border: 0px !important; +} +.modal-content { + background-color: #141a1d !important; +} +.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { + background-color: #141a1d !important; +} +.multi-column-dropdown li a:hover { + background-color: #141a1d !important; +} +.close, .close:hover, .close:focus { + color: #ffffff !important; +} +/* System Overview */ +.dashboard-sidebar .nav > .active > a, .dashboard-sidebar .nav > .active:hover > a, .dashboard-sidebar .nav > .active:focus > a { + color: #ff8c00 !important; + border-left: 2px solid #ff8c00 !important; +} + +/* System Overview metrics */ +.gaugeChartTitle, .gaugeChartUnits, .gaugeChartMax, .gaugeChartMin, .gaugeChartLabel, .easyPieChartTitle, .easyPieChartLabel, .easyPieChartUnits { + color: #ffffff !important; +} +.netdata-legend-value, .netdata-legend-toolbox, .netdata-legend-toolbox-button, .dygraph-axis-label { + background-color: rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.netdata-legend-resize-handler { + background-color: rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.netdata-legend-name-table-line { + border-bottom-width: 0px !important; +} +/* Sidebar */ +.dashboard-sidebar .nav > li > a { + color: #ffffff !important; +} +.dashboard-sidebar .nav > li > a:hover, .dashboard-sidebar .nav > li > a:focus { + color: #ff8c00 !important; + border-left: 1px solid #ff8c00 !important; +} diff --git a/CSS/themes/netorg.css b/CSS/themes/netorg.css new file mode 100644 index 00000000..151e6075 --- /dev/null +++ b/CSS/themes/netorg.css @@ -0,0 +1,78 @@ +body { + background-color: rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} + +/* Navbar */ +.navbar-default { + background-color: rgba(0,0,0,.7) !important; +} +.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { + background-color: rgba(0, 0, 0, .25) !important; +} +.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { + background-color: rgba(0, 0, 0, .25) !important; +} +.navbar-default, .navbar-inverse { + border: 0px solid rgba(0, 0, 0, 0.6) !important; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important; +} +.navbar-default .navbar-brand { + color: #ffffff !important; +} +.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { + color: #ffffff !important; + background-color: rgba(0, 0, 0, .25) !important; +} +.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { + border-right: 1px solid rgba(0, 0, 0, 0) !important; + border-left: 1px solid rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.dropdown-menu { + background-color: #141a1d !important; + border: 0px !important; +} +.modal-content { + background-color: #141a1d !important; +} +.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { + background-color: #141a1d !important; +} +.multi-column-dropdown li a:hover { + background-color: #141a1d !important; +} +.close, .close:hover, .close:focus { + color: #ffffff !important; +} + +/* System Overview */ +.dashboard-sidebar .nav > .active > a, .dashboard-sidebar .nav > .active:hover > a, .dashboard-sidebar .nav > .active:focus > a { + color: #ff8c00 !important; + border-left: 2px solid #ff8c00 !important; +} + +/* System Overview metrics */ +.gaugeChartTitle, .gaugeChartUnits, .gaugeChartMax, .gaugeChartMin, .gaugeChartLabel, .easyPieChartTitle, .easyPieChartLabel, .easyPieChartUnits { + color: #ffffff !important; +} +.netdata-legend-value, .netdata-legend-toolbox, .netdata-legend-toolbox-button, .dygraph-axis-label { + background-color: rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.netdata-legend-resize-handler { + background-color: rgba(0, 0, 0, 0) !important; + color: #ffffff !important; +} +.netdata-legend-name-table-line { + border-bottom-width: 0px !important; +} + +/* Sidebar */ +.dashboard-sidebar .nav > li > a { + color: #ffffff !important; +} +.dashboard-sidebar .nav > li > a:hover, .dashboard-sidebar .nav > li > a:focus { + color: #ff8c00 !important; + border-left: 1px solid #ff8c00 !important; +} diff --git a/README.md b/README.md index d0d4894a..2c4a3bf4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,335 @@ # theme.park -A collection of themes/skins for use in conjunction with Organizr +A collection of themes/skins for use in conjunction with [Organizr](https://github.com/causefx/Organizr) + +# GrafOrg + +Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration. +![](/Screenshots/graforg/3.jpg) +## 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](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. + +Create **another** reverse proxy for monitorr and add this: +```nginx +proxy_set_header Accept-Encoding ""; +sub_filter +'' +' +'; +sub_filter_once on; +``` +### Here is a complete example: +```nginx +#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 + '' + ' + '; + 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](https://gist.github.com/Fma965) for the [code](https://gist.github.com/Fma965/d30ac1fa5695304a7d6dcdc748220027) + +Change the ***Panel name*** to what you want and the ***src*** to the panel URL. + +```css +
Panel name
+
** +``` +The URL can be found by clicking **share** on the panel you want to add. +![](https://raw.githubusercontent.com/gilbN/GrafOrg/master/Screenshots/4.png) + +If you dont want the ***Panel name*** text, just remove the `
` line entirely. + +```css + + +
+
+
+
Panel name
+
+
+
+
Panel name
+
+
+
+
Panel name
+
+
+
+
Panel name
+
+
+
+
+``` +
+ +*** + +# NetOrg + +Custom [Netdata](https://github.com/firehol/netdata) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr) + +![](/Screenshots/netorg/2.jpg) + +## 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](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. + +Create **another** reverse proxy for monitorr and add this: +```nginx +proxy_set_header Accept-Encoding ""; +sub_filter +'' +' +'; +sub_filter_once on; +``` +### Here is a complete example: +```nginx + # NETDATA CONTAINER + location ~ /netdata/(?.*) { + #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 + '' + ' + '; + sub_filter_once on; + } +``` +### Custom HTML for Organizr Homepage + +```css +``` +
+ +*** + +# Monitorg + +Custom [Monitorr](https://github.com/Monitorr/Monitorr) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration. +![](/Screenshots/monitorg/1.jpg) + +## 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: +```css +@import "https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css"; +``` +And add this in custom HTML in Organizr: +```css +
+ +
+``` +### Subfilter +As this theme will change the base theme, you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. +Create another reverse proxy for monitorr and add this: +```nginx + proxy_set_header Accept-Encoding ""; + sub_filter + '' + ' + '; + sub_filter_once on; +``` +Here is a complete example: +```nginx +#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 + '' + ' + '; + sub_filter_once on; + } +} +``` +
diff --git a/Resources/blur-light-dark.png b/Resources/blur-light-dark.png new file mode 100644 index 00000000..a5af8bf9 Binary files /dev/null and b/Resources/blur-light-dark.png differ diff --git a/Resources/blur-light.png b/Resources/blur-light.png new file mode 100644 index 00000000..c79a3188 Binary files /dev/null and b/Resources/blur-light.png differ diff --git a/Resources/blur-noise.png b/Resources/blur-noise.png new file mode 100644 index 00000000..45e67618 Binary files /dev/null and b/Resources/blur-noise.png differ diff --git a/Screenshots/graforg/1.jpg b/Screenshots/graforg/1.jpg new file mode 100644 index 00000000..87e7b9f9 Binary files /dev/null and b/Screenshots/graforg/1.jpg differ diff --git a/Screenshots/graforg/2.jpg b/Screenshots/graforg/2.jpg new file mode 100644 index 00000000..63fa6177 Binary files /dev/null and b/Screenshots/graforg/2.jpg differ diff --git a/Screenshots/graforg/3.jpg b/Screenshots/graforg/3.jpg new file mode 100644 index 00000000..c96cfe74 Binary files /dev/null and b/Screenshots/graforg/3.jpg differ diff --git a/Screenshots/graforg/4.png b/Screenshots/graforg/4.png new file mode 100644 index 00000000..62515bf8 Binary files /dev/null and b/Screenshots/graforg/4.png differ diff --git a/Screenshots/monitorg/1.jpg b/Screenshots/monitorg/1.jpg new file mode 100644 index 00000000..1e083796 Binary files /dev/null and b/Screenshots/monitorg/1.jpg differ diff --git a/Screenshots/monitorg/2.jpg b/Screenshots/monitorg/2.jpg new file mode 100644 index 00000000..af29fd19 Binary files /dev/null and b/Screenshots/monitorg/2.jpg differ diff --git a/Screenshots/monitorg/3.jpg b/Screenshots/monitorg/3.jpg new file mode 100644 index 00000000..6bf8baba Binary files /dev/null and b/Screenshots/monitorg/3.jpg differ diff --git a/Screenshots/monitorg/4.jpg b/Screenshots/monitorg/4.jpg new file mode 100644 index 00000000..5a364aad Binary files /dev/null and b/Screenshots/monitorg/4.jpg differ diff --git a/Screenshots/netorg/1.jpg b/Screenshots/netorg/1.jpg new file mode 100644 index 00000000..5b0bfd69 Binary files /dev/null and b/Screenshots/netorg/1.jpg differ diff --git a/Screenshots/netorg/2.jpg b/Screenshots/netorg/2.jpg new file mode 100644 index 00000000..e6c46e25 Binary files /dev/null and b/Screenshots/netorg/2.jpg differ