Filed under:
Looking for a base design for Blogger comments thread? Here's a CSS code for you.
You can use this style for your Blogger blog threaded comments.
To set the default profile image for anonymous user, change the image URL on .avatar-image-container img, which is currently a pixelated cat.
| css |
|---|
/*default styling*/
.comment-thread > ol {
list-style: none;
padding: 0;
}
.comment-header {
display: inline-flex;
column-gap: 4px;
align-items: center;
}
span.icon.user.blog-author:after {
content: "Author";
display: inline-block;
font-size: 0.8rem;
border-radius: 4px;
background: #ffc107;
padding: 0 8px;
font-weight: bold;
}
.comment-header a {
text-decoration: none;
font-style: initial;
color: inherit;
}
.comment-header .datetime {
font-size: 0.9rem;
opacity: 0.6;
}
span.comment-actions.secondary-text {
display: flex;
gap: 24px;
font-size: 0.8rem;
text-transform: uppercase;
opacity: 0.9;
}
span.comment-actions.secondary-text a {
display: inline-block;
text-decoration: none;
color: #242424;
font-weight: bold;
}
.avatar-image-container img {
border-radius: 50%;
margin-top: 4px;
width: 46px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabqS5FReBFRLegacGtHbkGyIZY8-WpJM3elAu0KB10E9MVSUmG2Ib9ySz9ZZ_t4nbHXquuEJaRBycxWuM_E_WlngcmK52UKlHCam1sG-U_QVxQM22gETTjEVsX-STSMTil-FYYQVdAYfJ/s48-c-rw/2021-11-03+23_23_36-Untitled+%25282%2529+-+Windows+Photo+Viewer.jpg');
}
.comment-replies .avatar-image-container img {
width: 32px;
}
.comment-replies .avatar-image-container {
justify-content: end;
display: grid;
}
.comment-replies {
grid-column: 1/3;
}
.comment-replybox-single {
grid-column: 2;
}
.comment-thread .comment {
display: grid;
grid-template-columns: 46px 1fr;
gap: 10px 14px;
}
p.comment-content {
font-size: 14px;
line-height: 1.3rem;
margin-top: 4px;
margin-bottom: 8px;
word-break: break-word;
font-family: 'Roboto';
}
.comment-block {
padding-bottom: 8px;
}
cite.user a {
font-weight: bold;
font-size: 0.9rem;
}
#top-continue a.comment-reply {
display: flex;
justify-content: center;
text-decoration: none;
color: #5e5e5e;
background: #ffffff;
border: 2px dashed;
padding: 8px;
opacity: 0.8;
}
#comments .comment-thread .thread-count {
display: none;
}
#comment-holder .continue:not(#top-continue) {
display: none;
}
#top-continue {
margin-top: 2rem;
}
.comment-replybox-thread {
margin-top: 1.5rem;
} |
series_template_development