In the event that you require a new style to the strung remarks of a standard Blogger layout, here's a basic CSS that will help you to apply an alternate foundation, make your symbols adjusted, include a fringe with adjusted corners and a triangle which is really a HTML substance to understand that discourse bubble look on your remarks.
To have this style in your remarks, you should simply to glue the beneath code inside the CSS part of the format, which is between the <b:skin> and </b:skin> labels.
Styling Simple Nested Comments with CSS
Step 1. From the Blogger Dashboard, go to "Layout" and press the "Alter HTML" catch
Step 2. Click anyplace inside the code zone and press the CTRL + F keys to open the inquiry box:
Step 3. Glue or sort the accompanying tag inside the pursuit box and hit Enter to discover it
]]></b:skin>
Step 4. Simply above ]]></b:skin> include this CSS:
.remarks .remark square {
foundation: #F9F9F9;
shading: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
edge best: 10px;
edge left: 60px;
cushioning: 10px;
outskirt: 4px strong #EEEEEE !critical;
outskirt radius:10px;
textual style: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.remark string li .remark block:before {
position: total;
show: piece;
left: - 26px;
shading: #EEEEEE;
content: "\25C4";
text dimension: 30px;
}
.remarks .symbol picture compartment {
width: 60px;
tallness: 60px;
max-tallness: 60px;
margin:0px 0px 0 - 28px;
cushioning: 0px;
outskirt: 7px strong #EEEEEE;
outskirt radius:60px;
}
.remarks .symbol picture compartment img {
overflow:hidden;
width: 60px;
tallness: 60px;
max-width: 60px;
border:0 !critical;
outskirt radius:60px;
}
.remarks .remark thread.inline-string {
foundation: none;
}
.remarks .proceed {
fringe beat: 0px strong straightforward;
}
.remarks content .datetime {
skim: right;
text dimension: 11px;
}
.remarks content .client a{
text dimension: 15px;
shading: #498EC9;
}
.remarks content .datetime a:hover{
shading: #777;
content beautification: none;
}
.remarks content .comment:first-kid {
cushioning main: 0px;
}
.remarks content .remark {
edge base: 0px;
cushioning base: 0px;
}
.remarks .proceed with a {
cushioning: 0px;
}
.remarks content .icon.blog-creator {
foundation picture: none;
}
The most effective method to Change Blogger Threaded Comments Background, Border and Colors
supplant the #F9F9F9 esteem to change the foundation shade of the remarks;
#555 to change the content remarks shading;
#EEEEEE to change the shade of the shadow around remarks;
4px strong #EEEEEE to change the fringe width (4px), style (strong) and shading (#EEEEEE) around remarks;
1.190em to change the remarks text dimension;
to change the bolt shading, supplant the #EEEEEE esteem from shading: #EEEEEE;
to change the fringe width (7px), style (strong) and shading (#EEEEEE) around symbols, adjust this section: 7px strong #EEEEEE;
to change the symbols size and roundness, change the 60px esteem;
Here is a device from that may pick your most loved shading: Color Code Generator
Step 5. At long last, tap on the "Spare layout" catch... furthermore, you're finished!
