WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. baggi-t
    Member
    Posted 3 years 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

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years 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

  3. baggi-t
    Member
    Posted 3 years 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

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years 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 ?>

  5. baggi-t
    Member
    Posted 3 years 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...

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years 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

  7. dragonsjaw
    Member
    Posted 3 years ago #

    Thanks for this it helps a lot ..

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    @dragonsjaw

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

  9. baggi-t
    Member
    Posted 3 years 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

  10. alchymyth
    The Sweeper & Moderator
    Posted 3 years 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?

  11. dragonsjaw
    Member
    Posted 3 years 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. :)

  12. baggi-t
    Member
    Posted 3 years 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/

  13. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    thank you ;-)

    if this is all working, please mark this thread as 'resolved' - thanks.

  14. aheadra
    Member
    Posted 3 years ago #

    good decision... i used it too with success

  15. autismne
    Member
    Posted 3 years 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

  16. alchymyth
    The Sweeper & Moderator
    Posted 3 years 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.

About this Topic