Cookie-Hinweis Smartphone

06.11.2012

Hintergrundfarbe für Kommentare

Eine Hintergrundfarbe für Kommentare zu bestimmen, kann man mithilfe eines CSS-Kommandos realisieren, das man einstellt unter

Design > Vorlage > Anpassen > Erweitert > CSS hinzufügen



Mögliche Kommandos zu eingebetteten Kommentaren der üblichen Blogger-Vorlagen



Beispiel: Kommandos für den Bereich der Kommentar-Inhalte

Wenn man den Inhalt der einzelnen Kommentare beispielsweise hellgrau hinterlegen will, trägt man da das Folgende ein:

.comment-content { background-color:#eeeeee;  }


Wenn man nicht will, dass die Schrift direkt am Farbrand steht, baut man noch Innenabstand ein:

.comment-content { background-color:#eeeeee; padding:5px;  }


Wenn man außerdem die Ecken abrunden will, ergänzt man noch wie folgt (Im IE werden die Ecken so jedoch nicht abgerundet, auch nicht, wenn man das speziell für ihn kommandiert.):

.comment-content { background-color:#eeeeee; padding:5px; border-radius:5px;  }


Namen weiterer Bereiche

Für den Fall, dass man die Hintergrundfarbe für einen größeren Abschnitt der Kommentar-Region definieren will, liste ich folgend die Namen der Bereiche auf, von denen man sich einen aussuchen kann (Der Teil des Kommandos zwischen den Klammern bleibt aber wie oben.)

  • .comment-content
    = Inhalt der einzelnen Kommentare (ohne Name)
  • .comment-block
    = gesamter Text-Bereich der einzelnen Kommentare (ohne Bild)
  • .comment
    = gesamter Bereich der einzelnen Kommentare (inkl. Bild)
  • .comments-content
    = gesamter Bereich aller geschriebenen Kommentare (ohne Formular)
  • #comments.comments
    = kompletter Kommentarbereich (inkl. Formular, das aber seine eigene Farbe behält)


Abgrenzung

Padding hatte nicht für jeden Bereich Wirkung, ich weiß aber nicht mehr, für welchen nicht und mag das nicht nochmal durchprobieren.


Ute Ziemes, sg.utez.de, 06.11.2012 (Änderungen: 17.11.2012, 18.11.2012)

3 Kommentare:

  1. eine tolle beschreibung - was mich allerdings interessieren würde: wo findet man eine umfassende übersicht über die namen der unterschiedlichen blogbreiche, vergleichbar mit der hier angeführten?

    AntwortenLöschen
    Antworten
    1. Mir ist sowas bislang nicht begegnet. Man kann sich aber sowohl im Firefox als auch im Chrome per Rechtsklick > "Element untersuchen" anzeigen lassen, welche Container für eine bestimmte Stelle Bedeutung haben, wie sie heißen und welche CSS-Kommandos für sie gelten. Im Fenster wird außerdem die Ausdehnung einzelner Container angezeigt. Mithilfe der Infos kann man im Testblog experimentieren und sich nach und nach zu den Teilbereichen, die einen interessieren, Übersicht verschaffen.

      Löschen
  2. Habe das auch gleich eingefügt! Vielen Dank!

    AntwortenLöschen