Passen Sie das Erscheinungsbild von Firefox ganz einfach mit Stylish an

Passen Sie das Erscheinungsbild von Firefox ganz einfach mit Stylish an

⌛ Reading Time: 6 minutes

Während Software vom Desktop in die Cloud verlagert wird, verbringen wir immer mehr Zeit in Webbrowsern und verwenden alle Arten von Web-Apps und -Diensten. Jeden Tag auf die gleichen Websites zu schauen, kann sehr schnell langweilig werden. Wussten Sie, dass Sie das Erscheinungsbild jeder einzelnen Website, die Sie besuchen, ändern können?

Stilvoll ist ein beliebtes und erstaunlich leistungsfähiges Add-On für Firefox (und Chrom!), mit dem Sie ändern können, wie verschiedene Websites in Ihrem Browser aussehen. Natürlich ändert Stylish weder die Websites direkt auf ihren Servern noch beeinflusst es, wie sie für andere Benutzer aussehen. Die Änderungen gelten nur lokal. Sie sind in CSS geschrieben und funktionieren ähnlich wie das Konzept von Skins für Desktop-Anwendungen.

Stilvolle „Skins“ werden als Benutzerstile bezeichnet, und buchstäblich Tausende von ihnen sind kostenlos beim Beamten erhältlich Userstyles.org Webseite. Es ist jedoch auch möglich, eigene Stile zu schreiben, und es ist nicht allzu schwierig.

Wie funktioniert Stylish?

Sie können Stylish wie jedes andere Firefox-Add-On installieren: von offizielle Add-On-Website oder von der about:addons Klicken Sie auf die Registerkarte “Add-Ons abrufen”. Stilvoll erstellt ein Symbolleistensymbol, und Sie können auf das Menü zugreifen, indem Sie darauf klicken. Alle von Ihnen installierten oder erstellten Benutzerstile befinden sich auf der Registerkarte “Add-Ons” auf der Registerkarte “Benutzerstile”.

Hier können Sie sie bearbeiten und vorübergehend deaktivieren oder ganz entfernen. Firefox benachrichtigt Sie, wenn ein Update für Ihre Stile gefunden wird, da dies automatisch für diejenigen erfolgen kann, die von Userstyles.org installiert wurden. Wenn Sie Ihre eigenen Stile erstellen möchten, finden Sie die entsprechenden Optionen im Menü Stilvoll.

Das stilvolle Menü.

Da Benutzerstile Teile von CSS sind, können sie nur die Elemente der Schnittstelle beeinflussen, die CSS zulässt. nämlich Schriftarten, Farben, Transparenz, Bilder und die Anordnung von Elementen auf einer Webseite. Bevor Sie Ihr erstes Stylish-Skript schreiben, sollten Sie sich mit den von Stylish unterstützten Stiltypen vertraut machen.

Arten von Benutzerstilen

Es gibt drei Arten von Benutzerstilen: App, Global und Site.

  • App-Stile Ändern Sie das Aussehen von Firefox selbst. Sie sind zwar nicht so vielseitig wie Firefox-Designs, aber Sie können sie verwenden, um das Aussehen leerer Registerkarten und Kurzwahlregisterkarten zu ändern, Ihre Startseite zu personalisieren, die Farbe und Größe von Bildlaufleisten und einigen anderen Elementen des Browserfensters zu ändern.
  • Globale Stile wirken sich auf alle Websites aus, die Sie über den Browser besuchen, in dem sie installiert sind. Sie ändern normalerweise Schriftarten, ändern Text- und Hintergrundfarben oder transformieren Ihren Cursor.
  • Site-Stile sind die beliebtesten und gelten für einzelne Websites, bestimmte URLs, Domains oder Subdomains. Die Änderungen reichen von einfachen Schrift- und Farbanpassungen bis hin zu vollständigen Überholungen des Erscheinungsbilds. Site-Stile werden häufig von Nostalgikern verwendet, die das neue YouTube- oder Facebook-Redesign „hassen“. Sie sind jedoch auch nützlich, um Anzeigen, Social Media-Schaltflächen und Overlays auszublenden.

Durch Klicken auf die Option „Neuen Stil schreiben“ im Menü „Stilvoll“ wird der Editor geöffnet. Es gibt zwei Bearbeitungsmodi: Orion (siehe Abbildung unten) und Standard, die durch Ändern von aktiviert werden können extensions.stylish.editor Wert auf 1 in about:config.

Wenn Sie auf

