Feeds per CSS kreativ entschlacken
Ich lese meine RSS-Feeds im Feedreader NetNewsWire. Dieser bringt von Hause aus verschiedene Stylesheets mit, die zur Anzeige der Beiträge verwendet werden und v.a. verändert werden können. Denn mich(!) stören z.B. Digg-Buttons und Ratings-Sternchen in den von mir abonnierten RSS-Feeds. Wenn ich etwas diggen oder bewerten möchte, besuche ich die entsprechende Website dazu. Also habe ich diese Elemente aus den entsprechenden Feeds per CSS einfach ausgeblendet, was komplett trivial ist, aber doch eine nette Hilfe sein kann. Im Folgenden beschreibe ich beispielhaft, wie man das für NetNewsWire machen kann. Gültig ist die Vorgehensweise natürlich auch für andere Desktop-Reader und UserStylesheets für Online-Reader.
Ganz rechts in der Statusbar blendet NetNewsWire das aktuell verwendete Theme ein. Das zugehörige Stylesheet findet man im Ordner Library > Application Support > NetNewsWire > StyleSheets > FeedLight Aqua.nnwstyle (mit dem jeweiligen Namen). Dies öffnet man im Editor der Wahl und fügt einmalig die nötigen Definitionen hinzu. Um die Objekte auszublenden, die stören, schaut man sich den Quellcode des entsprechenden Feeds an und sucht sich die passenden Elemente heraus. Nach der Änderung muss der Reader neu gestartet werden um die aktuellen Regeln zu übernehmen.
Beispiel Digg-Button, Feedflare
Diesen Button auszublenden ist ganz einfach:
.diggbutton {display:none;}
Ebenso einfach lässt sich zusätzlich das von Feedburner eingeblendete »Feedflare« vertreiben:
.diggbutton, .feedflare {display:none;}
Beispiel Ratings
Dieses Rating wird mit der Kennung »post-ratings*« ausgegeben. Hier kann man auf Attributselektoren
zurückgreifen und alle Elemente div mit dem Attribut id ausblenden, die mit »post-ratings« beginnen:
div[id^="post-ratings"] {display:none;}
Eine sehr gute Einführung in CSS und den Umgang mit Attributselektoren bietet Michael Jendryschik.
Zusammengefasst sieht diese schnelle Änderung dann so aus:
.diggbutton, .feedflare, div[id^="post-ratings"] {display:none;}
Und schon geht es im Reader ruhiger und schneller zu :-). Wie gesagt, dieser Beitrag ist als kleine Anregung gedacht, CSS einfach auch mal anders einzusetzen.
Werbeunterbrechung
Kommentare und Feedback (5)
Folgende Seiten verweisen auf diesen Beitrag
Vorheriger Artikel: Weblogs sind wichtig aber man findet sie schlecht, nächster Artikel: Web Directions North: Die Präsentationen
14.02.2007, 12:41
ie, wie gemein :-)! Aber stimmt: NNW ist jetzt fixer bei der Anzeige. Guter Hinweis!
14.02.2007, 12:56
Dankeschön :)
Da werd ich mal direkt ein wenig ‘aufräumen’ gehen.
14.02.2007, 14:54
Wenn man mehrere unterschiedliche Stylesheets für NNW in gebrauch hat, so kann man auch auf eine einzige Datei (in meinem Fall adblock.css) im Stylesheet Ordner zurückgreifen und muss diese dann nur ins jeweilige Stylesheet importieren (@import url(../adBlock.css);).
Meine zusammenkopierte adblock.css sieht so aus:
/* ————————— rss-specific ad-blocking ———————————-*/
/* feedburner ad sites */
img[src*=“feeds.feedburner.com”] { display: none !important; }
/* slashdot */
img[src*=“feedster”] { display: none !important; }
img[src*=“rss.slashdot.org”] { display: none !important; }
/* google rss ads */
img[usemap*=“google_ad_map_”], a:link[href*=”/imageads.”] img, a:link[href*=“googleadservices”], a:link[href*=“ads_by_google”] { display: none !important; }
/*other*/
a img[src*=“pheedo”], a img[src*=“doubleclick”] { display: none; }
.diggbutton, .feedflare, div[id^=“post-ratings”] {display:none;}
15.02.2007, 08:42
Danke für die Ergänzung, Sascha!
16.02.2007, 11:03
Sehr gute Idee!
Danke!