This is what the default comments look like without any customization…
If you want them to look something like this…
This is one way to do it…
I made two images in Photoshop. Both are 515 px wide x 50 px tall. One was for the top of the comments bubble, the other was for the bottom of the comments bubble. You can make yours whatever size you like and tweak the css accordingly. This is what worked for me to give the effect in the example. I uploaded them to my custom/images folder. They look like this…
commenttop.gif:
commentbottom.gif:
All the following code should be put in your custom.css file. To see how to make changes to this file check out this tutorial…
Okay, ready? First thing is to move the avatar to the left and give it a little breathing room…
.custom .avatar img {float: left; margin-left: -1em; padding-right: 1em;}
Next, move the top image of the comment bubble to the top of the comment area. The first % moves the image to the left or right, the second % moves the image up or down. I gave it some height to fit the image in…
.custom dl#comment_list dt.comment{
background:transparent url(images/commenttop.gif) no-repeat scroll 50% 100%;
height: 9em;
}
Next, add the bottom image of the comments bubble to the bottom of the comments and align it with the top bubble image. The first % moves the image left or right, the second % moves the image up or down. I also added a background color which is the same as the color of the bubble images, I got rid of the bottom border, I changed the left and top margins to align it correctly and get rid of the white space, and I added a width to make the area match up with the two bubble images…
.custom dl#comment_list dd.comment {
background: #faf7b7 url(images/commentbottom.gif) no-repeat scroll 0% 100%;
border-bottom: 0 none;
margin-left: 2.4em;
margin-top: -1em;
width: 47em;
}
Next, I changed the top margin of the text area to move it up towards the top of the bubble…
.custom dl#comment_list dd.comment div.format_text {margin-top:-1em ;}
And that should do it!
Keep in mind this is a very basic walk through for this technique. Your values for the padding, margins, widths, might have to be different than mine depending on how big your content area is and other variables that might come into play. Follow these steps and adjust values where needed.
If you would like to leave a comment and you have examples of code you want to show, you must "escape the code". This allows the entire code to show correctly by inserting certain variable around certain tags to make them show. If you don't "escape the code" your code will show up broken, mangled, and it won't be able to be seen correctly. "Escaping the code" is very simple...
Go ahead, leave a comment...