I’ve just spent some time to apply some better styles to the comments in my blogs. If you take a look at a previous post with some comments or leave some here, you will see the following changes:
- Added background colours and hover styles to the comments.
- Added rounded corners for Gecko based browsers or any UA that support’s
CSS3’s ‘
border-radius
‘ property. - Added Additional highlight for comments from myself.
The additional highlight for comments from me was a little bit of a challenge to work out how to do. I realised that all comments from contain me contain a link to my blogger profile. So, I was able to use that as a hook for the styles:
.comment-author a[href="http://www.blogger.com/profile/3043458"] {
background: #BECFFB;
margin: -1em 0 .5em -1em;
padding: 1em 1em .5em;
-moz-border-radius: 10px;
border-radius: 10px;
}
As a result, it only works for browsers that support the attribute selector (at least Firefox and Opera¬), and I could only apply the additional style to the one element. So, it’s quite a small addition, but it’s enough to highlight my comments with a darker blue box around my name.
Are these styles visually appealing? Can you suggest any improvements? What do you think of the way I highlighted my comments? Let me know what you think, and I’ll fix up the styles based on your comments, if necessary.
This is a comment by me just to demonstrate the styles I’ve added.
Hi Lachy,
It’s quite a time ago we mailed about Fitt’s Law! In the meantime I was experimenting with rounded corners, that can be used without css3. With the possibility of self-adapting for fluid design. I found it can be done with some simple css and 1 small image.
The results I dropped into a Liquid Rounded Corners article, together with a Liquid Corner Playgarden wtith some types of application.
I thougt maybe you are interested.
Many greetings,
francky