How to style your "langweiliges Kommentarfeld" [Tutorial]

(Dieses Tutorial soll, wie immer, keine Vorgabe etc. sein, sondern ein Inspirationsanstoß und eine Möglichkeit, sich eventuell mehr mit HTML auseinanderzusetzen!) Ich finde das Standard-Kommentardesign von Blogger immer etwas trist und traurig, deshalb heute ein eigentlich relativ simples Tutorial, mit dem man aber viel bewirken kann. EDIT: Dafür, dass es eigentlich als Erklärung für Anfänger gedacht war, ist es doch eine ziemlich herausfordernde Anleitung geworden! Die Tutorials die ich wiederum angewandt habe verlinke ich euch, wär ja sonst mies; allerdings habe ich auch Sachen abgewandelt, hinzugefügt oder einfach weggelassen. Die Grundlagen habe ich alle aus Myris Post gezogen, den ich Interessierten unbedingt empfehlen kann :)

1. Schritt
Macht euch (immer!) ein Backup von eurem Template, damit ihr, sollte was schiefgehen, abgesichert seid: Vorlage → rechts oben. Ich arbeite hier übrigens mit der stinknormalen, unveränderten Simple-Vorlage.

2. Schritt
Wir arbeiten im HTML-Code (Vorlage → HTML bearbeiten) und klauen dem Kommentar mal sein Standardoutfit. Heißt, wir suchen und entfernen die beiden Linien und den Hintergrund, damit wir auf einer ganz leeren Fläche arbeiten können. Löscht dafür diese Codes raus (sie werden nicht Buchstabe für Buchstabe genau so sein):
Sollten diese Codes bei euch von Grund auf nicht drinnen sein springt gleich zum nächsten Schritt (wir löschen sie hier eh nur raus, damit sie nicht stören)!

.comments .comments-content .loadmore a { border-top: 1px solid $(widget.alternate.text.color); border-bottom: 1px solid $(widget.alternate.text.color); } .comments .comment-thread.inline-thread { background-color: $(post.footer.background.color); } .comments .continue { border-top: 2px solid $(widget.alternate.text.color); }

3. Schritt

Die blauen Links habe ich via Vorlagendesigner (Vorlage → Anpassen) grau gefärbt, damit es später im Gesamten besser aussieht. Im Vorlagendesigner kann man leicht Dinge wie Farben, Schriftfarbe, Schriftgröße etc. einstellen, jetzt geht's aber wieder weiter im HTML-Code. Damit die Profilbildchen nicht ganz so eckig aussehen, runden wir sie ab und ändern die Größe ein wenig (50% ist ganz rund). Sucht dazu (zuerst Klick auf HTML-Code, damit des Cursor im Kästchen drin sitzt, sonst funktioniert die Suche nicht) mit strg+f nach /* Comments und fügt den unterstehenden Code unter der "Überschrift" ein. /* ... markiert immer einen Bereich, der speziell etwas bestimmt, also hier die Kommentare. Alles, was wir in diesem Tutorial machen, sollte dann unter /* Comments aufgelistet sein!

