xig

Erstellt: 15.02.2016 09:05

Firefox übernimmt Standardmässig die Farben des System-Themes z.B von Xfce. Das ist eine nette Eigenschaft damit sich Firefox optisch mehr in das System eingliedert.

Leider gibt es viele unsauber programmierte Webseiten welche bei Textfeldern (Oder allgemein Input-Elementen) nur die Text- ODER die Hintergrundfarbe mitgeben aber nicht beides zusammen und davon ausgehen, dass alle als Standardeinstellung dunklen Text auf hellem Grund haben.

So ergibt sich unlesbarer schwarzer Text auf dunklem Hintergrund oder das entsprechende mit hellen Farben. Super!

Abhilfe schafft es Firefox andere Defaultwerte mit zu geben.

Hierzu legt man die Datei ~/.mozilla/firefox/PROFIL/chrome/userContent.css an.
Eine Beispieldatei mit dem Namen userContent-example.css ist schon vorhanden und kann kopiert werden.

Zusätzlich hinterlegt man für Select-Boxen eine kleine Grafik. Weil Select-Boxen haben keinen Pfeil-Button mehr, wenn mit "-moz-appearance: none" das System-Theme ausgeschaltet wird. Deshalb sollte man im Verzeichnis /home/USER/.mozilla/firefox/PROFIL/chrome/down_arrow_select.jpg noch eine Pfeil-Grafik abgelegt werden. (Sucht was hübsches in der Bildersuche eurer Suchmaschine mit "Arrow down select".)

"PROFIL" in den Pfaden sollte gegen das eigene aktuelle Firefox-Profil ersetzt werden.
Das aktuell genutzt Profil erfährt man über:
Hilfe -> Informationen zur Fehlerbehebung ->  Profilverzeichnis -> "Ordner öffnen".
(Help -> Troubleshooting Information -> Profile Folder -> "Show Folder")

"USER" muss gegen den eigenen System-User ersetzt werden.

Der Datei ~/.mozilla/firefox/PROFIL/chrome/userContent.css kann nun folgender Inhalt hinzugefügt werden:

/* ~/.mozilla/firefox/PROFIL/chrome/userContent.css */
button,
input,
input[type="radio"],
input[type="checkbox"],
input[type="reset"],
input[type="button"],
input[type="submit"],
select,
textarea {
        -moz-appearance: none !important; /* Deaktiviert den Look vom System-Theme */
        background-color: #FAFAFA; /* Gibt eine helle Hintergrundfarbe mit */
        color: #000000 /* Färbt den Text schwarz */
}
:disabled {
        color: #B1B1B1 /* deaktiviertes ausgrauen */
}
/* select extra, damit der Pfeilbutton nicht verschwindet, Grafik muss hinterlegt sein! */
select:not([multiple]) {
        background-image:url("file:///home/USER/.mozilla/firefox/PROFIL/chrome/down_arrow_select.jpg") !important;
        background-position: right !important;
        background-repeat: no-repeat !important;
        background-size: contain !important; /* Uebernehme die Grösse der Select-Box */
        padding-right: 1.5em; /* Schaffe ein wenig Platz für den Pfeil */
}

Nachdem Firefox neu gestartet wurde, sollten die Textfelder, Selectboxen und ähnliches wieder lesbar sein.

Sicherlich ist diese Vorlage noch nicht für jede Webseite Ideal, Verbesserungen nehme ich gerne entgegen.

Update: ":not([multiple])" bei select verhindert, dass Selectboxen mit multipler Auswahlmöglichkeit ohne Dropdown einen Dropdown-Pfeil bekommen.

Update 2: ":disabled" gibt die Eigenschaften von deaktivierten Elementen aus.

Tagged: Browser Firefox Linux XFCE