[Resolved] Caption below image

[Aaron Redman]

Thanks for all the help. You have been invaluable!

Is there a way that I can move image captions to be below the images as opposed to overlaying the images along the bottom?
Thanks!

[Tom]

Hi Aaron,

Give this a try:

.wp-caption .wp-caption-text {
    background: transparent;
    padding: 10px 0;
    position: relative;
    color: #000;
}

Tom

• This reply was modified 8 years, 2 months ago by Tom.

[Aaron Redman]

Great!
This is what i ultimately used:

.wp-caption .wp-caption-text {
    background: transparent;
    padding: 2px 0;
    color: #616149;
    text-align: center;
    position: relative;
}

[Tom]

Thanks for sharing! 🙂

Tom

[Andrey]

In order for the links to be visible in case we move captions below images your code, Tom, is not enough. I had to add more lines:

`.wp-caption .wp-caption-text {
background: transparent;
padding: 5px 0;
color: #3a3a3a;
position: relative;
}

.wp-caption .wp-caption-text a, .wp-caption .wp-caption-text a:visited, .wp-caption .wp-caption-text a:hover {
color: #359BED;
text-decoration: underline;
}

But I am not a coder, so links do not change colour on pointing with mouse over them. I don’t know how to do it.

[Tom]

@Andrey – good point! The caption links are set to white so they show up on the image.

.wp-caption .wp-caption-text a, 
.wp-caption .wp-caption-text a:visited, 
.wp-caption .wp-caption-text a:hover {
	color:#359BED;
	text-decoration: underline;
}

Did the above code not work for you? Can you link me to a page with a linked caption so I can see why it’s not taking effect?

Thanks!

[Andrey]

Hi Tom! Here’s the link – http://www.aviascope.com/2010/10/16/aviasubbota-109/
The code I found in the style.css and inserted into custom style (and gave above) works as for the colour. What doesn’t work is the blue on the hyperlink doesn’t change to black on mouse hover like with any link in the text. No big deal actually, only makes the look/behaviour slightly inconsistent. Also, I would like the caption to be in italics if it is under the image. (I thought that your way – dark box with caption in white – would actually look quite nice attached to the bottom of the image instead of inside.)

By the way, the image above the caption is an example of how images are distorted. This route map is 720x453px, but it is seen with a naked eye that it is stretched horizontally (hence, not quite sharp text and lines in the image. Any post with an image inserted into the main body is the same – stretched horizontally 2-3 mm and reduced vertically the same 2-3 mm.

[Tom]

Ah – I see what you mean about the distortion.

WordPress natively adds 10px to the caption width in order to give the image a border look – which in my opinion is an old, over-used style.

You can remove this extra padding by adding this PHP snippet using a plugin like this: https://wordpress.org/plugins/code-snippets/

function generate_remove_caption_padding( $width ) {
	return $width - 10;
}
add_filter( 'img_caption_shortcode_width', 'generate_remove_caption_padding' );

I would add it to the core of GP, but WP.org most likely would reject it as it alters default WordPress behavior.

As for the link colors, this will make it so the hover goes black:

.wp-caption .wp-caption-text a, 
.wp-caption .wp-caption-text a:visited {
	color:#359BED;
	text-decoration: underline;
}

.wp-caption .wp-caption-text a:hover {
	color: #222;
}

[Andrey]

Thank you, Tom!

[Tom]

You’re welcome!

[Paul]

I use this:

.wp-caption .wp-caption-text a, 
.wp-caption .wp-caption-text a:link, 
.wp-caption .wp-caption-text a:visited, 
.wp-caption .wp-caption-text a:hover
.wp-caption .wp-caption-text {
    background: transparent;
    padding: 5px 0px;
    color: #191919;
    text-align: center;
    font-size: 13px;
position: relative;
}

But it does not work. I really do not understand it?!?!
The caption is not under but on the image. Even the color of letters is still white. How can it be? Whats wrong?? I get crazy.

Sincerely
Paul

[Tom]

Hmm, do you have a link to a page with a caption?

[Ryan M.]

Thx for sharing

[Kendall Joseph]

Helpful thread! That “fixed” my captions to make the look how I wanted them too. Thanks!

[Tom]

Glad it was helpful! 🙂

[Author]

Posts