Gestalten von Autoren Kommentaren um sich von der Masse abzuheben

Dieses Tutorial erfordert einige Grundkenntnisse in CSS und eine grobe Vorstellung davon, wie der Live CSS Editor zu verwenden ist. Je nachdem, was Sie erreichen wollen, könnten auch fortgeschrittene CSS-Kenntnisse nötig sein.

Headway hat bisher noch keine Option im Visual Editor, mit der sich Autorenkommentare stilistisch von Besucherkommentaren hervorheben lassen. Mit ein bisschen CSS ist das allerdings auch kein Problem.

In der nachfolgenden Tabelle erhalten Sie eine Übersicht über die CSS-Selektoren, mit denen unterschiedliche Bereiche eines Autorenkommentars ausgewählt werden können.

Auswahl (Selector) Erklärung
.block-type-content li.comment.byauthor Die gesamte LI, die den Autorenkommentar umfasst. Hiermit können Dinge wie die Hintergrundfarbe des Kommentars oder ein Rand ausgewählt werden.
.block-type-content li.comment.byauthor .comment-body Das DIV in der LI, das den gesamten Inhalt umfasst. Streng genommen befindet sich der Gravatar des Autors in diesem DIV, liegt aber außerhalb der Ränder, sodass eine hier gesetzte Hintergrundfarbe nicht auch noch hinter dem Autorenbild erscheinen würde. Hiermit kann die Schriftart im eigentlichen Kommentartext angewählt werden.
.block-type-content li.comment.byauthor .comment-author Dies ist der Name des Autors und enthält zwei SPANs: Einen für den Namen und einen für das Wort „sagt“, das standardmäßig nach dem Autorennamen erscheint (z.B. „Clay Griffiths sagt:“). Liegt innerhalb des .comment-Bodys, so dass jegliche Änderungen dort auch Auswirkungen auf diesen Bereich haben können. Dieser Selektor eignet sich, um nur den Text des Autorennamens zu ändern.
.block-type-content li.comment.byauthor .says Dies ist der „sagt“ Teil aus „Autorenname sagt“ und liegt innerhalb des .comment-Bodys, so dass jegliche Änderungen dort auch Auswirkungen auf diesen Bereich haben können. Es lässt sich verbergen, indem Sie folgende Zeile dem Live-CSS hinzufügen:
/* Nur für Autoren */
.block-type-content li.comment.byauthor .says {display:none;}
/* Für alle Kommentare */
.block-type-content li.comment.says {display:none;}
.block-type-content li.comment.byauthor .fn Dies ist der vollständige Name des Autors und liegt innerhalb des .comment-Bodys, sodass jegliche Änderungen dort auch Auswirkungen auf diesen Bereich haben können. Dieser Selektor eignet sich, um nur den vorangehenden Namen (nicht die gesamte Zeile inkl. „sagt:“) anzuwählen.
.block-type-content li.comment.byauthor .comment-meta Umfasst die Metadaten des Kommentars, also Datum und Zeit. Liegt innerhalb des .comment-Bodys, sodass jegliche Änderungen dort auch Auswirkungen auf diesen Bereich haben können. Dieser Selektor eignet sich, um nur die Gestaltung des Metadaten des Kommentars vom .comment-Body abzuheben.
.block-type-content li.comment.byauthor div.reply Dieser Container umfasst den „Antworten“-Link, um auf einen bestimmten Kommentar zu antworten (nicht, um einen völlig neuen Kommentar zu hinterlassen). Eignet sich für Änderungen an Hintergrund, Schriftart und sogar Schriftausrichtung.
.block-type-content li.comment.byauthor a.comment-reply-link Liegt in div.reply, so dass jegliche Gestaltungen an div.reply auch Auswirkungen auf diesen Bereich haben können. Das eigentliche Link-Element des Antwortlinks. Änderungen hier können das Design des Links ändern (um eher wie eine Schaltfläche auszusehen) oder die Abstände, den Hintergrund, die Schriftart, usw. zu gestalten.

In der nachfolgenden Tabelle erhalten Sie eine Übersicht mit Beispielen, wie der Kommentarbereich und Kommentartext bzw. -Metadaten formatiert werden können. Hier finden Sie weitere Informationen zur CSS-Syntax.

