Ändern der Farbe von Menüs von Erweiterungen und Farbänderungen in Erweiterungen generell (konkret Feedbro)

    Hallo,

    ich habe jetzt schon gelesen, dass man im Profilordner im Ordner extensions die Erweiterungen findet.
    Feedbro hat bei mir dort den Namen: {a9c2ad37-e940-4892-8dce-cd73c6cbbc0c}.xpi

    Ich habe darin was geändert an Farbwerten und dann wieder als xpi abgespeichert. Das scheint aber nicht zu funktionieren, denn danach ist alles auf Standardwerten.

    Ich würde gerne folgendes Blaue mit meinem eigenen Farbcode ersetzen und auch beim geöffneten Feedbro etwas ändern, z.B. die Hintergrundfarbe, weil es nur vier verschiedenen Themes zur Auswahl gibt. [attachment=0]test.png[/attachment]

    Zitat von testerer


    Ich habe darin was geändert


    Das funktioniert so auch nicht (mehr).

    Früher konnte man die xpi ändern, und musste dann die geänderte Erweiterung wieder neu installieren.

    Das funktioniert ebenfalls nicht mehr, denn jetzt muss die geänderte xpi von Mozilla wieder (freigegeben - verifiziert) werden.
    Dazu muss man selber bei Mozilla (AMO) angemeldet sein etc. etc.

    Du kannst höchstens den Entwickler anschreiben, hier ist die E-Mail-Adresse:

    Code
    feedbro.reader@gmail.com

    Feedbro verwendet 4 verschiedene Themes, sprich darin ist alles festgelegt. Eine benutzerdefinierte Einstellung ist da wohl nicht vorgesehen. Allerdings scheinen sich die Themes nicht auf das Überhangmenü auszuwirken, denn dessen Hintergrundfarbe bleibt immer weiß und die Hervorhebungsfarbe immer blau.

    Edit 2002Andreas
    Aus Spamgründen habe ich den Link mal unklickbar gemacht.

    Ü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

    Hallo,
    mal für DUMMYS,
    wo liegt denn der Feedbro-Ordner mit der/den .css-Dateien?
    C:\Users\x\AppData\Roaming\Mozilla\Firefox\Profiles\12345.default\...
    und dann?
    oder doch ganz woanders?
    SuFu auf Rechner findet leider: NICHTS
    Danke i.v.
    Ralf

    Erfolg!
    Habe den content aus der Erweiterung so in die userContent.css eingefügt:

    Code
    @-moz-document url-prefix("moz-extension://2aaa3292-1ae9-4364-ba55-163180171af3/") {......}


    Jetzt geht's ans Ändern! Erste Erfolge sind schon sichtbar.
    Danke!

    Zitat von testerer


    Ich habe darin was geändert an Farbwerten und dann wieder als xpi abgespeichert. Das scheint aber nicht zu funktionieren


    Für dein gewünschtes Vorhaben ist das auch nicht die ideale Methode, denn dann müsstest du, wie schon von den anderen Vorpostern erwähnt wurde, für jegliche Art von Änderung jedes-mal die xpi-Datei neu auf der AMO-Seite signieren lassen.
    Der deutlich bessere Weg ist solche optischen Änderungen über eine userContent.css zu realisieren, mit welcher man eben nicht nur das Aussehen von Webseiten anpassen lassen kann, sondern auch derer von Webextensions und internen Firefox-Seiten.

    Zitat von testerer


    Ich würde gerne folgendes Blaue mit meinem eigenen Farbcode ersetzen


    Das gezeigte Blau könntest du dabei mittels userContent.css und folgendem CSS-Code abändern lassen:

    CSS
    @-moz-document url-prefix("moz-extension://Interne-UUID-von-Feedbro/") {
   div#menuitems div.menuitem:hover {
    background-color: #4d4d4d !important; 
 }
}


    Bei diesem CSS-Code müsstest du noch "Interne-UUID-von-Feedbro" mit deiner Internen UUID von Feedbro ersetzen, da ja diese bei jeder Firefox-Installation einzigartig ist. Die jeweilige Interne UUID von Feedbro kannst du dabei unter about:debugging (in Adresszeile eingeben) nachsehen.

    Zitat von ralf61


    Habe den content aus der Erweiterung so in die userContent.css eingefügt:


    Ergänzend gibt es noch zu sagen, dass deine erwähnte Zeichenfolge unter "moz-extension://.../" nur bei dir funktionieren wird, da die Interne UUID der jeweiligen Erweiterung bei jeder Firefox-Installation anders sein wird. Aus diesem Grund muss jeder zwingend seine Interne UUID für die gewünschte Erweiterung unter about:debugging nachsehen und danach in seinem CSS-Code nachtragen, falls man mittels userContent.css das Aussehen von Webextensions anpassen lassen möchte.

    Hätte ich nicht besser erklären können!
    Hier eine Zusammenfassung "Erweiterungsseite am Beispiel Feedbro ändern":

    Es gibt unter "about:debugging" die
    ERWEITERUNGS-ID sowie die
    INTERNE UUID.
    ERWEITERUNGS-ID ist auf allen Rechnen identisch.
    INTERNE UUID ist auf allen Rechnen anders.

    Erweiterungssite am Beispiel Feedbro ändern, step by step:

    Ordner der zu ändernden Erweiterung finden:
    "C:\Users\(Name des Users )\AppData\Roaming\Mozilla\Firefox\Profiles\(Name des profils)\extensions\"

    Erweiterung im Ordner "extensions" suchen:
    nach der ERWEITERUNGS-ID aus "about:debugging" suchen
    HIER als Beispiel die ERWEITERUNGS-ID von Feedbro: {a9c2ad37-e940-4892-8dce-cd73c6cbbc0c}, die Dateiendung ist .xpi
    (Anmerkung: die ERWEITERUNGS-ID vom Beispiel Feedbro ist auf allen Rechnen identisch)

    Datei irgend-wohin-kopieren, die original.xpi so lassen, nicht verändern
    kopierte Datei umbenennen in .zip
    entpacken
    nach .css-Dateien suchen, nachdenken was verändert werden soll - weniger ist mehr -
    relevanten css-Dateiinhalt in die Zwischenablage kopieren oder sonst-wohin

    Und jetzt in der userContent.css-Datei
    "C:\Users\(Name des Users )\AppData\Roaming\Mozilla\Firefox\Profiles\(Name des Profils)\chrome\userContent.css"

    diesen Code mit der INTERNEN UUID aus "about:debugging" einfügen

    Code
    @-moz-document url-prefix("moz-extension://INTERNE UUID/") 
{
Hier kommt der selektierte Quelltext der zuvor kopierten und gespeicherten .css aus der  .xpi rein
}


    (Anmerkung: die INTERNE UUID von Erweiterungen ist auf allen Rechnen anders, deshalb: in "about:debugging" nachschauen)

    Und nun kann die userContent.css geändert werden...

    That's it, weniger kompliziert als sich das anhört, just do it...

    Zitat von testerer


    Wie kann man denn am besten die einzelnen Elemente inspizieren


    Mittels den Entwicklerwerkzeugen/Browser-Werkzeuge von Firefox. Voraussetzung dafür ist, dass in den Einstellungen von den Entwicklerwerkzeugen (Strg+Umsch+I -> Dreipunktemenü -> Einstellungen) die Optionen "Debugging Werkzeuge für Browser-Chrome und Add-ons aktivieren" und "Externes Debugging aktivieren" aktiv hast. (siehe Screenshot 1)

    Danach kann man unter about:debugging die gewünschte Erweiterung direkt debuggen (siehe Screenshot 2).
    Mit dem Zieldokumentauswähler lässt sich beispielsweise direkt das gewünschte Iframe auswählen, welches man gerne inspizieren möchte. (hier der Feedreader selbst --> siehe Screenshot 3), damit man dann später mittels des Inspektors jedes Element des Feedreader selbst frei inspizieren kann wie auch CSS-Regeln direkt temporär abändern kann. (siehe Screenshot 4) Innerhalb des Reiters Stilbearbeitung kann dann noch jede verwendete CSS-Datei begutachtet werden.

    [attachment=3]firefox_2019-02-22_18-55-54.png[/attachment][attachment=2]2019-02-22_18-59-34.png[/attachment][attachment=1]firefox_2019-02-22_19-00-13.png[/attachment][attachment=0]firefox_2019-02-22_19-24-38.png[/attachment]

    Eine Frage hätte ich noch:

    Wie kann ich ein Element ausblenden, welches standardmäßig vorhanden ist?
    Es geht um ein background-image:

    Code
    div#titles > div.datedivider {
    background-image: -webkit-linear-gradient(top, #222222 0%, #333333 100%);
    border-color: #555555;
    color: #bbb;
}
    Zitat von testerer


    Wie kann ich ein Element ausblenden, welches standardmäßig vorhanden ist?
    Es geht um ein background-image:


    Geht beispielsweise folgendermassen:

    CSS
    div#titles > div.datedivider {
    background-image: none !important;
}


    Anstatt von none würde ebenfalls auch unset funktionieren, um einen definierten Wert in einer CSS-Regel auf einen Initialwert zurückzusetzen (hier hat es keinen).

    Wirklich Danke dir!

    Ich brauche doch noch einmal Hilfe, weil ich einen Knoten löschen möchte und ich es nicht hinbekomme. Es geht um den Text "enclosure:"

    Ich möchte dort nur den nachfolgenden Link haben. Ich kann zwar sagen "Knoten löschen", damit er weg ist, aber das ist ja nur temporär. Ich weiß nicht, was man in die userContent.css eintragen muss.

    [attachment=0]Knoten.png[/attachment]

    Zitat von testerer


    Ich brauche doch noch einmal Hilfe, weil ich einen Knoten löschen möchte und ich es nicht hinbekomme. Es geht um den Text "enclosure:"


    Hier haben wir wohl leider das Problem, dass der Textteil "enclosure:" keinem CSS-Element zugeordnet ist, weswegen du diesen nicht per CSS selektieren und abändern/ausblenden wirst können.
    Die einzig Idee die ich hätte, wie man dennoch diesen Textteil entfernen könnte, wäre es den Quellcode der Javascript-Datei zu editieren (/scripts-core/feedbro.min.js), und dabei den Text "enclosure:" dort herauszulöschen.

    Ich war jedoch einmal so frei, und habe für dich diese kleine Modifikation vorgenommen und habe auch gleich die .xpi Datei neu signieren lassen.
    Du kannst dabei die von mir modifizierte xpi-Datei von Feedbro hier runterladen: https://workupload.com/file/yVrzHHkc
    Die modifizierte xpi-Datei kannst du dann innerhalb des Add-ons Manager mittels "Add-ons aus Datei installieren" über die bestehende Feedbro-Installation installieren lassen.
    Wenn es geklappt haben sollte, sollte jetzt der Textteil "enclosure:" in der Feedansicht verschwunden sein (siehe auch Screenshot)
    Nachteil an der ganzen Sache ist, dass wenn einmal die Erweiterung aktualisiert werden sollte, du diese Modifikation wieder erneut tätigen wirst müssen + neu-signieren der xpi-Datei.

    [attachment=0]2019-02-23_18-07-06.png[/attachment]