[Resolved] Caption below image

Home Forums Support Caption below image

Viewing 15 posts - 1 through 15 (of 61 total)
  • Author
    Posts
  • #3976
    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!

    #4011
    Tom
    Lead Developer
    Lead Developer

    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 4 years, 7 months ago by Tom.
    #4040
    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;
    }
    #4041
    Tom
    Lead Developer
    Lead Developer
    #71621
    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.

    #71670
    Tom
    Lead Developer
    Lead Developer

    @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!

    #71679
    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.

    #71682
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #71689
    Andrey

    Thank you, Tom!

    #71704
    Tom
    Lead Developer
    Lead Developer
    #112127
    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

    #112174
    Tom
    Lead Developer
    Lead Developer

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

    #112960
    Ryan M.

    Thx for sharing

    #127375
    Kendall Joseph

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

    #127379
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 61 total)
  • You must be logged in to reply to this topic.