Script zu zuweisen einer CSS-Klasse gesucht

  • Hat sich schon mal ein "Scripter" Gedanken darüber gemacht ob man einem Element im FF, optimal wäre wohl das oberste "window"-Element mit der ID "#main-window", eine Klasse aus einer im Script vorgegebenen Auswahl (z.B. .farbe-1, .farbe-2, .farbe-3) zuordnen kann?

    Die ID "#main-window" ist ja auch ganz weit "oben" und kann ":root" gut ersetzen. Damit könnte man dann in der userChrome.css z.B. verschiedene Farbschemas (Variablen mit Werten füttern) vorsehen und per Button und Auswahl eines davon auswählen:

    #main-window.farbe-1 {Anweisungen...}
    #main-window.farbe-2 {Anweisungen...}
    #main-window.farbe-3 {Anweisungen...}

    Ach ja, der zuletzt gewählte Wert sollte natürlich gespeichet werden...

    Nur so mal als Gedanke - sollte aber universell verwendbar sein und nur durch den Scriptnamen oder eine Variable im Script einen "Namen" bekommen. Dann sind sicher noch andere schöne Sachen damit realisierbar.

    Ich mache zwar einiges mit CSS, aber mit Scripten habe ich es nicht so gut drauf...

    andreas: Bitte erst morgen kurz von 10:00 überlegen, dann kommen Dir ja die einfacher realisierbaren Gedanken :lol: .

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Ich mache zwar einiges mit CSS, aber mit Scripten habe ich es nicht so gut drauf...


    CSS und Skripte sind ja auch zwei verschiedene Paar Schuhe. Du meinst sicherlich CSS-Code.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • milupo: Genau das meine ich. Ich habe zwar auch schon ein paar mit JS-Scripte für die Webseite geschrieben, aber sich dann auch noch in den bestehenden FF reindenken - das ist was anderes...

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • milupo: Genau das meine ich.


    Ah, das war für mich nicht so klar ersichtlich.

    Zitat

    Ich habe zwar auch schon ein paar mit JS-Scripte für die Webseite geschrieben, aber sich dann auch noch in den bestehenden FF reindenken - das ist was anderes...


    Da bist du viel besser als ich ... :(

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Ja, klingt nach dem, was ich in dem von aborix erwähnten thread getan habe, also ein CSS-Switcher.
    Wenn du willst, kann ich dir das aktuelle Script nochmal komplett hier posten. :wink:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Das könnte man sicherlich auch mit nachgeladenen CSS-Dateien realisieren. Ich bin aber an sich kein Freund davon Dateien (auch längere CSS-Dateien) ohne notwendigkeit zu zerstückeln (nur um mehr Plattenzugriffe zu erzeugen).

    Anders ist es wenn die selben Teile in verschiedenen Dateien verwendet werden - dann wird alles gnadenlos auf verschiedene "Unterdateien" verlagert. Ja keinen Code doppelt schreiben. Aber sonst finde ich eine lange Datei besser (z.B. zum durchsuchen).

    Ich schau mit das aber noch mal genauer an.

    Das mit der zugeordneten Klasse wäre jedoch von überall im CSS einfach verwendbar.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Das könnte man sicherlich auch mit nachgeladenen CSS-Dateien realisieren. Ich bin aber an sich kein Freund davon Dateien (auch längere CSS-Dateien) ohne notwendigkeit zu zerstückeln (nur um mehr Plattenzugriffe zu erzeugen).


    Wenn es sich um eine Website handeln würde, könnte ich dir ja noch bedingt zustimmen. (Wenn ich mal SASS und LESS aussen vorlasse.) Aber für den Browser?
    Mehr Plattenzugriffe? Ich bitte dich... :roll:
    Davon abgesehen kannst du das Script leicht so umschreiben, dass man es auch auf Klassen anwenden kann.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • EffPeh:

    Ich verstehe so halbwegs wie das gemeint ist und es wird sicherlich auch funktionieren. Aber:

    Merkt sich das Script auch die zuletzt gewählte Include-Datei und benutzt sie beim nächen Start? Ich weiß nicht wo man das speichern könnte, evt in about:config?

    Und für mich wäre es recht umständlich zu handhaben, wie schon gesagt schreibe ich lieber alles in eine Datei. Ich ändere halt nicht gerne gleichzeitig in mehreren Dateien rum.

    Aber vielleicht hat ja jemand Muße so ein Script zu schreiben. Wenn es universell gahalten wird ist es sicher für viele Dinge zu gebrauchen...

    Ich lese mir Dein Script gerne noch mal in Ruhe durch (aber nicht mehr heute). Aber ob da was bei raus kommt??? Hmmm...

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • EffPeh:
    Merkt sich das Script auch die zuletzt gewählte Include-Datei und benutzt sie beim nächen Start? Ich weiß nicht wo man das speichern könnte, evt in about:config?

    Meine aktuelle Version macht das. Da wird die zuletzt genutzte include-ID in einer einfachen Textdatei direkt in chrome gespeichert. Also nicht die Version aus dem von aborix verlinkten thread. :wink:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Dann verrate mir doch bitte noch wo ich das neue Script finde. Ich werde ja bestimmt nicht dümmer wenn ich es lese - ob ich das dann auch begreife???

    danke, Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hier mein aktuelles Script:

    Und so sehen die CSS-includes in etwa aus:

    Da sind bei mir allerdings nur Farbvariablen drin.
    Und wie in dem anderen thread bereits geschrieben:
    Die CSS-includes sind mit einem Präfix benannt und bekommen eine ID-Nr angehängt.
    Also in meinem Fall etwa fp-switch-0.css, fp-switch-1.css, fp-switch-2.css, usw.
    Das erste File - hier die fp-switch-0.css - wird in der userChrome.css included, alle anderen werden bei Bedarf über das Script dynamisch geladen.
    Für den Switch-Button musst du dir dann im CSS noch eine Grafik anlegen. Oder direkt in den JS-Code einbauen.
    Der Button bekommt im Script dann noch einen Badge, der die ID der aktuell eingebundenen CSS-Datei anzeigt.
    [attachment=0]switch-shot.png[/attachment]

  • EffPeh:
    Funktionieren tut das Script sehr gut. Nachdem ich da einige Kommentare hinzu geschrieben habe, verstehe ich es auch so halbwegs (ganz noch nicht, einiges ist mir noch etwas zu hoch...). Die Dateinamen sind ja einfach anzupassen, nur wenn man die "Merkdatei" genauso beginnen läßt wie die CSS-Dateien - dann kommt die Zählung der Anzahl durcheinander, die wird dann halt mitgezählt. Aber mit solchen Feinheiten kann man gut leben. Die Funktion "setCSS" macht dann vermutlich letztendlich die Aktualisierung der Variablen, also die Einbindung und Aktualisierung des Codes?

    Sehr gut ist, daß die neuen Daten ohne Neustart wirksam werden.

    Fazit: Wenn es kein Script geben wird um eine Klasse an eine bestehende ID anzufügen ist dieses Script für mich zwar nur die zweite, aber eine gut funktioniernde Wahl.

    Danke jedenfalls dafür, Gruß Harry

    Ich sehe gerade in Deinem Beispiel, daß Du auch Ziffern in den Variablennamen verwendet hast. Bei mir meckert der Editor das an, daher dachte ich es sei nicht so richtig erlaubt?

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Die Dateinamen sind ja einfach anzupassen, nur wenn man die "Merkdatei" genauso beginnen läßt wie die CSS-Dateien - dann kommt die Zählung der Anzahl durcheinander, die wird dann halt mitgezählt. Aber mit solchen Feinheiten kann man gut leben.


    Es ist natürlich auch nicht sinnvoll, dieser Datei denselben Präfix zu vergeben und entspricht auch nicht der Logik des Scripts. Es geht ja darum, die Anzahl der include-Dateien zu ermitteln.
    ( siehe diese Zeile der Funktion countSwitch() > let n = leafName.search( switchPrefix ); )


    Die Funktion "setCSS" macht dann vermutlich letztendlich die Aktualisierung der Variablen, also die Einbindung und Aktualisierung des Codes?
    Sehr gut ist, daß die neuen Daten ohne Neustart wirksam werden.


    Richtig. Diese Funktion bindet die entsprechende include-Datei ein. Und natürlich wird das live umgesetzt, sonst wäre das ganze Script sinnlos, denn ansonsten könnte man das Einbinden dann auch manuell machen.


    Fazit: Wenn es kein Script geben wird um eine Klasse an eine bestehende ID anzufügen ist dieses Script für mich zwar nur die zweite, aber eine gut funktioniernde Wahl.


    Wie gesagt: Man kann das Script relativ leicht dem entsprechend anpassen. :wink:


    Ich sehe gerade in Deinem Beispiel, daß Du auch Ziffern in den Variablennamen verwendet hast. Bei mir meckert der Editor das an, daher dachte ich es sei nicht so richtig erlaubt?


    Sicher ist das erlaubt. Welchen Editor benutzt du denn und reagiert der Editor auch entsprechend auf die aktuell genutzte Sprache, in diesem Fall CSS?

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Danke Sören und EffPeh,

    ich benutze für so einfache Dinge meist "kate", das ist ein Standard-Editor unter Linux/KDE der so ziemlich alles versteht. Aber hier kommt er wohl irgendwo mit durcheinander. Ansonsten habe ich noch "Quanta Plus", der ist aber schon alt und lange nicht mehr aktualisiert, und noch "Bluefish", der ist mir aber zu mächtig für so einfache Dinge... Es gibt sicher noch einige andere Editoren, bisher reichte es mir jedoch.

    Du sagst das ist einfach anzupassen, aber für mich wohl doch zu viel. Man müßte dann ja auch ein Array mit den möglichen Klassennamen und evt einem ergänzenden Anzeigetext (Datei?) zur Auswahl haben. So mit dem durchtackern ist es schon gut, die Zählerei wäre dann halt die Zeilenanzahl in der Hilfsdatei. Und wenn die Maus drüber ist dann den ergänzenden Text anzeigen... Das beeinflußte Element kann hingegen fest sein (#main-window). Hast Du denn irgend ein Muster für mich? Aber es geht auch so. Ich denke ich gewöhne mich mit der Zeit an die ausgelagerten Dateien... Zuviel Arbeit ist es auch nicht wert.

    Dem Button habe ich noch einen bunten Hintergrund gegeben, kann dann ja auch je nach Design unterschiedlich sein:
    #user-farben .toolbarbutton-badge-stack {
    background: linear-gradient(#c33, #3c3, #33c) !important;
    height: 24px !important;
    }

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Du sagst das ist einfach anzupassen, aber für mich wohl doch zu viel. Man müßte dann ja auch ein Array mit den möglichen Klassennamen und evt einem ergänzenden Anzeigetext (Datei?) zur Auswahl haben. So mit dem durchtackern ist es schon gut, die Zählerei wäre dann halt die Zeilenanzahl in der Hilfsdatei. Und wenn die Maus drüber ist dann den ergänzenden Text anzeigen... Das beeinflußte Element kann hingegen fest sein (#main-window). Hast Du denn irgend ein Muster für mich? Aber es geht auch so. Ich denke ich gewöhne mich mit der Zeit an die ausgelagerten Dateien... Zuviel Arbeit ist es auch nicht wert.

    Dazu kann ich dir nicht wirklich etwas sagen. Du hast die Idee. Wie eine passende Struktur dazu ausschaut, kannst also auch nur du wissen bzw. dir überlegen. :)
    Aber davon abgesehen bin ich der Meinung, dass man mit include-Files am flexibelsten ist. Ich persönlich nutze das Script momentan nur, um die Farbe meiner Layout-Anpassung zu variieren. Aber theoretisch gesehen könnte man auf diese Weise auch zwischen vollständigen Layout-Designs wechseln.


    Dem Button habe ich noch einen bunten Hintergrund gegeben, kann dann ja auch je nach Design unterschiedlich sein


    Ja, wie bereits geschrieben: Den Switch-Button muss man sich selbst stylen. Da ist bei mir im CSS eine Hintergrundgrafik drin. Und die Badget diverser Extensions sind sowieso bereits irgendwo definiert.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)