Berny’s Knowledgebase > Client-Anwendungen > Stylish Firefox AddOn
Habt Ihr Euch auch schon mal über unübersichtliche Webseiten geärgert? Manche davon nutzt Ihr vielleicht sogar recht häufig. Habt Ihr Euch auch schon mal gewünscht, Euch diese selber anpassen zu können? Mit dem FireFox Addon Stylish ist genau das möglich.
Das Prinzip ist ganz einfach: In HTML ist es von Haus aus vorgesehen, Inhalte und Layout zu trennen. Für die Inhalte ist HTML da, für das Layout CSS. Der Browser bringt beides zusammen und stellt die HTML-Seite so dar, wie im CSS beschrieben. An genau dieser Stelle greift jetzt Stylish ein. Am CSS das vom Webserver kommt, kann man lokal noch Änderungen vornehmen, bevor der Browser die Seite darstellt. Somit kann sich jeder seine Lieblingsseiten nach eigenem Geschmack umgestalten.
Howto
Zunächst ist natürlich Stylish als Addon im Firefox zu installieren. Und dann braucht man natürlich noch Styles für die Seiten, die einem nicht gefallen und die man auch häufig benutzt. Man kann Styles verwenden, die andere Leute zur Verfügung gestellt haben. Am einfachsten begibt man sich auf die zu verändernde Seite, klickt unten rechts im FireFox auf das Stylish-Icon und wählt "Stile für diese Seite suchen". Vielleicht findet man ja etwas, was einem zusagt.
Ansonsten kann man natürlich bestehende Styles anpassen oder komplett eigene erstellen. Das ist gar nicht so aufwändig, wie sich das anhört. Oft reichen schon ganz wenige Änderungen am Layout der Seite, um deutlich mehr Übersichtlichkeit zu bekommen. Die unten genannten Beispiele sind nicht umsonst meist nur wenige Zeilen lang. Allerdings braucht man dafür ein paar Kenntnisse von CSS, ich empfehle für die Einarbeitung z. B. den entsprechenden Teil von SelfHTML.
Vielleicht wollt Ihr einfach mit "Learning by Doing" anfangen? Geht dazu auf eine der Seiten, für die es unten ein Beispiel gibt, klickt das Stylish-Icon rechts unten im FireFox an und wählt "Stile erstellen" > "Für diese URL…" (oder wahlweise "Für <Domainname>…", je nachdem ob der Style für genau die eine Seite, oder die ganze Domain gelten soll). Das Grundgerüst ist dann schon mal vorgegeben. Eure ersten Inhalte könnt Ihr aus den Beispielen unten rauskopieren und dann damit rumspielen. Viel Spass dabei…
Spätestens wenn Ihr anfangt Eure komplett eigenen Styles für bestimmte Seiten zu erstellen, steht Ihr dann vor der Herausforderung, den Aufbau der Seite und der verwendeten CSS-Elemente erst mal untersuchen und verstehen zu müssen. Dazu drückt Ihr auf der entsprechenden Seite im Firefox F12 und wechselt auf den Reiter "Inspektor". Aber das ist eine eigene Geschichte, die erzähle ich Euch ein ander Mal…
Beispiele
Mich persönlich stört an Webseiten am meisten, wenn sie überladen und unübersichtlich sind. Deshalb beschränken sich die Beispiele unten (aus meinem Fundus) hauptsächlich darauf, überflüssige oder unerwünschte Elemente auszublenden. Teilweise wird dann noch den wichtigen Elementen mehr Platz zugewiesen, damit der dadurch frei gewordene Raum von diesen auch genutzt wird. Aber man kann mit Stylish noch deutlich mehr machen. Zahlreiche Styles unterschiedlichster Qualität sind z. B. auf http://userstyles.org/ zu finden.
Meine Beispiele werden in Zukunft sicher noch zahlreicher werden.
Style für Geocaching.com
Blendet Werbung und einige andere nutzlose Elemente aus, wie etwa den Hinweis auf die Haftungsausschlußerklärung. Somit bleibt mehr Platz für die Inhalte.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.geocaching.com") {
#feedback-tab { display: none !important; }
#ctl00_ContentBody_uxBanManWidget { display: none !important; }
#ctl00_ContentBody_BeginnerCachePanel { display: none !important; }
#ctl00_divContentSide { display: none !important; }
#ctl00_divContentMain { width: 100% !important; }
fieldset.DisclaimerWidget { display: none !important; }
}
Style für Heise Developer
Blendet diverse überflüssige Leisten aus. Von den eigentlichen Inhalten der jeweiligen Artikel erscheint so mehr auf der ersten Bildschirmseite.
@-moz-document url-prefix("http://www.heise.de/developer/") {
.bcadv { display:none !important; }
.adbottom { display:none !important;}
#bannerzone { display:none !important; }
#container_content { top:0 !important; }
#sitemap { display:none !important; }
}
Style für Heise Newsticker
Blendet alle möglichen Leisten und Banner aus. Minimalistische Darstellung mit Konzentration auf das Wesentliche.
@-moz-document url-prefix("http://www.heise.de/newsticker/") {
.bcadv { display:none !important; }
.adbottom { display:none !important;}
#mitte_rechts { display:none !important; }
#mitte_links { width:100% !important; }
#bannerzone { display:none !important; }
#container_content { top:0 !important; }
#sitemap { display:none !important; }
}
Style für ixquick.com
Blendet bei dieser Suchmaschine die gesponserten Ergebnisse sowie Eigenwerbung aus.
@-moz-document domain("ixquick.com") {
#sponsored { display:none !important; }
#ix_promo_box { display:none !important; }
}
Style für startpage.com
Blendet bei dieser Suchmaschine die gesponserten Ergebnisse aus.
@-moz-document domain("startpage.com") {
#sponsored { display:none !important; }
}