Emby – Custom Webbrowser Loginseite

Heute zeige ich euch, wie ihr die Loginseite für euren Emby Server zumindest in den Webbrowsern anpassen könnt.

Nun, wenn jemand daran interessiert ist, dies zu erreichen, sollten Sie wissen, dass es nicht nur CSS ist.

Bitte unterstützt meine Arbeit

Los gehts

Zuerst müssen wir ein paar sachen in der manuallogin.html ändern:

1. Findet folgende Zeile:

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">

und fügt “custombg” als zusätzliche class hinzu, wie hier:

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow custombg" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">

2. Findet folgende Zeile:

<div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">

und fügt “custombody” als zusätzliche class ein, wie hier:

<div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page custombody">

3. Findet die Zeile mit dem <form> TAG und ersetzt sie mit:

<form class="customoverlay">

Optional: Wenn ihr benutzerdefinierte Schaltflächen hinzufügen möchten, platziert und ändert einfach den folgenden Code nach einem </button> TAG

<a is="emby-button" class="raised block emby-button" href="https://myforum.com">Forum</a>

Anschließend müsst ihr in den Emby Einstellungen folgendes in den Custom CSS Bereich einfügen:

.customoverlay
{
  background-color:rgba(0,0,0,.75);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  -moz-box-orient:vertical;
  -moz-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  margin:0 auto;
  min-height:515px;
  padding:40px 40px 40px;
  width:100%
}

.custombg
{
  background:url('https://i.imgur.com/ynv9BKl.jpg');
  background-size:cover;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  height:100vh;
  position:fixed;
  background-position:center center;
  background-repeat:no-repeat
} 

.custombody
{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch
}

Optional: Fügt auch das folgende CSS ein, um die Schaltflächen “Passwort vergessen” und “Abbrechen” auszublenden.

.btnForgotPassword
{
  display:none!important
}

.buttonCancel
{
  display:none!important
}

Ihr könnt nun die Hintergrund-URL durch ein beliebiges Bild ersetzen, das ihr verwenden möchten.

Hinweis: Um die Änderungen an manuallogin.html zu sehen, müssen ihr wahrscheinlich euren Browser-Cache löschen.