13. Februar 2009 von Dieter | 2 Kommentare | drucken
Zitate gestalten
Mein WordPress-Theme YAML Green verwendet die CSS-Standardeinstellung für Zitate kursive Schrift und eine Einrückung vom linken Rand. Das war es!?
Das war mir dann doch etwas wenig. Ich will schon, dass sich bei Blogbeiträgen und Kommentaren die Zitate etwas deutlicher vom normalen Text abheben. Das ist aber mit CSS auch überhaupt kein Problem. In Anlehnung an ein Gestaltungsbeispiel für Zitate bei Webmasterpro.de habe ich nun die Zitate zusätzlich mit einem Balken versehen. Da Orange eine Signalfarbe ist, die ich hier schon mit den RSS-Feed-Icons einsetze, habe ich diese auch dem Balken für die Zitate gegeben.
Hier der CSS-Code für Interessierte:
1 2 3 4 5 6 7 8 9 | blockquote { margin: 0 0 1em 1.5em; color: #333; padding-left: .6em; border-left: solid 4px #F60; } cite, blockquote { font-style: italic; } |
Und hier noch ein Zitat als Beispiel:
Carpe diem! Carpe noctem!
Auf eine Hintergrundgrafik mit großen Anführungszeichen – wie sie auf einigen Seiten gerne für Zitate verwendet wird – habe ich übrigens wegen des negativen Einflusses auf die Ladegeschwindigkeit der Webseite bewusst verzichtet.
Verbesserungsvorschläge und Anregungen sind natürlich – wie immer – herzlich willkommen.
Infos
Webseite veröffentlicht am Freitag, den 13. Februar 2009, um 23:19 Uhr, zuletzt geändert am Sonntag, den 22. November 2009, um 20:32 Uhr.
Kategorie: Webdesign
Schlagworte: CSS, Geschwindigkeit, Hintergrundgrafik, Webdesign, WordPress, Zitat
Statistik: 259 Blogbeiträge, 682 Schlagworte, 1.553 Kommentare, 109 Feedleser
1. Joachim
Kommentar vom 29. Juli 2009 um 15:25
für mich als betreiber einer community rund um zitate ist das ne feine sache!!!
vielen dank für die anregung, den tip und die ausarbeitung
!!!
2. Dieter
Kommentar vom 29. Juli 2009 um 17:28
@Joachim
Bitte schön, gern geschehen.
PS: SEO-Namen werden von mir falls möglich korrigiert oder gelöscht.