Tutorial HTML, CSS u. PHP - Forum

[MrGlobing]

Hallo,

ich machs wirklich kurz. Ich will in meinem Blog (http://www.globesurfer.de) den Kommentierungsbereich etwas aufpeppen, weil ich damit nicht zufrieden bin. Ich habe leider keine WP-Plugins gefunden, die das für mich erledigen daher heißt es selbst Hand anlegen. Ich bin in CSS und PHP nicht superfit, kenne aber alle Grundlegenden Dinge. Eine Lösung ist zwar gern gesehen, aber auch die Erklärung würde mir sehr viel bringen (man brauchs wahrscheinlich irgendwann nochmal xD).

Grundlegene Inhalte:

style.css

Code: Alles auswählen



textarea#comment
{
width:100%;
.commentlist, .commentlist li
  background: none;
}

.commentlist li li
{
  margin-left: 30px;
}

.commentlist li .avatar
{
  float: right;
  border: 1px solid #eee;
  padding: 2px;
  margin: 1px;
  background: #fff;
}

.commentlist li cite
{
  font-size: 1.6em;
}

#commentform textarea
{
  width: 100%;
}


comments.php

Code: Alles auswählen

<div class="comment-author vcard">
    <?php echo $get_avatar; ?>
    <cite class="fn"><?php echo $comment_author_link; ?>:</cite>
</div>
<?php echo $status; ?>
<div class="comment-meta commentmetadata">
    <a href="<?php echo $get_comment_link; ?>"><?php echo $get_comment_date; ?></a>
    <?php echo $edit_comment_link; ?>
</div>
<?php echo $comment_text; ?>
<div class="reply"><?php echo $comment_reply_link; ?></div>

Quelltext auf der Website von einem Kommentar

Code: Alles auswählen

<div xmlns="http://www.w3.org/1999/xhtml">
<div class="comment-author vcard">
        <cite class="fn">Martin:</cite>
</div>
<div class="comment-meta commentmetadata">
    <a href="http://www.globesurfer.de/die-route/#comment-8">19. Juli 2011 um 09:06</a>
      <a title="Kommentar bearbeiten" href="http://www.globesurfer.de/wp-admin/comment.php?action=editcomment&amp;c=8" class="comment-edit-link">(Bearbeiten)</a></div>
<p>Wieso nicht weniger zeit in Südamerika und dafür noch einen stop in Afrika? Kenia oder so?</p>
<div class="reply"/>

</div>

Was ich nicht verstehe ist, dass es in der CSS keinen Bereich für "comment-author vcard" gibt... da hätte ich sowas wie

Code: Alles auswählen

.comment-author vcard
{
border: 1px solid blue;
}

reingeschrieben, oder den Hintergrund eines Kommentars andersfarbig gestaltet. Das ist mein Ziel. Ich möchte eine klar sichtbare Abgrenzung der Kommentare. Das kann in Form eines Rahmen oder einer Hintergrundfarbe passieren.

Könnt ihr mir helfen? Braucht ihr noch irgendwas?

Danke im Voraus!

Grüße
Chris

[lauras]

Gibt es mehrere CSS-Dateien? Ansonsten kannst du ja einfach in deiner CSS-Datei auch Sachen hinzufügen, die noch nicht definiert sind - einfach ausprobieren, ob es funktioniert
Ausprobieren hilft meistens immer - so siehst du direkt, was du eigentlich gerade machst

LG

[Sarkkan]

Was ich nicht verstehe ist, dass es in der CSS keinen Bereich für "comment-author vcard" gibt... da hätte ich sowas wie

Code: Alles auswählen

    .comment-author vcard
    {
    border: 1px solid blue;
    }

Das liegt vielleicht daran, dass ein Element mit dem Class-Attribute = "comment-author vcard" nicht in css mit ".comment-author vcard" angesprochen wird.
Es sind 2 Klassen die hier dem Element übergeben werden. Suche nur nach ".comment-author" und ".vcard" und/oder nach ".comment-author.vcard".
Letzteres trifft nur zu, wenn ein Element sowohl die Klasse "comment-author" hat, als auch die Klasse "vcard".