CSS Inject für angezeigt Website
CSS Inject für angezeigt Website
Hallo zusammen, wir nutzen die Website Anzeigen Funktion für unsere Termin Infoscreen Seite aus ChurchTools.
Leider lassen da Schriftgröße und Farbe überhaupt nicht.
Gäbe es evtl die Möglichkeit eine Custom CSS zu injezieren um das aussehen an unsere Songs anzugleichen?
Auf Server Seite (ChurchTools) gibt es die Möglichkeit bisher nicht. Im Browser klappt das mit einem entsprechenden Skript sehr gut.
Leider lassen da Schriftgröße und Farbe überhaupt nicht.
Gäbe es evtl die Möglichkeit eine Custom CSS zu injezieren um das aussehen an unsere Songs anzugleichen?
Auf Server Seite (ChurchTools) gibt es die Möglichkeit bisher nicht. Im Browser klappt das mit einem entsprechenden Skript sehr gut.
Re: CSS Inject für angezeigt Website
Also theoretisch könnten wir ein Javascript aufrufen. Aber von Javascript hab ich fast keine Ahnung. Aber du könntest mal einen Testcase liefern, dann schau ich es mir an.
Gruß, Sebastian
Re: CSS Inject für angezeigt Website
Hi, habe mal ein bisschen gebastelt ...
Also mit Greasemonkey führe ich folgendes Skript aus:
Die verlinkte Datei ist dann eine entsprechend passende CSS (die vom Webserver aus erreichbar sein muss), in meinem Fall
Im Ergebnis wird dann aus
https://elkw1610.krz.tools/?q=churchcal ... nfoScreen/
Vorher: Nacher: Das Skript ist evtl. noch nicht ganz sauber, je nach Ladereihenfolge wird die CSS nicht immer korrekt angewendet ...
Reicht das als Beispiel um es auszuprobieren?
Alternativ zum Verlinken einer Datei könnte man auch direkt einen String mit CSS in den header schreiben. Das würde ggf. die Möglichkeit bieten Einstellungen aus Songbeamer wie z.B. primäre Schriftfarbe und Standardhintergrundfarbe zu übernehmen.
Wäre das denkbar an der Stelle wo du das Skript für den WebView ausführen würdest diese evtl. abgreifen zu können?
PS: Das oben Datum Uhrzeit und Logo verschwinden ist absichtlich in der CSS so geschrieben ...
Also mit Greasemonkey führe ich folgendes Skript aus:
Code: Alles auswählen
// ==UserScript==
// @name Change Style of CT InfoScreen to dark color theme
// @version 1
// @grant none
// ==/UserScript==
function addCss() {
var head = document.getElementsByTagName('head')[0];
var newCss = document.createElement('link');
newCss.rel = "stylesheet";
newCss.type = "text/css";
newCss.href = "https://stein.team:5001/d/s/rD3IlCUPfJr4Cj4Yk3uwFHx1ysabPxJH/webapi/entry.cgi/infoscreen_black.css?api=SYNO.SynologyDrive.Files&method=download&version=2&files=%5B%22id%3A720315638815438678%22%5D&force_download=true&json_error=true&c2_offload=%22allow%22&_dc=1668849318101&sharing_token=%2230mGOczJ7KHLKYkKf3OsAWz3HU7h0.Fbw_wCVUvy8wLhixjhS83BGLyRZWxDQJrqIeqFy8YS6fQlJatEWEHTKJY4wjJgo8IzLT3MtNBnKA9JzmEdJKHI4qu_YO8KWsn_aoj3InM_mMkyql9edNcbdSoEGcBZmRn92YiRLBz10Kj0IsSzUG5JVWLMSj8ump.lvfG2kXPEwDIKq2buS.Nao5MF3qyiK0RyU7ZzIKtuONHpOK_wudVoIJnU%22&SynoToken=vHl6v3hyDRlJY";
head.appendChild(newCss);
}
addCss();
Code: Alles auswählen
div#page
{background-color:black;
}
/* Items to hide */
div.is-logo {display:none !important;}
div.is-timedate {display:none;}
/*div.is-time {display:none;}*/
/* Black Items */
.is-eventlist {
color: red;
}
.is-eventtime span {
color: white;
}
.progressbars-bar {background-color: rgb(163, 178, 193) !important;;}
.progressbars-bar.active {background-color: #00744F !important;;}
/* White items should become dark */
.is-header {
background-color:#111 !important;
}
.is-timedate div{
color:white !important;;
}
.is-eventlist {
background-color:#111 !important;
}
.is-eventlist .event-divider {
border: 1px solid #00744F !important;;
}
.is-eventtitle {color: white !important}
https://elkw1610.krz.tools/?q=churchcal ... nfoScreen/
Vorher: Nacher: Das Skript ist evtl. noch nicht ganz sauber, je nach Ladereihenfolge wird die CSS nicht immer korrekt angewendet ...
Reicht das als Beispiel um es auszuprobieren?
Alternativ zum Verlinken einer Datei könnte man auch direkt einen String mit CSS in den header schreiben. Das würde ggf. die Möglichkeit bieten Einstellungen aus Songbeamer wie z.B. primäre Schriftfarbe und Standardhintergrundfarbe zu übernehmen.
Wäre das denkbar an der Stelle wo du das Skript für den WebView ausführen würdest diese evtl. abgreifen zu können?
PS: Das oben Datum Uhrzeit und Logo verschwinden ist absichtlich in der CSS so geschrieben ...
Re: CSS Inject für angezeigt Website
Hallo Sebastian - gibt es eigentlich zu dem Thema etwas neues?
Ich habe es mir gerade mit Greasemonkey als Firefox Plugin nochmal angeguckt und es funktioniert super.
Einzig und allein den Link zur CSS habe ich nochmal verschoben weil es damit Probleme gab
Also Konkret bräuchte ich eine Option die addCss() Funktion auf einem WebView in Songbeamer anzuwenden
Idealerweise am Ende ein Makro das die URL zum Ablauf hinzufügt inkl. der angepassten CSS ...
Ich habe es mir gerade mit Greasemonkey als Firefox Plugin nochmal angeguckt und es funktioniert super.
Einzig und allein den Link zur CSS habe ich nochmal verschoben weil es damit Probleme gab
Code: Alles auswählen
// ==UserScript==
// @name Change Style of CT InfoScreen to dark color theme
// @version 1
// @grant none
// ==/UserScript==
function addCss() {
var head = document.getElementsByTagName('head')[0];
var newCss = document.createElement('link');
newCss.rel = "stylesheet";
newCss.type = "text/css";
newCss.href = "https://stein.team/infoscreen_black.css"
head.appendChild(newCss);
}
addCss();
Idealerweise am Ende ein Makro das die URL zum Ablauf hinzufügt inkl. der angepassten CSS ...
Re: CSS Inject für angezeigt Website
Ich hab da noch nicht weiter gefortscht, es gab immer dringendere Dinge.
Gruß, Sebastian
Re: CSS Inject für angezeigt Website
Kurze Zwischenmeldung für Interessierte - Sebastian hat es experimentell in der 6.08d implementiert und wir testen es dann bald.
Re: CSS Inject für angezeigt Website
@Sebastian
Also in Windows geht es
die Schriftart geht bei mir nur nicht - war wohl in Windows 11 nicht mehr installiert und musste nicht mit ArialNarrow sondern mit "Arial Narrow" referenziert werden.
Cached du die CSS, bzw. hast du einen eigenen Font Cache?
Also in Windows geht es
die Schriftart geht bei mir nur nicht - war wohl in Windows 11 nicht mehr installiert und musste nicht mit ArialNarrow sondern mit "Arial Narrow" referenziert werden.
Cached du die CSS, bzw. hast du einen eigenen Font Cache?
Re: CSS Inject für angezeigt Website
Das CSS Inject Script wird beim Klick auf den Eintrag im Ablaufplan geladen. Das Caching vom css Script überlassen wir der Edge Engine. Es gibt dafür den Ordner "shell:local appdata\SongBeamer\Edge UserData" (einfach ohne die "" im Explorer in der Adressleiste eingeben). Den Ordner kannst du leeren, dann wird die SongBeamer Edge Engine zurückgesetzt.
Einen Font Cache gibt es für die Song- und Bibeldarstellung. Für die Webseiten überlassen wir das der Edge Engine.
Einen Font Cache gibt es für die Song- und Bibeldarstellung. Für die Webseiten überlassen wir das der Edge Engine.
Gruß, Sebastian
Re: CSS Inject für angezeigt Website
Der Reset des Ordners hatte den gewünschten Erfolg und die neue CSS / Font wurde geladen.
Ich vermute die CSS wir wirklich länger Zwischengespeichert - für gewöhnlich ist der Inhalt ja nicht so dynamisch
Ich vermute die CSS wir wirklich länger Zwischengespeichert - für gewöhnlich ist der Inhalt ja nicht so dynamisch