Who to follow oder andere Webseitenbereiche mit Firefox-Erweiterung Stylish ausblenden

Nochmal ein Artikel zum Thema, wie man die bei einigen Twitter-Accounts angezeigten Follower-Vorschläge rechts («Who to follow») ausblenden kann. Wie das recht einfach geht, habe ich ja schon im Beitrag «Twitter gibt Empfehlungen: Who to follow» gezeigt. Da webtechnisch weniger Versierte offensichtlich Schwierigkeiten haben, mittels der Firefox-Erweiterung Greasemonkey und der anschließenden Installation von herunterladbaren Userskripten Bereiche auf Webseiten auszublenden, zeige ich hier noch eine zweite Variante, die wirklich kinderleicht umzusetzen ist. Und zwar mit der Firefox-Erweiterung Stylish. Sicherheitshalber gibt es eine Schritt-für-Schritt-Anleitung und ein kleines Tutorial, wie Ihr das auch auf anderen Webseiten einsetzen könnt.

KiGaNa wies heute Morgen schon kurz und knapp auf diese Lösung hin:

Gelobt sei die Stylish-Extension für den Firefox: “#recommended_users { display: none; }”, und es ist Ruhe im Karton. #twitterThu Aug 05 09:22:11 via web

Für alle, die Stylish noch nicht kennen, hier eine kleine…

Schritt-für-Schritt-Anleitung:

1. Firefox-Erweiterung Stylish installieren.
2. Wie nach jeder Erweiterungsinstallation in Firefox: den Browser neu starten.
3. Ganz unten rechts in Firefox auf das kleine ‘S’-Symbol klicken, Stil erstellen, Neuer Stil auswählen
4. Dem neuen Stil (s. Abbildung) einen frei wählbaren Namen geben. Vorschlag: Remove Who to follow
Stylish - Neuer Stil
5. In das große Textfeld darunter folgende Zeilen eintragen (Update 25.10.2015):
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {

.WhoToFollow {
display:none !important;
}

.promo, .user-rec-inner, .flex-module-header, .Trends, .flex-module {
display:none !important;
}

}

6. Speichern – ab jetzt wird der Bereich «Who to follow» nicht mehr angezeigt.

Was macht die Erweiterung eigentlich?

Sie bietet einem an, mit eigenen Stilangaben auf die Anzeige fremder Webseiten im eigenen Browser (hier im Firefox) Einfluss zu nehmen. Das kann Farben, Schriftarten- und -größen und vieles mehr betreffen. Wenn man sich ein bisschen näher damit befasst, handelt es sich also um eine sehr mächtige Erweiterung. In unserem konkreten Fall wird einfach durch den neu eingefügten Stil der betreffende Bereich, den wir in Zukunft nicht mehr sehen wollen, mit dem Befehl «display: none » ausgeblendet.

Mit Stylish auch Bereiche auf anderen Webseiten ausblenden

Verbunden mit der nun folgenden kurzen Erklärung, wie man überhaupt auf diese Lösung kommt, seid Ihr in Zukunft gut gerüstet, Stylish zu weiteren Anpassungen zu verwenden. Also noch etwas durchhalten, damit Ihr die Zauberwaffe auch für andere Webseiten anwenden könnt, auf denen es Bereiche gibt, die Euch stören und die Ihr ausblenden wollt. Ehrlich: man muss zum Verständnis der Lösung kein HTML-Crack sein, kann aber mit der beschriebenen Info später Lästiges von Seiten streichen, ohne Zugriff auf diese zu haben.

Webseiten werden – nicht nur, aber vor allem – zu Layoutzwecken in einzelne Bereiche unterteilt. Diese heißen < div >. Wenn ich also einen bestimmten Bereich ausblenden will, muss ich herausbekommen, wie das betreffende < div > heißt. Dazu genügt ein Blick in den Quellcode der Website. Um hier nicht lange suchen zu müssen, gibt es einen kleinen Trick: Den Bereich, den man ausblenden möchte, mit gedrückter linker Maustaste markieren (am besten ein bisschen oberhalb ansetzen, damit der anschließend anzuzeigende Quellcode-Schnipsel auf jeden Fall den Start des betreffenden Divs enthält):

Wie finde ich den Namen eines Bereiches zum ausblenden?

