CSS styling photos and captions problem

the wp core code for the caption shortcode is adding 5px to each side of the image; you need to re-write the function.

i dealt with that problem earlier:
https://www.transformationpowertools.com/wordpress/adjust-caption-frame-width

Ah, that explains why I could not fix this with CSS tweaking. Forgive my ignorance but I am not familiar with php coding; do I simply copy and paste your code in to my functions.php file? Or do need to edit and or replace any of the existing code in the functions.php file, or paste your code in in any particular way?

Many thanks for your swift advice.
Tim

try with copy/paste.

just make sure you are pasting it without breaking any existing code;

maybe at the end of functions.php, just before the last ?>

Yes, copy and paste worked a treat. I literally pasted your code in at the end of the functions.php file – and it did the trick, almost. The problem I now have is that with the new functions.php, the WordPress core no longer uses the .wp-caption p.wp-caption-text div to hold the photo caption, it now places the caption directly inside the .wp-caption div that holds it and the photo img. This means i am unable to set an indent on the caption without it also indenting the photo too – even if I use the text-indent property, this value also indents the photo.

I need functions.php to place the caption in a div separate to the .wp-caption div so I can set the text-indent or padding value without it affecting the photo. I don;t know how to fix the functions.php to do this, do you?

Many thanks
t

ps: I ran your fix on my problem page on https://timbaggaley.co.uk/photo/ and the captions now sit inside the red .wp-caption div. The .wp-caption p.wp-caption-text div which was green and held just the caption has disappeared…

my mistake ??
i forgot to transfer the .wp-caption-text class for the caption paragraph.

near the end of the code in functions.php:
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

(it should be clear where to add class="wp-caption-text")

even without the class .wp-caption-text, the styles would have worked with:
.wp-caption p { text-indent: 5px; }
and no text-indent on .wp-caption { ... }

good luck with your site ??

ps: the red below the text comes from a margin-bottom on paragraphs with a higher priority, so you need to use !important to remove it; for instance:

.wp-caption p.wp-caption-text {
	color: #000;
	font-size: 12px;
	padding: 5px;
text-indent:5px;
margin-bottom:0!important;   }

pps:
the narrow red above the caption text can be eliminated by setting line-height: 12px; in .wp-caption, and line-height: 18px; in .wp-caption-text

Thanks for this it helps a lot ..

@dragonsjaw

nice to hear – i didn’t know you had the same problem ??

@alchymyth

The text-indent doesn’t work for me in .wp-caption p.wp-caption-text, I can only get it to work in .wp-caption where it moves the image too – and then I’ve realised it only indents the first line of text so even if it worked, it would be no use on captions running to more than two lines – ooops.

As you first said in your first reply, fixing the functions.php is the real cure. My problem is i do not know php. Where exactly do I insert the missing code:

. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

Into your code:

}
endif;
add_shortcode('wp_caption', 'slim_img_caption_shortcode');
add_shortcode('caption', 'slim_img_caption_shortcode');
function slim_img_caption_shortcode($attr, $content = null) {
 // Allow plugins/themes to override the default caption template.
 $output = apply_filters('img_caption_shortcode', '', $attr, $content);
 if ( $output != '' )
 return $output;

 extract(shortcode_atts(array(
 'id'    => '',
 'align'    => 'alignnone',
 'width'    => '',
 'caption' => ''
 ), $attr));

 if ( 1 > (int) $width || empty($caption) )
 return $content;

 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

 $frame_width = 0; // frame width in pixels per side //

 return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . ( 2 * $framewidth + (int) $width) . 'px">'
 . do_shortcode( $content ) . '<p>' . $caption . '</p></div>';
}

I’ve tried pasting it in in various places but I’m guessing and I keep getting syntax errors.

Thanks
t

the whole thing with the changes integrated:

https://pastebin.com/rJv19AMZ

as i suggested before, the styling with the indent would work with:
.wp-caption p { text-indent: 5px; }

it only indents the first line of text so even if it worked, it would be no use on captions running to more than two lines

what effect are you trying to achieve?
can you create a mockup fo rthis?

@alchymyth
I had been struggling with the ‘caption’ awhile ago, and for my needs at the time just made it transparent, it worked for that site, but this is good to know for future uses. ??

@alchymyth
You fixed it – big thanks!
FYI: the code you posted for me on pastebin is missing the single quotes around <p class=”wp-caption-text”> so when I first c&p’d it I got a syntax error. A tiny detail but worth pointing out for the benefit of PHP dunces like me.

I’ve used your fix in two different themes with full success, one being a theme I generated with Artisteer – thank you. I’ll make a contribution to your coffee fund.

If you want to see the result on my test page, you can see it all fixed on https://timbaggaley.co.uk/photo/

thank you ??

if this is all working, please mark this thread as ‘resolved’ – thanks.

good decision… i used it too with success

I only need to make the caption text line up on the left margin. Right now it is centered. How do I do that?

autismnewsbeat.com

try and add some style like this to style.css of your theme:

.entry dd.wp-caption-dd { text-align: left; margin-left:5px; margin-right:5px; }

and find this style:

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

and add

text-align: left;
margin-left:5px;

at the end of it.