When you insert a captioned image, the HTML editor won’t include the actual code (the code that can be seen if you view the sourcecode of your published post or page); it will only include a shortcode: a fixed formula that simply tells the theme to apply its default styling for captioned images. For that reason, the styling of image captions isn’t directly editable: you can’t apply any of the tools of the Visual editor, or modify the caption part of the shortcode in the HTML editor, to change the formatting of the caption (doing so will only mess the result on the blog, and then you can only remove the image from the post and re-insert it).
Image captions in Twenty Eleven are adorned with a strange dash, and the text is left aligned and pushed to the right of the dash. That’s part of the default styling of the theme, but some users don’t like it – and I don’t blame them… If you have the Custom Design upgrade and experience in CSS editing, you can change the styling once for all (see here). If you don’t have the upgrade, you can use the workarounds described below to get rid of the dash and center the caption text on an image-by-image basis. What these workarounds do is replace the shortcode with the real code needed for a captioned image: the real code can be freely modified. And of course these workarounds can be used in any theme (with different properties and values in the code, depending on how the default captions are styled and what you want to change); see example here.
A.
If you wish to insert a non-clickable image in relatively small size, the best practice is to make sure the image has a resolution of 72dpi and the pixel width you really want on your post. If the image isn’t already so, make a copy of it, downsize it to the right resolution and pixel width in an image editing application, and use that copy. The reasons are that a) browsers display 72dpi versions no matter what the resolution of the files you have uploaded, and b) images downsized by WP lose some color and sharpness (see my post on image quality). So if you upload large high-resolution files you actually lose quality, your blog pages take longer to load, and you waste your storage space.
By relatively small I mean anything up to the width that can fit in the main column of your blog (or your sidebar, if you want to place the image there using a Text widget). So in general you need to consult my posts on maximum displayed image width and sidebar width.
But note that the widths listed in these posts refer to plain, non-captioned, images. In most themes captioned images show up inside a frame that encloses the image and the caption, and the frame will usually eat up 10px of width (in some themes more); in Twenty Eleven the safe maximum is around 550px.
Step 1: Click the Add Media button of the post/page editor and upload the image from your computer. Once “crunching” is over, type a short description in the “Alternate Text” field (optional), don’t type anything in the Caption field, click Link URL > None, select the alignment you prefer, select Size > Full Size, and click “Insert into Post”. Then switch the editor to HTML; the image code will look like this:
The URL of the image starts with http and ends with the filetype suffix (jpg or png or gif). The filename is the actual name of the file you have uploaded. WWW, HHH and IDIDID stand for the width, height and identity numbers of the image. Also, in all these code models I’m using alignleft: can be alignleft, alignright, alignnone, aligncenter (see the Notes at the bottom if you aren’t sure of the differences).
Step 2: Replace that code with this:
ZZZ should be WWW+10 (or a little more, but always an even number). You can change the 4px, to make the bottom part of the frame smaller or larger.
B.
If you wish to insert a non-clickable image in relatively small size, but the original is larger, start with Step 1 as above, but replace the initial code with this:
YYY should be the width you want on the post. Again, ZZZ should be YYY+10 (or a little more), and you can change the 4px to adjust the bottom part of the frame.
(This version of the workaround isn’t really recommended, for the reasons I explained under A, but I’m including in case you don’t know how to or you cannot properly downsize your images.)
C.
If you wish to insert an image in relatively small size that links to the larger original when clicked, then you’re no longer interested in best quality on the post. But again, if possible, you should use copies of your images downsized to 72dpi and a reasonable width: most users’ screens are no wider than 1000-1200px, so there’s no point uploading, say, 4000px wide images (again you would be needlessly wasting your storage space and considerably increasing the loading time of your blog pages).
Start with Step 1 as above, but replace the initial code with this:
As in case B, YYY should be the width you want on the post, ZZZ should be YYY+10 (or a little more), and the 4px can be changed.
Change <a href to <a target="_blank" href in the above code, if you prefer having the larger original open in a new browser window or tab.
Notes
• The code I have added right before the caption removes the dash and centers the text in relation to the image, but retains the default font, color, and size of image captions in Twenty Eleven. You can change those as well, or you can add more commands to further modify the styling of the caption. If you change the font, you must confine yourself to the fonts commonly installed in most users’ computers (see my post Formatting text pt. 5); if you prefer the regular font of the theme, just remove the font-family:Georgia; bit.
• Alignleft/alignright mean place the image at the left/right side of the available space, and start the rest of the content next to the image (wrap around). Alignnone/aligncenter mean place image left/center, and start rest of content below image (no wrap around).
• To remove the dash and center the caption text in Twenty Eleven if you have the Custom Design upgrade, you add this in the CSS editor:
wordpress tips 
Thnak you so much for publishing this post.
Posted by timethief | November 30, 2011, 02:43I don’t suppose we need a “you’re welcome” reply between us! Instead of that I’ll tell you I’ll publish a companion post on how to modify the frame of captioned images.
(And oh, how many times will we have to keep telling users to presize their images – a point that staff never seems to care honing in?)
Posted by Panos | November 30, 2011, 21:34Just a minor little thing:
For your site to be searchable for themes, please write Twenty Eleven. If you don’t, then the date “2011” will come up with a whole year of posts not relevant to the theme Twenty Eleven.
best: tess
Posted by Tess | December 2, 2011, 04:56Ah yes of course, thanks, done! (It was a leftover from the rough draft: changed the other two instances and forgot this one.)
Posted by Panos | December 2, 2011, 06:17Thank you very much, Panos! I use twenty eleven and really didn’t like image captions as they were…
Posted by 風当たり | December 5, 2011, 11:00You’re welcome – I don’t like them either! (But that’s not the reason I published the post, of course: first, users have asked for this in the wp.com forum, second, it can be used in any theme to change the styling of captions). If you want any further changes and don’t know how to make them, let me know.
Posted by Panos | December 5, 2011, 11:32Good post… Just killing some time rubbaging around and found your page. Great looking website. I’ll have to add the page to come back and see what’s new. Cheers
Posted by itspak1 | December 8, 2011, 06:39Hi from here too, itspak, and thanks for the compliments!
(Great looking? You think so? I thought the content is useful but the appearance is mediocre…)
Posted by Panos | December 8, 2011, 06:51PS If you’ll be coming back, searching the lists of posts via the top nav menu might be more profitable than checking for what’s new: I don’t post often – maybe once a week or every ten days or so.
Posted by Panos | December 8, 2011, 06:56Well I don’t think your site appearance is mediocre. Good decent look. You wrote the post in much detail and it took me half an hour to read it which so many people wish don’t to do. So my suggestion is to slang it. cheers
Posted by itspak1 | December 8, 2011, 09:52Ah yes, “decent look” seems a more appropriate description to me – thanks!
Posted by Panos | December 8, 2011, 15:29Hi Panos! Is there something wrong with WP. I can not access support forums directly. Also the forums created by me are removed.
Posted by itspak1 | December 12, 2011, 08:29I don’t know but maybe: it’s been a few weeks now that some usernames in the forum occasionally stop linking to the user’s blog, and today I’m seeing relatively little traffic. Maybe there’s some bug that has escaped them (Support was closed this weekend). On the other hand, in our volunteers’ blog and in the moderators’ blog there’s no report about anything like the problem you seem to be having.
“I can not access support forums directly.” What do you mean exactly? What’s the way you can access them and what’s the way you cannot?
“Also the forums created by me are removed.” Sometimes the system may mistake a post for spam. If you don’t manage to start a new thread, try posting in a previous thread of yours to report the issue.
Posted by Panos | December 12, 2011, 15:39That was just temporary. Now I can excess my forums. Yesterday I requested staff to close a forum for some reason which they did. I think that was the consequence of that.
However thanks for your query.
Posted by itspak1 | December 12, 2011, 17:10Hi ITSPAK1,
Now that I’m reading this, I’ll tell you that it was not staff but me in my volunteer moderator’s role who deleted your comments in the forum.
The fellow in that thread was making some very rude comments, racist illogical comments, so I spammed him. Once I did that, his posts were gone. So your comments were, so to speak, not logical. So as a moderator I deleted them. Without the protagonist, your comments did not make sense. I hope you understand that?
Posted by Tess | December 12, 2011, 19:28By the way, was it you who marked the thread with a “modlook” tag?
Posted by Tess | December 12, 2011, 19:31Oh I’m grateful to you. You did a lot favour to me. That person was really spreading racialism. Protagonist? I do not understand this term. I did not marked the thread BTW.
When were you appointed as a moderator? I was much curious about that. However nice to see you as a moderator.
Posted by itspak1 | December 13, 2011, 14:20Yeah I understand it now.
Posted by itspak1 | December 13, 2011, 15:16No, I did not do a favor for you. Please read my explanation.
Yes, the word protagonist was perhaps not quite the right word. Sorry if that confused you, especially as English is not your mother language. So if you understand now, I am glad.
That person was there in the wp.com forum urging on conflicts (political, racist, just plain rude, instigating conflict, being just plain being mean) that do not belong on the wp.com technical support forums. He was really just a “spammer” who was acting against the code of conduct (see that information at the top of the forums). So I marked him as a spammer.
People on wp.com can write about their points of view in their blogs, whether I agree or not with them. As a mod, what they write about is not directly connected to my resposibilities. But when they post in the forums, they should not attack other people.
IMO that person in the forum was attacking not only you, but exhibiting unsubstantiated racist remarks that did not fit into a useful technical discussion about wp.com platform issues. So he deserved to be spammed on the forums. I did indeed spam him. Which means he will eventually (immediately??) be disallowed to post again. (for a period I think.)
I was invited to be a moderator in July 2010.
IMO there are several other regular volunteers who post with helpful answers in the English forum who could also be very good mods on the forum but for various reasons they choose not to. I respect their reasons.
Panos, whose blog we are discussing this is a moderator in the Greek forums. Just BTW.
Being a moderator does not mean that I am an expert on anything except I am trusted by staff to help keep the forums clean from spammers, and ocasionally encourage unhappy posters to get a more realistic view of what we volunteers can help them with.
This is a long answer to you, and apologies to Mr. Adam, but I hope that clears your mind?
Posted by Tess | December 14, 2011, 05:03Panos, et al
sorry for the typos. or if this is not a comment suitable for your blog. The nice young woman did want an explanation about what a mod does…
It is an idea for a post you could make: I think lots of folk don’t really understand that I am a menial volunteer moderator and have not magic powers to help with their questions…
t
Posted by Tess | December 14, 2011, 05:12I understand all this stuff now. I warned that person that he was spamming there and in return he abused me. Thanks to Tess.
But sorry to Panos for having this type of conversation not suitable to it.
Posted by itspak1 | December 14, 2011, 06:58No problem!
Posted by Panos | December 14, 2011, 11:01Could you tell me how to remove the caption dash in the CSS editor? I do have the CSS upgrade on my site, but I have only very basic knowledge of CSS and I can’t find it. Thanks!
Posted by kristin adair | January 18, 2012, 17:51Paste this in the CSS editor:
.wp-caption .wp-caption-text {
text-align: center;
padding: 5px;
}
.wp-caption .wp-caption-text:before {
display:none;
}
Posted by Panos | January 18, 2012, 18:49Hi Panos, thanks for the CSS hack – trying to get rid of that dash was driving me crazy!
Posted by Debbie Kennedy (@no_robots_here) | February 29, 2012, 18:50Thank you, thank you, thank you.
It worked!!
Posted by Julie Punishill | March 11, 2012, 00:37