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

Stylish ist ein beliebtes und erstaunlich leistungsstarkes Add-on für Firefox (und Chrome!), Mit dem Sie die Darstellung verschiedener Websites in Ihrem Browser ändern können. Natürlich ändert Stylish weder die Websites direkt auf ihren Servern, noch beeinflusst es, wie sie anderen Benutzern gegenüber aussehen. Die Änderungen gelten nur lokal. Sie sind in CSS geschrieben und funktionieren ähnlich wie das Konzept der Skins für Desktop-Anwendungen.

Stilvolle "Skins" werden als Benutzer-Stile bezeichnet, und buchstäblich Tausende von ihnen sind kostenlos auf der offiziellen Website von Userstyles.org verfügbar. Es ist jedoch auch möglich, eigene Stile zu schreiben, und es ist nicht allzu schwierig.

Wie funktioniert stilvolle Arbeit?

Sie können Stylish wie jedes andere Firefox Add-on installieren about:addons Klicken Sie auf der offiziellen Add-ons-Website oder auf der Seite " about:addons " auf den Tab "Add-ons abrufen". Stylish erstellt ein Symbolleistensymbol und das Menü kann durch Klicken darauf aufgerufen werden. Alle Benutzerstile, die Sie installiert oder erstellt haben, befinden sich auf der Seite "Add-ons" auf der Registerkarte "User Styles".

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

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, ist es eine gute Idee, sich mit den von Stylish unterstützten Styles vertraut zu machen.

Arten von Benutzerstilen

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

  • App-Stile ändern das Aussehen von Firefox selbst; Sie sind zwar nicht so vielseitig wie Firefox-Themen, können jedoch verwendet werden, um das Aussehen leerer Tabs und Kurzwahlregisterkarten zu ändern, die Startseite zu personalisieren, die Farbe und Größe von Bildlaufleisten und einige andere Elemente des Browserfensters zu ändern.
  • Globale Stile wirken sich auf alle Websites aus, die Sie aus dem Browser aufrufen, in dem sie installiert sind. Sie ändern normalerweise Schriftarten, ändern Text und Hintergrundfarben oder transformieren den Cursor.
  • Websitestile sind am beliebtesten und gelten für einzelne Websites, bestimmte URLs, Domains oder Subdomains. Die Änderungen reichen von einfachen Schrift- und Farbeinstellungen bis hin zu kompletten Look-and-Feel-Überarbeitungen. Seitenstile werden oft von nostalgischen Leuten benutzt, die das neue YouTube- oder Facebook-Redesign "hassen", aber sie sind auch nützlich, um Anzeigen, Social-Media-Buttons und Overlays zu verstecken.

Wenn Sie im Menü Stil auf die Option "Neuen Stil schreiben" klicken, wird der Editor geöffnet. Es gibt zwei Bearbeitungsmodi: Orion (Bild unten) und Standard, die aktiviert werden können, indem der extensions.stylish.editor Wert in about:config auf 1 gesetzt wird.

Jeder Benutzerstil beginnt mit der @namespace-Deklaration, gefolgt von der url(http://www.website.com); . Site-spezifische Stile enthalten auch eine @ -Moz-Dokument-Regel, die einen von vier Typen annehmen kann ( url, url-prefix, domain, regexp ), abhängig davon, ob Sie alle URLs einer Domain oder nur die angegebene beeinflussen wollen . Wenn URLs definiert werden, können Sie keine Platzhalter verwenden (z. B. können Sie keine domain(*.website.com) schreiben), aber reguläre Ausdrücke mit Platzhaltern sind zulässig. Die stilvolle Wiki-Seite auf GitHub bietet weitere Informationen zum Einrichten eines Benutzerstils.

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

Es sei denn, Sie möchten etwas wirklich Spezifisches modifizieren oder einen Stil auf eine obskure Website anwenden, dann besteht eine gute Chance, dass Sie genau den Stil finden, nach dem Sie in der Userstyles.org-Sammlung suchen. Ihre Stile umfassen die beliebtesten Social-Media-Websites, Nachrichtenportale und Web-Apps. Obwohl es einige schmerzlich schlechte Exemplare gibt (hauptsächlich in der Tumblr-Kategorie), sind die meisten Benutzer Stile schön, vollständig funktional und oft aktualisiert. Hier sind ein paar Empfehlungen für den Einstieg.

App-Stile

Simple Start Page - eine anpassbare about:home Stil mit optionalen animierten Logo.

Colorize Firefox Buttons - bringt Farbe in das neue Firefox-Menü.

Firefox Panorama Metro - lässt Ihre Firefox-Registerkarten in der Panorama-Ansicht (Alle Registerkarten) wie Metro-UI-Kacheln von Windows 8 aussehen.

Versuchen Sie auch, Australis gerundete kleine Registerkarten zu verwenden, wenn Sie die Form und Größe von Registerkarten in der Registerkartenleiste ändern möchten.

Globale Stile

Global Dark Style - macht alle Websites dunkel, damit sie gut zu Ihrem dunklen Firefox- oder Desktop-Design passen. Entsprechend zwingt die globale Schriftgröße alle Websites dazu, die Einstellungen für Ihre Browserschriftart einzuhalten.

Websitestile

Perfect Facebook Theme - eines von vielen fantastischen Facebook Facelifts auf Userystyles.org.

Minimal Twitter und Tweetdeck Metro Light bringen das Beste aus Material Design und Metro UI in Ihre Lieblings-Web-Apps.

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

Tumblr, The Old Design - für alle Tumblr-Nutzer unzufrieden mit dem neuen Look.

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

Zur besseren Lesbarkeit in Wikipedia versuchen Sie Wikipedia Minimalistic und Wikipedia Readable Silbentrennung.

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

Last but not least können Sie mit Stylish Google Mail und die Google-Suche wie Outlook aussehen lassen:

Gefällt es Ihnen, Ihren Webbrowser anzupassen? Hast du es Stilvoll versucht? Lass uns über andere coole und nützliche Styleskripte in den Kommentaren wissen.