Benutzerstylesheet - Zapps Blog

Direkt zum Inhalt




Artikel mit dem Tag „Benutzerstylesheet”

Jedem sein eigenes heise

Und noch ein Benutzerstylesheet, das das neue heise-Layout durch die Mangel dreht:

Das Originallayout wird kräftig entschlackt und flexibel an die Grösse des Browserfensters angepasst.

Mit Hilfe eines Benutzer-JavaScripts können ausserdem die Topnews in die Sidebar verlegt werden. Dann sollte man auch auf kleineren Monitoren nicht mehr scrollen müssen, um die neusten Nachrichten auf heise.de zu finden.

Stylesheet und Greasemonkey-JavaScript sind nicht kompatibel zu den älteren Versionen.

Update (29.08.2008):

Die neue Variante des User-JavaScripts ist gegenüber Veränderungen bei heise-Online etwas toleranter und funktioniert auch ohne ein Benutzerstylesheet mit dem Heise-Originallayout. Da im neuen JavaScript auch einige wenige Layout-Informationen stecken, habe ich mein Benutzerstylesheet entsprechend angepasst.

Moderne CSS-Zeiten bei heise

Heute habe ich mein erstes Layout mit display:table-cell gebastelt, allerdings mit tatkräftiger Unterstützung der Jungs und Mädels von heise online:

Mit dem richtigen Stylesheet ist das viel kritisierte neue Layout von heise gar nicht mal so übel.

Zumindest erlaubt die neue technische Basis der Seite, die auf XHTML und CSS setzt, nun das einfache Entwickeln von Userstylesheets ohne dass man sich dabei durch Tabellen kämpfen muss. Über einige recht unsemantische Bezeichnungen, etwa #mitte_rechts oder .col100weiss, sollte man dabei allerdings auch mal hinwegsehen können.

Update 15.08.2008:

  • heisefloat-userContent.css
    Robustere Variante mit klassischer Float-Umsetzung.
    Auch hier bitte auf die Kommentare in der Datei achten.
  • heise-Classic-als-Hauptseite.user.js
    User-JavaScript für Greasemonkey, mit dem die prominente Links in der Top-Navigation und dem Logo statt auf heise.de auf heise.de/newsticker/classic gelenkt werden.
    Sinnvoll in Kombination mit einem der Benutzerstylesheets.

CSS und Script werden nicht weiterentwickelt. Ich empfehle die neue Kombination von Stylesheet und JavaScript aus diesem Beitrag: Jedem sein eigenes heise.

Alles neu macht der Mai

Der Frühjahrsputz bei den grossen Newsseiten scheint immer noch nicht abgeschlossen zu sein, jetzt hat es die Zeit erwischt. Das Design Tagebuch hat sich schon den gestalterischen Aspekten gewidmet, mal schauen, ob der immer noch ziemlich seltsame Quelltext demnächst im Trash Log erwähnt wird. (Nachtrag: Im Trash Log gibt es mittlerweile einen entsprechenden Artikel.)

Für mich als Nutzer bedeutet so eine gravierende Umstellung einer meiner Stammseiten zunächst einmal, dass die userContent.css angepasst werden muss, damit die Artikel wieder besser lesbar werden.

Grundsätzlich sind mir die Schriftgrösse und die Spaltenbreite auf den meissten Newsseiten zu klein, weshalb beide angepasst werden. Auf Teile der Navigation kann ich dabei gerne verzichten, da ich die Seite fast ausschliesslich über den Feedreader betrete. Um die Werbung kümmert sich Adblock, der störende graue Hintergrund wird ebenfalls über die userContent.css entfernt. Das Ergebnis entspricht dann schon eher dem, was ich persönlich unter einer gut lesbaren Internetseite verstehe.

  • Werbung, schmale Spalten, kleine Schrift
  • keine Werbung, eine einzige breite Spalte mit dem Artikeltext, grosse Schrift

Ich bin immer wieder begeistert davon, wie einfach es mit dem Firefox und ein paar Grundkenntnissen in HTML und CSS ist, "das Internet" seinen eigenen Bedürfnissen anzupassen.

Zusätzlicher Code in der userContent.css:

@-moz-document domain(www.zeit.de) { body { background:white !important; } #content .inner { background-color:white; background-image:none; position:absolute; left:0; width:50em !important; z-index:100; font-size:18px; margin:0 !important; padding-left:3em !important; } }

Update (08.03.2008):

Das an das aktuelle Layout der Zeit angepasste Benutzerstylesheet findet sich in den Kommentaren.