System 13

If you’ve just recently bought the CSS Upgrade for your WordPress.com, there’s a pretty simple way to make your own comments stand out from the others, so that people can easily see where you’ve added to the comment conversation. I’m using the Sandbox theme on my blog here, and it’s through this theme that I added a bit of text after my name in the comments.

To do so, simply add this to your CSS:

.commentauthor-(YOUR-WORDPRESS.COM-USERNAME) .comment-author:after {
content:”… System 13 Blogger” !important;
font-size:70% !important;
}

Obviously, you’ll want to replace YOUR-WORDPRESS.COM-USERNAME with your username that you login with. So, if your username is bob, put:

.commentauthor-bob .comment-author:after {
content:”… System 13 Blogger” !important;
font-size:70% !important;
}

The way this CSS class basically works is that it uses the pseudo ‘after’ element. What this does is add to the page whatever you put for the ‘content’ attribute. As you can see, my CSS adds “… System 13 Blogger” after my name, in the comments. You can make it say whatever you want of course. Furthermore, if you want text to appear before your username, simply change :after (in the CSS selector) to :before.

You can of course also use this little CSS trick to add text to other areas of your design. It’s a nifty way to get around the “no editing HTML” security feature that WordPress.com has right now.

If you want a more graphical difference between comments, you can also customize the look of your comment posts by using a different background image for it.

Technorati Tags: CSS, design, webdesign