WordPress › Support » CSS styling photos and captions problem

baggi-t
Member
Posted 1 year ago #

I am having a problem with styling photos and their captions in WordPress powered website designs. I want to set my photos in frameless boxes with the captions underneath and left justified in a box which fits flush to the photo. I have tried all manner of CSS hacks and differing themes but I always encounter a mysterious margin on the right of my photos. I can't believe I'm the first designer to want to run a photo and its caption styled this way using WordPress, but I cannot find a theme that suits or in which I can alter the CSS. Please see a clear explanation of my problem here: http://timbaggaley.co.uk/photo/ and let me know if you can solve this one fore me - thanks
Tim
alchymyth
The Sweeper
Posted 1 year ago #

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:
http://www.transformationpowertools.com/wordpress/adjust-caption-frame-width
baggi-t
Member
Posted 1 year ago #

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
alchymyth
The Sweeper
Posted 1 year ago #

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 ?>
baggi-t
Member
Posted 1 year ago #

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 http://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...
alchymyth
The Sweeper
Posted 1 year ago #
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
dragonsjaw
Member
Posted 1 year ago #

Thanks for this it helps a lot ..
alchymyth
The Sweeper
Posted 1 year ago #

@dragonsjaw

nice to hear - i didn't know you had the same problem ;-)

baggi-t
Member
Posted 1 year ago #

@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

alchymyth
The Sweeper
Posted 1 year ago #

the whole thing with the changes integrated:

http://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?
dragonsjaw
Member
Posted 1 year ago #

@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. :)
baggi-t
Member
Posted 1 year ago #

@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 http://timbaggaley.co.uk/photo/
alchymyth
The Sweeper
Posted 1 year ago #

thank you ;-)

if this is all working, please mark this thread as 'resolved' - thanks.
aheadra
Member
Posted 1 year ago #

good decision... i used it too with success
autismne
Member
Posted 1 year ago #

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
alchymyth
The Sweeper
Posted 1 year ago #
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.

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] CSS styling photos and captions problem (16 posts)

Topic Closed

About this Topic

Tags

Code is Poetry