Anpassen der Ansicht von Firefox Reader zur besseren Lesbarkeit
Die Reader-Ansicht ist eine beliebte Funktion des Firefox-Browsers ändert das Aussehen einer Webseite und macht es lesbarer durch visuelle Unordnung entfernen wie Bilder, Anzeigen, Kopfzeilen und Seitenleisten. Die Reader-Ansicht ist jedoch nicht für alle Startseiten verfügbar.
Wenn die Funktion für eine bestimmte Seite verfügbar ist, finden Sie das Symbol, um es in der Form a zu aktivieren kleines Buchsymbol wird rechts von der Adressleiste angezeigt.
Es gibt einige eingebaute Optionen, mit denen der Leser das Erscheinungsbild der Benutzeroberfläche anpassen kann Leseransicht. Wir werden uns diese Optionen ansehen, bevor wir Ihnen zeigen, was Sie tun können, um das Aussehen der Reader-Ansicht weiter zu personalisieren. Zu Demonstrationszwecken werde ich einen Artikel von National Geographic verwenden.
Vorgefertigte Optionen
In Firefox Reader View sind einige vordefinierte Anpassungsoptionen wie Dunkel, Hell und Sepia enthalten Hintergründe, einstellbar Schriftgrößen, und Serife und Sans-Serif Schriften. Sie können das Thema mit anpassen die CSS-Regeln überschreiben dieser bereits bestehenden Optionen.
Ich verwende eine dunkle Skin mit Serifenfonts, was bedeutet, dass ich in meinem Fall die zugehörigen CSS-Klassen überschreiben muss .dunkel und .serif.
Wenn Sie eine andere Designvariante (Skin + Schriftart) anpassen möchten, müssen Sie dies tun Verwenden Sie die entsprechenden CSS-Selektoren. Sie können dies mit Hilfe der Firefox Developer Tools überprüfen, indem Sie F12 drücken.
Erstellen Sie die benutzerdefinierte CSS-Datei
Sie müssen eine Datei mit dem Namen erstellen userContent.css in der Chrom Ordner von Ihren Firefox-Profilordner für Ihre Reader View Anpassungen. Um den Ordner Ihres Firefox-Profils zu finden, geben Sie Folgendes ein über: unterstützung in die URL-Leiste und drücken Sie die Eingabetaste.
Sie finden sich auf einer Seite, die das enthält technische Daten zu Ihrer Firefox-Installation. Klicken Sie auf die Schaltfläche Show Folder (Ordner anzeigen), und Ihr Profilordner wird geöffnet.
Erstellen Sie einen Ordner mit dem Namen Chrom in Ihrem Profilordner (wenn Sie ihn noch nicht haben) und eine Datei aufgerufen userContent.css in der Chrom Mappe. Der Dateipfad sieht folgendermaßen aus:
… \ Profile \\ chrome \ userContent.css
Fügen Sie die benutzerdefinierten CSS-Regeln hinzu
Sobald Sie erstellt und geöffnet haben userContent.css In einem Code-Editor müssen Sie Ihre CSS-Regeln hinzufügen. Um das Design der Reader-Ansicht anzupassen, müssen Sie dies tun Ziel der mit den entsprechenden Selektoren markieren.
Sie können die folgenden Selektoren für die verschiedenen Standardoptionen verwenden:
/ * Wenn dunkler Hintergrund ausgewählt ist * /: root [hasbrowserhandlers = "true"] body.dark / * Wenn heller Hintergrund ausgewählt ist * /: root [hasbrowserhandlers = "true"] body.light / * When Sepia Hintergrund ist ausgewählt * /: root [hasbrowserhandlers = "true"] body.sepia / * Wenn Serifenschrift ausgewählt ist * /: root [hasbrowserhandlers = "true"] body.serif / * Wenn serifenlose Schriftart ist selected * /: root [hasbrowserhandlers = "true"] body.sans-serif
Sie können die Klassen auch kombinieren, um auf eine bestimmte Kombination von Einstellungen abzustimmen.
/ * Wenn dunkler Hintergrund und Serifenschrift ausgewählt sind * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Wenn Sepia-Hintergrund und serifenlose Schriftart ausgewählt werden * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Verwende nicht der gemeinsame Wähler : root [hasbrowserhandlers = "true"] body alle Einstellungen gleichzeitig anvisieren. Es wird funktionieren, aber es wird funktionieren wirken sich auch auf andere Browserseiten aus, sowie über: newtab, als ihre Wurzelelemente tragen auch die hasbrowserhandlers Attribut (das zum Markieren der Ereignishandler von internen Firefox-Seiten verwendet wird, z. B. Über: Seiten).
Hier ist der Code, den ich hinzugefügt habe userContent.css. Ich habe die Schriftfamilie, den Schriftstil, die Farben geändert und den Textcontainer erweitert. Sie können andere Stilregeln nach Ihrem Geschmack verwenden.
/ ** userContent.css ************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "kurier neu"! wichtig; : root [hasbrowserhandlers = "true"] body.dark.serif Hintergrundfarbe: # 13131F! important; Farbe: # BAE3DB! wichtig; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! important; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3:: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! important; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Beachten Sie, dass es notwendig ist, das zu verwenden !wichtig Stichwort in userContent.css für alle CSS-Regeln. Der Browser fügt vom Benutzer angegebene Eigenschaftswerte hinzu vor den vom Autor angegebenen Werten (der Entwickler der angegebenen Webseite, hier die Reader-Ansicht). Daher ist jeder vom Benutzer angegebene Eigenschaftswert ohne die !wichtig Das Schlüsselwort funktioniert nicht, wenn ein vom Autor angegebenes Stylesheet auch auf dieselbe Eigenschaft abzielt, da es überschrieben wird.
Endergebnis
Die Änderungen an meinem Reader View-Thema werden unten angezeigt. Verwenden Sie Ihre eigenen CSS-Regeln, um das Design Ihrer eigenen personalisierten Firefox-Reader-Ansicht anzupassen.
Vor
Nach dem
Wenn Sie sich eingehender mit der Theme-Anpassung der Firefox-Tools beschäftigen möchten, lesen Sie mein vorheriges Tutorial zur Anpassung des Firefox Developer Tools-Designs.
