CSS Inject für angezeigt Website

Hier könnt ihr Wünsche und Ideen posten
Antworten
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

CSS Inject für angezeigt Website

Beitrag von benste »

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.
Sebastian
SongBeamer Team
Beiträge: 6019
Registriert: Fr Nov 14, 2003 11:31 pm

Re: CSS Inject für angezeigt Website

Beitrag von Sebastian »

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
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

Re: CSS Inject für angezeigt Website

Beitrag von benste »

Hi, habe mal ein bisschen gebastelt ...

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();
Die verlinkte Datei ist dann eine entsprechend passende CSS (die vom Webserver aus erreichbar sein muss), in meinem Fall

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}
Im Ergebnis wird dann aus
https://elkw1610.krz.tools/?q=churchcal ... nfoScreen/
Vorher:
Screenshot from 2022-11-19 10-57-08.png
Screenshot from 2022-11-19 10-57-08.png (223.1 KiB) 5850 mal betrachtet
Nacher:
Screenshot from 2022-11-19 10-57-41.png
Screenshot from 2022-11-19 10-57-41.png (218.44 KiB) 5850 mal betrachtet
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 ...
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

Re: CSS Inject für angezeigt Website

Beitrag von benste »

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

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();
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 ...
Sebastian
SongBeamer Team
Beiträge: 6019
Registriert: Fr Nov 14, 2003 11:31 pm

Re: CSS Inject für angezeigt Website

Beitrag von Sebastian »

Ich hab da noch nicht weiter gefortscht, es gab immer dringendere Dinge.
Gruß, Sebastian
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

Re: CSS Inject für angezeigt Website

Beitrag von benste »

Kurze Zwischenmeldung für Interessierte - Sebastian hat es experimentell in der 6.08d implementiert und wir testen es dann bald.
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

Re: CSS Inject für angezeigt Website

Beitrag von benste »

@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?
Sebastian
SongBeamer Team
Beiträge: 6019
Registriert: Fr Nov 14, 2003 11:31 pm

Re: CSS Inject für angezeigt Website

Beitrag von Sebastian »

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.
Gruß, Sebastian
benste
Beiträge: 87
Registriert: Mo Sep 20, 2021 7:57 am

Re: CSS Inject für angezeigt Website

Beitrag von benste »

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 :)
Antworten