3 einfache und effektive Tipps um deinen Kommentarbereich in Thesis zu stylen

Deine Community wird sich im Kommentarbereich deines Blogs unterhalten. Um die Konversationen zu erleichtern, sollte dein Kommentarbereich übersichtlich gestaltet sein, da es die Interaktion und das verfolgen der Kommentare fördert.

“Out of the Box” Das Thesis Theme ermöglicht dir die threaded comments zu nutzen, was die Konversation fördert. Weiter bietet es dir eine Reihe weiterer Optionen mit denen du diesen Bereich deines Blogs optimieren kannst.

Was aber, wen du die Anzeige der Kommentare weiter anpassen willst?

Wenn die Struktur im Kommentarbereich unübersichtlich wird, gibt es ein paar simple CSS Tricks in Thesis die dir helfen deinen Kommentarbereich übersichtlicher zu machen, um die Konversationen weiter am laufen zu halten.

Zum besseren Verständnis dieser CSS Tricks, lass uns einen Blick auf 3 Änderungen werfen, die ich auf meinem eigenen Blog angewendet habe. Ready?! Dann lasst uns beginnen!

1. Box “Thread” Kommentare

Thesis ist kompatibel mit dem WordPress – thread comments – System (Unter Einstellungen → Diskussionen). Was wirklich klasse ist, da es die Konversationen am laufen hält.

Das Problem ist wenn du eine Menge Kommentare pro Artikel bekommst, kann es schwer sein die ganze Konversation… oft wegen des zusammengedrückten Textes, zu überblicken.

Um das Problem zu lösen habe ich im CSS in der custom.css etwas verändert, damit jeder Kommentar in einer eigenen separaten Box aufgeteilt wird. Mit dem Trick wird jede Konversation in einem eigenen kleinen Bereich dargestellt, in dem die Kommentare dann enthalten sind.

Um zu zeigen was ich meine, folgend ein Beispiel:

Thesis Theme Kommentar Style

Wenn du den gleichen Effekt wie im Bild oben haben möchtest, kopiere folgende 3 Zeilen Code in deine custom.css Datei:

.custom #comment_list { background: #000; padding: 1em; }
      .custom #comment_list dd { margin-bottom: 1em; }
      .custom #comment_list .comment { background: #FFF; }

Bevor wir jetzt weiter machen lasst uns schauen was der Code verursacht.

  • .custom #comment_list – Fügt eine Rahmenfarbe um die komplette Kommentar Box und füllt einen Füllraum um alle Seiten um die die Box.
  • .custom #comment_list dd — Fügt einen Abstand zwischen jeden Kommentar damit diese geteilt werden. Ich empfehle dir die margin und padding – Werte gleich zu halten.
  • .custom #comment_list .comment — Fügt eine Hintergrundfarbe hinzu die sich zu äußeren Box unterscheided

2. Hebe deine Autoren Kommentare hervor

Der beste Weg die Konversation in deinem Kommentarbereich zu fördern, ist deinen Lesern zu antworten.

Wenn du möchtest das den Lesern deine Antwort gleich auffällt, ist es von Vorteil wenn du deinen eigenen Kommentar von den anderen abhebst.

Glücklicherweise ist die “Look” – Änderung des Kommentar Styles wirklich einfach. Denn Thesis erkennt automatisch, wenn ein Kommentar vom Autor abgegeben wurde. Das geschieht aus dem Grund, da es auf eine spezielle CSS Class zugreift, die du natürlich bearbeiten kannst.

.custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div { background: #FF0000; }

Wo du jetzt anfangen kannst?

Also, du kannst eigentlich alles machen was du willst! Zum Beispiel kannst du ein Hintergrundbild einfügen, einen Rahmen, die Hintergrundfarbe ändern, etc. …

Hier ein Beispiel:
Thesis Theme Kommentar Styling

Quelle: MattFlies

3. Mach deinen Antwort / Reply – Link auffäliger

Thesis Theme Kommentar StyleUm die Konversation weiter zu beleben, solltest du deine Leser dazu animieren den anderen Kommentaren zu antworten.

Um das bei dir bewerkstelligen musst du als erstes mal deine – threaded comments – (Unter Einstellungen → Diskussionen) aktivieren. Wenn du die aktiviert hast, ermöglichst du so deinen Lesern direkt auf einen Kommentar antworten. Da Thesis automatisch einen “Reply” oder “Antworten” Link am Ende des jeweiligen Kommentars setzt.

Die Frage ist, wie kannst du deine Leser davon überzeugen auf “Antworten” zu klicken?

Das ist ziemlich easy, mach einfach deinen Antworten-Link auffälliger!

Wie immer ist das mit Thesis ziemlich einfach, da dir hier auch eine eigene CSS Class erlaubt deinen Antworten-Link nach deinen Wünschen zu verändern. Der folgende Code macht z.B. eine graue Box um deinen Antworten-Link, der das ganze schon auffälliger macht.

.custom .comment-reply-link { background: #EEE; padding: 0.4em; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Was ich hier im Grunde gemacht habe ist eine Hinterundfarbe und Füllraum vergeben. Die anderen zwei Code Schnipsel machen die Box rund für jeden der Mozilla, oder Webkit-Basierte Browser (Firefox, Chrome und Safari) nutzt.

Nachwort:

Thesis gibt dir die Flexibilität, alle möglichen Änderungen in deinem Kommentarbereich vorzunehmen. Heute habe ich euch gezeigt, wie leicht Ihr mit 3 Einstellungen die Benutzerfreundlichkeit und das Aussehen im Kommentarbereich verbessern könnt.

thesisÜber den Autor:
Alex Fraiser ist ein 17 Jahre alter Blogger und Designer hinter dem schönen Blogussion.com Theme und Blog steht. Für mehr blogging Tips und wie du damit Geld machen kannst, melde dich an beim:
From Planning to Earning course.

DIYthemes.com
3 Simple and Effective Comment Styling Tips for Thesis

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
3 einfache und effektive Tipps um deinen Kommentarbereich in Thesis zu stylen, 10.0 out of 10 based on 1 rating

{ 5 comments… read them below or add one }

Sascha March 4, 2011 at 14:16

Sehr geiles Tutorial. Werde ich später direkt einmal ausprobieren. Danke dafür.

LG Sascha

Reply

Niels March 10, 2011 at 12:14

Gib mir bescheid wenn du´s umgesetzt hast 🙂

Grüße
Niels

Reply

jochen April 18, 2011 at 23:40

Hi Niels,
habe den kommentar eingebucht… jetzt funktioniert nichts mehr, kannst du mir erklären wo ich den reinbuchen muss.
Ich meine in welcher Zeile??

Reply

jochen April 18, 2011 at 23:40

sorry meine natürlich den Code…

Reply

Niels April 19, 2011 at 00:35

Hi Jochen,

ich schau mir das morgen gleich mal an 🙂

Grüße
Niels

Reply

Leave a Comment

*

{ 1 trackback }

Previous post:

Next post: