Drucken


style.css - Kommentare formatieren

/* WordPress gibt die Kommentare in Form einer Liste aus */
<ul>
    <li class="comment"> Dies ist ein Kommentar.
         <ul class="children">
             <li class="comment">Eine Antwort auf den Kommentar.</li>
         </ul>
    </li>

    <li class="comment"> Der nächste Kommentar </li>
</ul>

Klasse comment formatieren
/* Aufzählungspunkte entfernen / Kommentar Abstand nach oben + unten vergrößern um 2em  *>
li.comment {
    list-style: none;
    margin-top:2em;
    margin-bottom:2em
}

Links der Klasse comment formatieren
/* Links werden nicht unterstrichen  */
li.comment a { text-decoration: none; }

Nur die Antworten auf Kommentare formatieren
/*  Antworten nach rechts um 2em einrücke, Abstand links 1em, links Rahmen hellgrau  */
li.comment ul {
    margin-left: 2em;
    padding-left: 2em;
    border-left: 2px solid lightgrey
}

Listenpunkte comment-meta formatieren
/*  Datum etwas kleiner  */
li.comment .comment-meta { font-size: 0.8em; }


Avatar-Bild des Autor links bündig, rechts daneben der Text
/* Avatar bild links bündig mit float: left, Abstand zum Bild 0.5em durch padding-right  */
li.comment img.avatar {
    float: left;
    padding-right: 0.5em;
}

 

Link zu Antworten formatieren
/* Link zu Antworten commt-reply-link auf 0.8em Schriftgröße + unterstrichen  */
li.comment .comment-reply-link {
    font-size: 0.8em;
    text-decoration: underöine;
}



Der Code zur Kommentar-Formatierung

/* Kommentare formatieren */
/* Aufzählungspunkte entfernen / Kommentar Abstand nach oben + unten vergrößern um 2em *>
li.comment {
list-style: none;
margin-top:2em;
margin-bottom:2em
}

/* Links werden nicht unterstrichen */
li.comment a { text-decoration: none; }

/* Antworten nach rechts um 2em einrücke, Abstand links 1em, links Rahmen hellgrau */
li.comment ul {
margin-left: 2em;
padding-left: 2em;
border-left: 2px solid lightgrey
}

/* Datum etwas kleiner */
li.comment .comment-meta { font-size: 0.8em; }

/* Avatar bild links bündig mit float: left, Abstand zum Bild 0.5em durch padding-right */
li.comment img.avatar {
float: left;
padding-right: 0.5em;
}

/* Link zu Antworten commt-reply-link auf 0.8em Schriftgröße + unterstrichen */
li.comment .comment-reply-link {
font-size: 0.8em;
text-decoration: underöine;
}

 

 

 

 

Zugriffe: 3434