KS Webdesign - Der Blog

Als Kommentierender in anderen Blogs zitiere ich manchmal den Autor oder einen der anderen Kommentierenden. Dazu nutze ich z.B. den Button Zitat, den man öfter über dem Textfeld findet, wo man den Kommentar reinhackt. Oder ich fasse das Zitat direkt in <blockquote> ein, was auf das Gleiche hinausläuft.

Nachdem der Kommentar eingetragen ist stelle ich leider öfter fest, daß das Zitat optisch kaum oder gar nicht hervorgehoben ist, was meist dann nicht so toll ausschaut.

Dabei ist es mit ein wenig CSS gar nicht so schwierig das zu ändern. Das Wort Zitat: soll automatisch eingefügt werden und das Zitatfeld optisch etwas aufgepeppt werden.

Zuerst trage ich in meinem Blog einen Testkommentar mit einem Testzitat ein. Dann schaue ich mit der Firefox-Erweiterung Firebug welchen CSS-Pfad ich benötige, um die Änderungen vorzunehmen:

#inhalt ol#commentlist li blockquote p

Okay, nun frisch in die style.css des Themes hineingekritzelt:

Das sieht ja schon mal deutlich anders aus. Jetzt fehlt nur noch das
Wort Zitat: vor dem Zitat. Dafür eignet sich die CSS-Pseudoklasse :before mit der Eigenschaft content, die hier zur Anwendung kommt:

Ein Beispiel was diese Gestaltungsanweisungen bewirken könnt ihr euch
hier anschauen.

Solltet ihr mit dem IE6 oder dem IE7 unterwegs sein, wird das Wort Zitat leider nicht eingeblendet, weil er mit der Pseudoklasse :before nix anfangen kann. Aber das der IE irgendwas nicht kennt oder falsch macht ist ja normale Härte und wundert sicher keinen von euch.