Thursday, March 7, 2013

Changing Comment Bubble Color in Blogger Dynamic Views Template


Before

After

Here's a quick one. The bubble comments are set to a greyish color by default in all Dynamic View templates, and there isn't an easy way to change this color in the Template Designer. But here's how you can change it using some CSS..

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog. 
?
1
2
3
4
5
6
7
8
.bubble.comments-count{
background-color: red !important;
border-color: red !important;
color: yellow !important;
}
.bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
border-color: red transparent transparent !important;
}
To customize the color, change the word 'red' in Lines 2, 3 and 7 above to another color (eg: black, white, blue, etc). To change the bubble text color, change the word 'yellow' inLine 4 above. For specific color options, you can replace the word 'red' with specific color hex code. You can generate specific hex code here.

Important note: At the time of this writing, there's a bug in the Template Designer that isn't letting some users to save their changes. If you're affected, try using IE to save your changes.

No comments:

Post a Comment