Aus dem Nähkästchen
Webseiten dezent verändern mit Stylus
Finden Sie die YouTube-Darstellung unschön? Oder haben Sie an einer anderen bekannten Webseite etwas zu bemängeln? Falls Sie Firefox oder Chrome verwenden, kann Ihnen vielleicht das Add-on Stylus dabei helfen, die betroffene Webseite für Sie etwas aufzuhübschen, umzukrempeln, darin Elemente zu verbergen oder besonders hervorzuheben.
Dabei kommen Styles in Form von CSS-Codeschnipseln (Cascading Stylesheets) zum Einsatz, die dafür sorgen, dass Elemente auf bestimmten Websites anders dargestellt werden.
Für Chrome finden Sie das Add-on hier und für Firefox finden Sie es hier.
Nach der Installation des Add-ons kann es losgehen.
Beispiel YouTube
Besuchen Sie die Webseite, deren Aussehen Sie verändern wollen. Vielleicht soll die YouTube-Seite etwas frischer oder verspielter wirken.
So sieht YouTube im normalen Dark-Mode aus
Quelle: PCtipp.chKlicken Sie aufs Stylus-Icon und verwenden Sie Styles finden. Die vier Bibliotheken UserStyles Archive, UserStyles World, UserStyles und GreasyFork können Sie nun entweder separat nach webseitenspezifischen Styles durchforsten oder einfach nach allen Styles für die aktuell geöffnete Seite (in diesem Fall youtube.com) suchen, indem Sie auf Styles finden klicken.
Über «Styles finden» entdecken Sie von anderen Usern entwickelte Styles für die aktuell geöffnete Seite
Quelle: PCtipp.chNicht jeder Style ist gut gemacht. Es kann auch welche von Autoren mit finsteren Absichten dabei haben. Beachten Sie darum unbedingt auch die Bewertungen, Anzahl User und das Datum des letzten Updates. Hier haben wir zum Beispiel ein recht nettes, dunkles YouTube-Theme mit Farbverlauf entdeckt.
Als Beispiel installieren wir einmal dieses Theme
Quelle: PCtipp.chNach dem Klick auf Style installieren oder auf Install with Stylus, erscheint der Quellcode des Styles. Wenn Sie mit HTML bzw. CSS vertraut sind, können Sie prüfen, ob der Code zum Beispiel ungebührliche externe Webseitenaufrufe erzeugt. Soll der Style angewendet werden, klicken Sie in der linken Spalte auf Style installieren.
Ausschnitt aus dem Quellcode des Styles
Quelle: PCtipp.chSchon ist der Style aktiv. Sieht hübsch aus!
Auch ohne Neuladen der Seite ist der Style mit dem Farbverlauf schon aktiv
Quelle: PCtipp.chVerwalten und synchronisieren
Um Styles anzuschauen, anzupassen oder zu entfernen, klicken Sie aufs Styles-Symbol und verwenden Verwalten. Hier lassen sich die Styles auch deaktivieren, löschen oder aktualisieren.Möchten Sie Ihre Styles mit anderen PCs synchronisieren? Das Add-on bietet auch Export- und Synchronisierungsfunktionen und unterstützt Dropbox, Google Drive, OneDrive sowie WebDAV (falls Sie letzteres z. B. auf einem Synology NAS eingerichtet haben). Auf diese Weise können Sie Ihre gesammelten oder selbsterfassten Styles auf anderen Geräten verwenden.
Via Klick aufs Stylus-Icon in Ihrer Browser-Symbolleiste gehts zu Verwalten. In der linken Spalte finden Sie Mit Cloud synchronisieren. Dort können Sie den Cloudspeicherdienst oder WebDAV angeben.
Die Stylus-Erweiterung bietet auch Synchronisierungsfunktionen mit bekannten Webdiensten
Quelle: PCtipp.chPraxisbeispiel: Miese SEO-Spam-Tricks
Wie in jedem anderen Online-Forum auch, versuchen Spammer auch im PCtipp-Forum Fuss zu fassen und ihre Müllbeiträge zu posten. Deren Ziel: Eine Webadresse so oft wie möglich in den eigenen Forumsposts unterzubringen. Damit wollen sie nicht nur, dass andere User draufklicken. In erster Linie versuchen die Spammer damit Suchmaschinen wie Google zu beeinflussen. Denn je mehr Websites auf die beworbene Webseite verlinken, desto höher steigt diese in der Rangliste bei Google. Diese Art der Suchmaschinenoptimierung (Fachbegriff SEO, für «Search Engine Optimization») ist niederträchtig, zumal sie gleich doppelt auf Kosten Unschuldiger erfolgt: Erstens müssen Forumsbetreiber wie wir den Spam bekämpfen, zweitens versucht man seriösen Unternehmen, die sich keiner miesen Tricks bedienen, den Google-Rang abzulaufen.Die Tricks, mit denen diese Spammer vorgehen, werden immer ausgefeilter. Anfänglich schrieben sie einfach Posts, in denen sie auf ihre Sites verlinkten. Die waren natürlich leicht zu entdecken und schnell gesperrt.
Dann fingen sie an, scheinbar Nachrichten von anderen Usern zu beantworten, aber im zitierten Teil die seriösen Links durch die eigenen zu ersetzen. Auch das können wir entdecken und die Posts abräumen.
Die nächste Stufe: Die Spammer schrieben belanglose kleine Posts zu einem Thema und brachten darin die Links unter. Damit wir die nicht sehen, änderten sie die Textfarben auf Weiss. Einen weissen Link auf weissem Grund entdeckt man normalerweise nicht, es sei denn, man hat andere Gründe, die Posts kritisch zu beäugen.
Und dann kam der Gipfel der Frechheit, den wir Ihnen hier zeigen.
Netter Versuch, Herr SEO-Spammer! Er hat den Original-Link zitiert, aber im letzten Schrägstrich seinen eigenen Link eingebaut
Quelle: PCtipp.chDer Spammer namens «geschenkli» wiederholte in einem angeblichen Dankes-Posting im Forum einen Link, der von einem anderen User genannt worden war. Allerdings mit einer kleinen Änderung: Den abschliessenden Slash «/» verlinkte er auf eine Webseite, in deren Auftrag er offenbar als Spammer unterwegs ist. Natürlich haben wir auch den gesperrt.
Damit war aber das Fass endgültig übergelaufen. Jetzt musste eine Lösung her.
Stylus-Script entlarvt SEO-Spam
Aber wie verhindern, dass Spammer unser Forum unbemerkt für ihre miese SEO-Masche missbrauchen? Moderator Nebuk kam mit der Idee, Stylus zu verwenden und hatte auch gleich eine erste Skriptvariante parat.Die habe ich jetzt ausgebaut. Erstens erscheinen bei mir alle Links im Forum jetzt zwingend in Blau, egal, welche andere Farbe ein potenzieller Spammer ihnen überstülpen wollte.
Zweitens erscheint um jeden Link bei mir ab sofort ein dünner roter Rahmen. Damit sehe ich schnell, ob jemand versucht hat, in einem Link einen anderen Link zu verstecken.
Der Code:
@-moz-document domain("forum.pctipp.ch") { .bbWrapper a span { color: #2577b1 !important; border-style: solid; border-width: thin; border-color: red;}.bbWrapper a { color: #2577b1 !important; border-style: solid; border-width: thin; border-color: red;}} 
So sieht der CSS-Code (wenn auch noch ohne die rote Rahmenfarbe) im Stylus-Add-on aus
Quelle: PCtipp.chUnd so sieht es nun aus. Die Links sind zwingend in Blau gehalten. Ausserdem markiert ein dezenter roter Rahmen, wo der erste Link endet und der zweite anfängt.
SEO-Spammer haben in unserem Forum keine grosse Zukunft: Dank Add-on erkennen wir den Trick mit dem Verstecken eines Links in einem anderen Link
Quelle: PCtipp.chIch bin schon gespannt, wie es mit diesem Wettrüsten weitergeht.
Kommentare