Erklärung Ergebnis
font-family: Baskerville, „Baskerville Old Face“, „Hoefler Text“, Garamond, „Times New Roman“, serif; Ändert die Schriftart in Baskerville Old Face (weitere Fonts sind als Fallbacks aufgeführt, falls Baskerville auf dem Computer des Besuchers nicht installiert ist). Weitere Informationen zu „Web-sicheren“ Fonts finden Sie unter http://cssfontstack.com/.
font-weight: bold; OR font-weight:normal; Formatiert den Text fett oder normal (nicht fett).
font-size: NNpx; Legt die Schriftgröße auf die angegebene Pixelgröße fest (NN ist durch eine Zahl zu ersetzen).
color: #999999; Legt die Schriftfarbe auf die entsprechende Farbe fest. Das # und die Zahl (oder Buchstaben) sind Hexadezimal-Code. Zahlreiche Tools und Webseiten bieten einen Überblick über die Hexadezimal-Codes für Farben.
text-decoration: underline; Unterstreicht den Text.
font-style: italic; Formatiert den Text kursiv.
background-color: #eeeeee; Formatiert den Hintergrund in ein helles Grau (abermals Hexadezimal-Farben).
background-image: url(‚http://yourdomain.com/linktoimage.jpg‘); Legt das Hintergrundbild fest. Achten Sie darauf, dass die URL in den Anführungszeichen eine URL ist, die Sie in Ihrem Browser aufrufen können, um das Bild direkt zu betrachten – und nur das Bild allein! Vergessen Sie auch nicht, background-repeat und background-position wie gewünscht festzulegen.
background-repeat: no-repeat; OR
background-repeat: repeat; OR
background-repeat: repeat-x; OR
background-repeat: repeat-y;
No-repeat weist den Hintergrund an, nicht wiederholt zu werden.
Repeat kachelt den Hintergrund (horizontale und vertikale Wiederholung).
Repeat-x wiederholt nur horizontal.
Repeat-y wiederholt nur vertikal.
background-position: xx yy; Ersetzen Sie XX entweder durch eine Anfangszahl an Pixeln, einen Prozentsatz, „left“, „center“ oder „right“, um die horizontale Position festzulegen. Wird nur angewendet, wenn nicht horizontal wiederholt wird.
Ersetzen Sie YY entweder durch eine Anfangszahl an Pixeln, einen Prozentsatz, „top“, „middle“ oder „bottom“, um die vertikale Position festzulegen. Wird nur angewendet, wenn nicht vertikal wiederholt wird.
border: 1px solid #dddddd; Zeichnet einen 1 Pixel breiten, durchgehenden Rand in Grau.
Der erste Wert ist die Randbreite. Der zweite Wert ist die Art des Randes (solid, dotted, dashed, double), der dritte ist die Farbe. Mit border-right, border-left, border-bottom oder border-top können auch spezifische Ränder gesetzt werden, z.B.:/* Oben einen Rand einfügen */
border-top: 1px solid #dddddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
Legt „abgerundete“ Ecken an Rändern fest. Funktioniert nicht in IE8 oder älter. Um bestmögliche Browserkompatibilität zu gewährleisten, sollten Sie alle drei Deklarationen verwenden.
margin: 10px 10px 10px 10px; Legt Abstände um ein Element fest. Abstände können heikel sein, eventuell müssen Sie also etwas herumspielen. Bei manchen Elementen könnte „padding“ besser funktionieren als „margin“. „Margins“ fügen negativen Platz um ein Element ein, während „padding“ Platz innerhalb der Grenzen des Elements schafft.
Die Werte für Abstände richten sich nach dem Uhrzeigersinn: oben, rechts, unten, links.Um also unterschiedliche Abstände oben und unten einerseits und rechts und links andererseits zu erzielen, könnten Sie z.B. schreiben:

/* 10px Abstand oben und unten, 30px rechts und links */
margin: 10px 30px 10px 30px; OR
margin: 10px 30px;

padding: 10px 10px 10px 10px; Bei manchen Elementen könnte „padding“ besser funktionieren als „margin“. „Margins“ fügen negativen Platz um ein Element ein, während „padding“ Platz innerhalb der Grenzen des Elements schafft.
Die Werte für Abstände richten sich nach dem Uhrzeigersinn: oben, rechts, unten, links.
Um also unterschiedliche Abstände oben und unten einerseits und rechts und links andererseits zu erzielen, könnten Sie z.B. schreiben:
/* 10px Abstand oben und unten, 30px rechts und links */
padding: 10px 30px 10px 30px; OR
padding: 10px 30px;
Letztes Update: 20. Mai 2014