WordPress captions come with a fixed frame which is set in the wordpress core file ‘media.php’ in the ‘wp-includes’ folder.
The caption shortcode function adds a 5px wide space to the left and right of the image; and outputs the new calculated width as in an inline style in the attachment div.
For WordPress users, a familiar picture which you can only influence within limits by avoiding a background color for the attachment div.
However, if you want to have a slim contempory design and a background color behind the caption text, this would simply not work.
You need a fix.
The code below can be added to functions.php of your theme to allow you to set the frame width on your captions (sitewide) to any amount you like.
You need to adapt a few .wp-caption styles in style.css of your theme, after you have successfully added the code – that is all.
There you have your new contempory slim image caption design.
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 * $frame_width + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
edit: added the css class .wp-caption-text
Another step to total freedom of design …