Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.
I have done that, esmi. Thanks, for the reminder, though. Now what?
Here is the site: handlingtruth.com
The image you need to change is images/comment-bubble.jpg (43 by 36px). If you just drop a similarly sized image with the same name into your child theme’s images folder, it should get used immediately. You might be able to get away with using a slightly larger image but, the bigger it is, the more likely you’ll have to add some extra CSS tweaks to the child theme’s CSS. If you’re not using it already, try using Firefox with the Firebug add-on for this kind of work.
http://getfirebug.com/
Thanks again. I do use (and love) firebug. I just didn’t see the image when analyzing it with that. Thanks so much for that info! I’m also just learning about child themes. Before this I have mostly used Thesis. I really appreciate your help!
Unfortunately I am lost here. I created a image of the comment-bubble.png with “Reply” on it for the Twenty-Eleven child theme. When I roll over the image, though, I get white around the text. I don’t really understand what is controlling what here, so I don’t know how to change that. Please help!
I am still at a loss about how to make the roll-over balloon look right. I tried editing the comment-bubble.png, the comment-bubble-dark.png and the comment-bubble-dark-rtl.png. When I roll over the balloon I get whiteness around the text and the balloon outline doesn’t look good. I worked on the masking color, but it didn’t seem to help. Any advice would be appreciated!
Also, I am using Firebug but I don’t see how to find what image is used for the balloon. I wouldn’t know which image to edit without the info from esmi.
Here’s the link: http://www.handlingtruth.com/
the effect is not caused by the css but by the quality of your background graphic which has white/grey egdes around the bubble and the reply text;
possibly try to work with css image sprites for the :hover instead of the Twenty Eleven way of the hover effect.
Thanks, achmyth. I’ll work on that.
Is WordPress using the comment-bubble-dk and the comment-bubble-dk-rtl in the hover? I can’t tell what is up with that.
this is the corresponding css from Twenty Eleven style.css:
http://pastebin.com/xJFZ7K4d
and from /colors/dark.css:
/* Comments link */
.entry-header .comments-link a {
background: #282828 url(../images/comment-bubble-dark.png) no-repeat;
border-color: #222;
color: #888;
}
the :hover only changes the background color (not the background image) of the link.
Thank you for that. I think my balloon art is better now and so is my understanding. I appreciate the help!