.comments .avatar-image-container, .comments .avatar-image-container img { width: 49px; max-width: 41px; height: 41px; max-height: 49px; background: #FFF; float: left; border-radius: 50%; -moz-border-radius: 50%; margin: 0 10px 0 0; }


4. Schritt: Zu farblos? Dann färben wir die Felder mal ein bisschen ein! Auf Colourpicker könnt ihr alle möglichen Farben ermitteln. Ich würde euch eine Farbe sehr nah am Weiß empfehlen, weil zu kräftige Töne einen fast erblinden lassen oder zumindest sehr sehr unangenehm anzusehen sind. Ich habe hier zB #FFFDE0, ein sehr helles Gelb, verwendet. :)

Und weil es so spaßig ist - und weil wir's können! - runden wir die Kommentarfelder ebenfalls ab und fügen einen Rahmen hinzu. 

Background ist die Hintergrundfarbe, das dürfte allen einleuchten. 

Border stellt den Rahmen dar; 2px ist die Dicke der Linie, die Zahl natürlich variabel. Statt dotted (gepunktet) stehen euch noch die Befehle dashed (gestrichelt) und solid (durchgezogen) zur Verfügung.

Die Ziffernfolge nach dem # ist wieder die Farbe. Achtet darauf, dass ihr das ";" am Ende eines Abschnitts NIE weglöscht, das ist mordswichtig!

Die vier Stellen mit den 15px definieren je die Rundung der Ecken. Größere Zahl = größere Rundung, kleinere Zahl = kleinere Rundung. Das wird hier so oft wiederholt, damit die abgerundeten Ecken in möglichst vielen Browsern richtig angezeigt werden.

.comments .comment-block, .comments .comment-thread.inline-thread .comment-block { background:#FFFDE0; border: 2px dotted #5e5e5e; padding:10px; position: relative; z-index: 2 !important; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; }


5. Schritt

Es nimmt Form an ... Jetzt kommen nur noch Einzelheiten. Als nächstes machen wir den Namen des Kommentarautors ein wenig größer (bei 110% veränderbar), verschieben das Datum und das "Antworten" ganz nach rechts, damit man da ein gewisses System erkennen kann. (Falls euer Button dadurch total verrutscht, sagt ihr mirs bitte - war ein Experiment :D) Mir gefällt die Struktur einfach besser, da hat man auf der einen Seite den Namen und den Text hat, und auf der anderen Seite die ganzen anderen Sachen. Ist einfach geordneter.

.comment-header { padding-bottom: 8px; font-size: 110%; } .comments .comments-content .datetime { float: right; } .comment-actions{ padding: 8px; margin-left: 435px; float: right; margin-top: -19px; }

6. Schritt
Ich finds immer schön, wenn die Kommentare des Postautors anders hervorgehoben werden. Dazu benutzen wir ein schönes Tutorial von CopyPasteLove. Ich hab mich für ein blasses Lila entschieden. Hier interessiert euch nur Border und Backround, die wir beide schon kennen; ich werde den selben Borderstyle von vorhin anwenden und nur die Hintergrundfarbe ändern. Wie, was, wo, wann? Bitte dazu das kurze Tut von CPL lesen!
Achtung: Dieser Code wird als einziger nicht unter /* Comments gelistet, sondern direkt über </body> platziert!

<script src='http://code.jquery.com/jquery-latest.js'/> <!-- ss highlight author starts --> <script> $(function() { function highlight(){ $('.user.blog-author,.ssyby').closest('.comment-block') .css('border', '2px dotted #5e5e5e;') .css('background','url("http://i43.tinypic.com/jueqs5.jpg")') .css('padding', '10px'); } $(document).bind('ready scroll click', highlight); }); </script> <!-- ss highlight author ends -->

7. Schritt
Was stört jetzt noch? Ich weiß ich bin eine Perfektionistin - aber dieser dämliche riesige Stift nach dem Namen des Postautors! *Krise krieg*  Sucht euch dazu ein simples Bild, einen Stern, ein Peace-Zeichen etc. das ihr neben eurem Namen haben wollt, am besten mit einfarbigem Hintergrund - in meinem Fall eben eine Pusteblume - und falls ihr genauso GIMP-unbegabt seid wie ich, könnt ihr euch auf dieser Seite die Hintergrundfarbe transparentieren: Datei uploaden → Edit →Transparent (ganz unten) → Farbe im Bild anklicken. Diese Methode ist zwar eher schlecht als recht, weil man nur eine einzige Farbe transparent machen kann - aber meistens erfüllt sie ihren Sinn und eine bessere und genauso leichte hab ich noch nicht gefunden, gnaaaa. Tut leid. 
Nun müsst ihr die Größe des Bildes radikal verändern: der Stift ist zB nur 18x18, meine Pusteblume 18x6 groß. Picmonkey → uploaden → resize. Dieses Bild speichert ihr, lädt es in eurem Blog hoch und holt euch mit Rechtsklick die Bild-URL. 
*verschnauf* Ein bisschen kompliziert, aber diese ganze Sache mit dem Bild finden und anpassen und pipapo ist das Schwierige. Jetzt kommt das simplere Einfügen. Sucht nach diesem Code (oder nur der Überschrift: .comments ...):
.comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); }
Sehr ihr data:image/pngBLABLABLA? Das ist die rieeesige URL des blöden Stiftes, und die löscht ihr raus. Wollen wir ja nicht haben. Stattdessen fügt ihr die URL eures gewünschten Bildes, in meinem Fall http://oi44.tinypic.com/152orqw.jpg, ein:
.comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(http://oi44.tinypic.com/152orqw.jpg); }

ET VOILÀÀÀ!

Vielen Dank an mein wunderbares Kommentarmodel Elle! :D
Natürlich könnt ihr da ganz viel variieren. Ihr könnt auch den Hintergrund weiß lassen und den Kommentar nur einrahmen. Oder andersrum. Oder doch nur die Kommentare des Autors hervorheben? Es steht euch offen! Ich hätte auch die einzelnen Schritte wie das Abrunden, Einfärben, blabla des Tutorials separat schreiben können - also ganz viele, kurze Posts - das wäre vielleicht einfacher zu behirnen gewesen. Aber so hat man wenigstens gleich mehrere Sachen vereint auf einem Blick. (Ihr könnt euch nicht vorstellen wie sehr es mich aufregt, wenn ich monatelang auf ein neues Tutorial warten muss, das ich brauche!!) Falls ihr noch Fragen habt, fragt ohne Hemmungen in den Kommentaren, und ich werde mit bestem Wissen und Gewissen antworten, soweit es mir eben möglich ist. 

Bitte, bitte, bitte sagt mir, wie es euch mit diesem Tutorial ergangen ist. Das war bis jetzt mein längstes und schwierigstes und ich bin mir nicht sicher, ob ich nicht vergessen habe, irgendwas Wichtiges zu erklären. Rückmeldung in den Kommentaren würde mir sehr helfen, mich mehr euch anzupassen und es besser machen zu können! :) Falls ihr meine Anleitung verwirklicht habt, kommentiert doch drunter damit ich euer Ergebnis angucken kann.

Edit 2016: Es tut mir sehr, sehr leid dass ich nicht auf alle eure Fragen in den Kommentaren eingehen kann! Probiert selbst auf einem Testblog an eurem Problem herum, oft findet man die Lösung auch im Alleingang. Ihr könnt mir auch eine Email schreiben, auf Mails reagiere ich eher als auf Kommentare!