Help with WP 2.6 Image Captions and Video

Captions already have a fair amount of styling on them. Try adding this to your theme:

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

And then editing that as you need to do so.

It would have taken me ages to get that. Thanks a lot, it looks perfect just like that.

Andy

I stole it straight out of the default theme. ??

I just used this fix as well but I have one question. When I try to align it to the right, it doesn’t move to the right when I post it. It goes to the top while in the editor it shows up on the right.

beisbolct: Read this one: https://www.ads-software.com/support/topic/164999

Step 9.

Hi Otto,

Excellent help.

I notice that the following CSS lines do not validate:

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Any idea what styling benefit they add?

@rpesq this is some early CSS3 for browsers that support it (different selectors for different browsers). Compare how the captions look in Firefox3/Safari to IE7/Opera to see the difference ??

@azaozz, I see a very very subtle difference in the corners being rounded.

Thanks.

How can I remove or supress the arrow image in my captions. I assume this is for links but I don’t have links from my images.

I can’t find any CSS that refers to the arrow so assume that it is in the “code”.

Many thanks

David

@otto42 – Thank you so much for fixing problems! I just also got these problems (Image caption & image align ) and now I’ve fixed all with your helps!

Again Thank you so much!

@david.hughes If there’s an arrow image, it is coming from your theme’s style.css. Maybe try something like:

.wp-caption a {
	background: transparent;
	text-decoration: none;
}

Also worked for me. Just added the code to my style.css in the “images” section. Thanks Otto for another rescue.

Hi Otto,
I’m eager for image captions. Have upgraded to 2.6 and inserted the caption code you quoted above into my theme style sheet. Still, no captions show up. I have a feeling I might have non-standard code in the style.css, though it works (without captions). For images, I have:

img
{
	border:#c99 0px solid;
	padding:1px;
}
img.wp-smiley, img.noborder
{
	border:0;
	padding:0;
}
.left
{
    float:left;
    margin:5px 15px 3px 0px;
    padding:0;
}
.right
{
    float:right;
    margin:5px 0px 3px 15px;
    padding:0;
}

For every image I post, I have to change “alignright” to simply “right”. Could this be the reason that captions are not showing up? If so, what should I do?
Thanks in advance!
https://bobarno.com/thiefhunters

I was having the same problem … no matter what code I posted into my CSS, nothing was helping. The image was showing up and floating properly, but no caption or other styling.

Discovered that, for me at least, the culprit was the Typogrify plugin. Disabling it restored the caption functionality. FYI.

Thanks to WakeupNaptown it is working for me too. I add the code above to my css … it didn’t work.

I deactivated all my plugins … it worked.

Reactivated one by one and it is still working.

So … deactivate and then reactive plugins one by one to see if that is the culprit.