Jeder Benutzerstil beginnt mit der @ Namespace-Deklaration, gefolgt von url(http://www.website.com);. Site-spezifische Stile enthalten auch eine @ -moz-document-Regel, die einen von vier Typen annehmen kann (url, url-prefix, domain, regexp), je nachdem, ob Sie alle URLs einer Domain oder nur die angegebene beeinflussen möchten. Beim Definieren von URLs können Sie keine Platzhalter verwenden (z. B. können Sie nicht schreiben domain(*.website.com)), aber reguläre Ausdrücke mit Platzhaltern sind zulässig. Das Stilvolle Wiki-Seite auf GitHub bietet weitere Informationen zum Einrichten eines Benutzerstils.

Um zu bestimmen, welche Elemente einer Website in den Benutzerstil aufgenommen werden sollen, können Sie sich auf Firefox Web Developer-Tools verlassen. Genauer gesagt, den Inspektor, auf den Sie zugreifen, indem Sie „Strg + Umschalt + C“ drücken. In der Konsole, die am unteren Rand des Fensters geöffnet wird, können Sie verschiedene Elemente einer Website auswählen, deren Namen überprüfen und den erforderlichen Code in Ihren Benutzerstil auf der Registerkarte Editor kopieren.

Sofern Sie nicht etwas wirklich Spezifisches ändern oder einen Stil auf eine obskure Website anwenden möchten, besteht eine gute Chance, dass Sie genau den Stil finden, den Sie in der Userstyles.org-Sammlung suchen. Ihre Stile decken die beliebtesten Social-Media-Websites, Nachrichtenportale und Web-Apps ab. Obwohl es einige schmerzhaft schlechte Exemplare gibt (hauptsächlich in der Kategorie Tumblr), sind die meisten Benutzerstile schön, voll funktionsfähig und oft aktualisiert. Hier sind einige Empfehlungen, um Ihnen den Einstieg zu erleichtern.

App-Stile

Einfache Startseite – eine anpassbare about:home Stil mit optionalem animiertem Logo.

Einfache Startseite: about: home theme.

Firefox-Schaltflächen einfärben – bringt etwas Farbe in das neue Firefox-Menü.

Firefox-Schaltflächen einfärben: Symbolleistenschaltflächen einfärben.

Firefox Panorama Metro – Lässt Ihre Firefox-Registerkarten in der Panorama-Ansicht (Alle Registerkarten) wie Kacheln der Metro-Benutzeroberfläche unter Windows 8 aussehen.

Firefox Panorama Sharper Metro Glass: Für Firefox 4 und höher.

Probiere auch Australis abgerundete kleine Tabs Wenn Sie die Form und Größe von Registerkarten in der Registerkartenleiste ändern möchten.

Globale Stile

Globaler dunkler Stil – macht alle Websites dunkel, sodass sie gut zu Ihrem dunklen Firefox- oder Desktop-Thema passen. Ähnlich, Globale Schriftgröße zwingt alle Websites, die Schriftarteinstellungen Ihres Browsers einzuhalten.

Der globale dunkle Stil ändert alles in DUNKEL.

Site-Stile

Perfektes Facebook-Theme – eines von vielen fantastischen Facebook-Facelifts auf Userstyles.org.

Perfektes Facebook-Theme: Schön und einfach.

Minimales Twitter und Tweetdeck Metro Light Bringen Sie das Beste aus Material Design und Metro UI in Ihre bevorzugten Web-Apps.

Minimales Twitter Creamy Blue: Twitter mit Kreisavataren.

Andere soziale Medien:
Reddit überarbeitet – eine minimalistische Neugestaltung von Reddit, die es weniger überladen und angenehmer zu lesen macht.

Tumblr, das alte Design – für alle Tumblr-Nutzer, die über den neuen Look unglücklich sind.

Erinnern Sie sich an Goodreads und seine altmodische Atmosphäre? Goodreads personalisiert lässt es viel moderner aussehen.

Goodreads Personalisiert: Ändern Sie Ihr Thema.

Versuchen Sie es mit einer besseren Lesbarkeit auf Wikipedia Wikipedia Minimalistisch und Wikipedia Lesbare Silbentrennung.

Mit Trello Clear und Trello Ultimate Flatbenötigen Sie keine Pro-Version, um Ihre bevorzugte Produktivitäts-App anzupassen.

Trello Clear: Klare und leicht überarbeitete Benutzeroberfläche.

Last but not least können Sie mit Stylish machen Google Mail und Google-Suche sehen aus wie Outlook:

Outlook.com-Stil für Google Mail.

Windows 8-ähnliches Thema für die Google-Suche.

Mögen Sie es, Ihren Webbrowser anzupassen? Haben Sie Stylish ausprobiert? Informieren Sie uns in den Kommentaren über andere coole und nützliche Stylish-Skripte.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.