Beschreibung ergänzt und Bilder eingefügt

README.md

@@ -4,3 +4,88 @@ Liedtexte aus OpenLp als Untertitel in OBS-Studio anzeigen
 
 ## 1. Bühnen-Monitor in OpenLp aktivieren
 
+Plugin aktivieren
+
+![Plugin aktivieren](bilder/openlp-001.png)
+
+![](bilder/openlp-002.png)
+
+Einstellungen überprüfen / testen
+
+![](bilder/openlp-004.png)
+
+![](bilder/openlp-005.png)
+
+Wenn alles richtig konfiguriert ist, kann man die OpenLP Live-Ansicht im Browser sehen:
+
+![](bilder/openlp-003.png)
+
+## 2. Anpassungen der Darstellung
+
+Theoretisch könnte man diese HTML-Seite schon direkt in das OBS-Studio einbinden, allerdings wäre die Darstellung dort nicht optimal.
+
+Glücklicherweise bietet OBS-Studio die Möglichkeit, für eine Webseite zusätzliche CSS-Regeln zu verwenden. Diese Funktion nutzen wir, um die Liedtexte als Untertitel in das Video einzublenden.
+
+Im OBS-Studio legen wir zunächst eine neue Browser-Quelle an.
+
+![](bilder/openlp-006.png)
+
+![](bilder/openlp-007.png)
+
+![](bilder/openlp-008.png)
+
+Als URL wird die Adresse für den Bühnenmonitor aus OpenLP eingetragen.
+
+Breite und Höhe des Fensters sind an die jeweilige Videogröße anzupassen.
+
+In das Feld "Benutzerdefiniertes CSS" werden folgende Regeln eingetragen:
+
+```
+body { 
+  background-color: rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  height: 200px;
+}
+
+br {
+    content: '';
+}
+
+br:after {
+    content: ' ';
+}
+
+#verseorder {
+  display: none;
+}
+
+#right {
+  display: none;
+}
+
+#nextslide {
+  display: none;
+}
+
+#currentslide {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 28px;
+  text-align: center;
+  color: white;
+  padding-bottom: 0px;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+```
+
+Danach wird das Textfenster an der gewünschten Stelle platziert und die Liedtexte werden nun automatisch entsprechend der OpenLP Live-Ansicht angezeigt.
+
+![](bilder/openlp-009.png)
+
+Die CSS-Regeln können natürlich noch an die speziellen Bedürfnisse angepasst werden.
+
+Wenn die Lieder z.B. in OpenLP so abgespeichert sind, dass pro Seite sehr viel Text angezeigt wird, muss die Textgröße verringert werden, damit alles in das Fenster passt.
+
+Genauso kann die Textfarbe, Hintergrundfarbe und Transparenz den eigenen Wünschen angepasst werden.