[BLOGGER] Styling Comments Appearance ✤✤✤

Wie man Kommentare gestaltet das zeige ich heute. Von langweilig zu etwas weniger langweilig :D

Hier unser Ursprungslook

How to style comments is what I want to show you today. From boring to a little less boring :D

Okay, that's what blogger has given us



Das ganze machen wir wie immer im CSS und darum müssen wir zum Code. HTML bearbeiten

As always we need CSS and that's why we have to open up the Code



Sucht nach

Search for

]]></b:skin>

Oberhalb davon fügen wir die CSS ein.

Above that you want to put the CSS



Als erstes runden wir das Profilbild ab und geben eine Grösse an.

We start by turning our picture into a circle and sizing.

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

Dann trennen wir die Kommentare vom Post mit einer Linie ab.

Add a line above the comments

#comments {
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
    margin-left:60px;
}

Und dann müssen wir entfernen, was Blogger noch selbst an CSS hat. In der Simple-Vorlage haben wir einen Hintergrund angegeben. Wir entfernen einfach den gesamten Kommentar Style.
Sucht also nach folgendem und löscht es.

And then we want to remove what blogger has added. In the simple template we have a background we don't want and that's why you want to search for the following and delete it.

.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);
}

Dann färben wir den Kommentar ein.

Add some color

.comments .comment-block, .comments .comment-thread.inline-thread .comment-block {
    background:#CED7F0;
    padding:10px;
    position: relative;
    z-index: 2 !important; 
}

Danach fügen wir ein Dreieck hinzu, welches unseren Kommentar in eine Sprechblase verwandelt.

Then we add a triangle to transform our comments into speechbubbles

.comments .comment-block:after{
    content:'';
    position: absolute; 
    border-color: transparent #CED7F0 transparent transparent;
    border-style:solid;
    border-width:15px;
    width:0;
    height:0;
    left: -30px;
    top: 10px; 
}

Ich hab dann entschieden, dass ich die Antwort-Kommentare noch etwas anders gestalten wollte, also habe ich noch folgende CSS hinzugefügt.

I then designed the answer comments a little differently.

.comment-thread.inline-thread .avatar-image-container{
    margin-top: 45px;
}

.comments .comment-thread.inline-thread .comment-block:after{
    border-width: 13px 25px 1px 5px;
    transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -webkit-transform:rotate(-25deg);
    -o-transform: rotate(-25deg);
    -ms-transform:rotate(-25deg);
    left: -23px;
    top: 27px; 
    z-index: 1 !important; 
    position: absolute; 
}

Als nächstes kommt etwas Style zum Kommentar-Header also Verfasser und Datum

Style the comment header

.comment-header {
    font-weight: bold; 
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 120%;
}

Und dann kommen wir zum Abschluss, etwas mehr Style für die Buttons und die Kommentare

And some finishing style

.comments .comments-content .comment {
    width:100%;
    line-height:1em;
    margin:15px 0 0;
    padding:0;
    font-size: 90%; 
}
.comments .comments-content .comment-content {
    text-align: justify;
    line-height: 22px;
}

.comments .comments-content .comment-replies {
    margin-top:0;
}

#comments h4 {
    display:inline;
    line-height:40px;
    padding:10px;
}

#comments h4{
    line-height: 30px;
    margin: 0;
    padding: 20px 0 14px 10px;
    text-transform: uppercase;
    font-weight: 400!important;
    color: #444;
}

.comments .comments-content .datetime {
    float: right;
    padding-top: 6px;
    padding-right: 20px;
}

.comment-actions{
    background: #f2f2f2;
    padding: 8px;
    margin-left: 435px;
    border: 1px solid #ddd;
    float: right;
    margin-top: -30px;
    margin-right: 5px;
}

.comments .continue a{
    background: #f2f2f2;
    padding: 8px;
    border: 1px solid #ddd;
}

.comment-replybox-thread a{
    background: #f2f2f2;
    padding: 8px;
    border: 1px solid #ddd;
}

.comment-thread a {
    color: #777;
}

Und das ist unser abgeschlossener Look für die Kommentare.
Ich finde es aber immer schön, wenn man den Verfasser auch in den Kommentaren erkennt. Also dachte ich, ich füge noch ein Ribbon hinzu, welches die Kommentare des Verfassers hervorhebt.

Wie das geht, findet ihr hier heraus.

Die CSS, die ich verwendet habe, scchaut so aus:

And that's the finished look for our comments.
I always like it, if I can tell that the author has written a comment by looking at it. You can style it differently with a small javascript which can be found here

After that just swith up the CSS. I added a ribbon

.me .comment-content:before{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    top: 27px;
    border-width: 3px 5px;
    border-style: solid;
    border-color: #23285E transparent transparent #23285E; 
}

.me .comment-content:after{
    content:'author'; 
    color: ivory; 
    background: #31377A;
    position: absolute; 
    right: -10px;
    top: 2px;
    padding: 0 10px 0 5px; 
    font-family: Dosis;
    font-size: 15px; 
    height: 25px; 
    opacity: .7;
}