Ist der Bereich markiert (und damit schwarz unterlegt), klickt man mit der rechten Maustaste hinein und wählt aus dem Kontextmenü den Eintrag «Auswahl-Quelltext anzeigen». Darauf sehen wir den Bereich des Quelltextes, der das Div zur Anzeige bringt:

Eigenschaft id zeigt Name des Divs, hier 'recommended_users'

In der ersten Zeile steht
< div id="recommended_users">
Die Eigenschaft ‘id’ verrät uns den Namen des Divs, hier ‘recommended_users’. Auf anderen Webseiten müsst Ihr also den dann entsprechend gefundenen id-Namen in den neuen Stylish-Stil einsetzen, genau an die Stelle, wo im obigen Beispiel ‘recommended_users’ steht (siehe Punkt 5 der obigen Schritt-für-Schritt-Anleitung).

Stil für eine bestimmte URL anlegen Hier noch ein Tipp, damit Ihr Veränderungen wirklich nur auf der betreffenden Seite erwirkt und nicht auf allen Webseiten (das ist besonders wichtig, wenn die id-Bezeichnung allgemeinerer Art, wie zB ‘menu’ oder ‘left’ lautet):
Um einen Stil bei Stylish nur für eine bestimmte Website anzulegen, diese Seite im Browser aufrufen, dann unten rechts im Firefox auf das ‘S’-Symbol klicken und Stil erstellen, Für diese URL auswählen. Dann findet Ihr im Textfeld schon einige Zeilen, die Euren Stil nur auf diese URL anwenden, und könnt die Zeilen für das Ausblenden einfach darunter setzen.

Stylish gibt’s nicht nur für Firefox, sondern auch für Chrome. Es gibt auch einen Lösungsweg für Safari. Opera-Nutzer können die hier gezeigten Informationen auch gebrauchen, denn Userstyles gibt es auch dort. Egal welchen Browser Ihr nutzt, Hauptsache nicht den unsäglichen IE. 😉 Viel Spaß mit der neu gewonnenen Freiheit!

Update 25.10.2015:

Michael Büker hat auf Twitter darauf hingewiesen, dass man mit der Erweiterung Stylish auch Werbung (gesponsorte Tweets) auf Twitter ausblenden kann:

Damit man diesen Code nicht abtippen muss, kann man ihn auch hier rauskopieren: http://pastebin.ca/3215039.

10 Kommentare zu „Who to follow oder andere Webseitenbereiche mit Firefox-Erweiterung Stylish ausblenden“

  1. Juhu, und jetzt hab ich’s auch ganz alleine geschafft, die “Who to follow”-Spams auf den Profilseiten von Leuten auszublenden.

  2. Wow, das ist ja ein cooles Addon. Dachte, ich hab schon die ganze Liste der Musthaves hoch und runter durch, aber das ist mir neu. Wobei der Ansatz ja völlig easy ist. Tja, sobald mir die Vorschläge in Twitter auf die Nerven gehen, kenn ich jetzt die Alternative 🙂

  3. Frank von der Tierpension

    Geniales Tool ! Hatte schon davon gehört, es aber noch nicht installiert.

    Die besagten Einblendungen bei Twitter stören mich gar nicht, aber jetzt kann ich die gehassten Flash-Ads auf meinen Lieblings-Newssites töten, ohne gleich die Flashobjekte sitewide ausschalten zu müssen.

    Zwar gibt es genug fertige Adblocker, aber die gehen mir einen Schritte zu weit, weil ich Werbung im Web aus diversen Gründen für wichtig halte. Nur eben keine Werbung, die mich mit Daueranimationen direkt neben dem Artikel, den ich lese, in den Wahnsinn treibt.

  4. Das eigene FF-Addon “Adblock Plus Element Hiding Helper” macht das Beschriebene zu ner 3-Klick-Geschichte. Elementesucher an, Markieren und Blockieren. So kann man prima sämtliche nervigen Header, Footer, Boxen in seinen Stammseiten ausblenden.

  5. @Qui-Gon Jin: Ich habe mit das Addon jetzt angeschaut. Sehr praktisch. Doch es hat den kleinen Schönheitsfehler, dass z.B. bei der Entfernung des Newtwitter-Hinweises eine leere Zeile störend zurückbleibt. Es gibt aber eine Lösung, die auch das komplette Entfernen möglich macht. Habe dazu soeben einen neuen Blogartikel geschrieben.

Schreibe einen Kommentar zu Markus Kommentieren abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert