Support » Fixing WordPress » Help with WP 2.6 Image Captions and Video

  • Resolved acrofford

    (@acrofford)


    I really like the captions option in WP 2.6. I am trying to use them but there is not spacing between the caption and my post test. I also wanted it to be a different color and aligned differently.

    I assume I need to create a new class and then with each caption use <div class=”caption”>the caption</div>. This works but I don’t know how to get it so it is spaced.

    .caption {
    color: #999999;
    text-align: left;
    }

    You can see what I am talking about at http://www.andycrofford.com.

    Also, when I try to embed the video on the WP Dev blog it is just a blank space where the vid should be. Any ideas on that?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Captions already have a fair amount of styling on them. Try adding this to your theme:

    /* Captions */
    .aligncenter,
    div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .wp-caption {
    	border: 1px solid #ddd;
    	text-align: center;
    	background-color: #f3f3f3;
    	padding-top: 4px;
    	margin: 10px;
    	-moz-border-radius: 3px;
    	-khtml-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    .wp-caption img {
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
    	font-size: 11px;
    	line-height: 17px;
    	padding: 0 4px 5px;
    	margin: 0;
    }
    /* End captions */

    And then editing that as you need to do so.

    Thread Starter acrofford

    (@acrofford)

    It would have taken me ages to get that. Thanks a lot, it looks perfect just like that.

    Andy

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    I stole it straight out of the default theme. 😉

    I just used this fix as well but I have one question. When I try to align it to the right, it doesn’t move to the right when I post it. It goes to the top while in the editor it shows up on the right.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    beisbolct: Read this one: http://wordpress.org/support/topic/164999

    Step 9.

    Hi Otto,

    Excellent help.

    I notice that the following CSS lines do not validate:

    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    Any idea what styling benefit they add?

    @rpesq this is some early CSS3 for browsers that support it (different selectors for different browsers). Compare how the captions look in Firefox3/Safari to IE7/Opera to see the difference 🙂

    @azaozz, I see a very very subtle difference in the corners being rounded.

    Thanks.

    How can I remove or supress the arrow image in my captions. I assume this is for links but I don’t have links from my images.

    I can’t find any CSS that refers to the arrow so assume that it is in the “code”.

    Many thanks

    David

    @otto42 – Thank you so much for fixing problems! I just also got these problems (Image caption & image align ) and now I’ve fixed all with your helps!

    Again Thank you so much!

    @david.hughes If there’s an arrow image, it is coming from your theme’s style.css. Maybe try something like:

    .wp-caption a {
    	background: transparent;
    	text-decoration: none;
    }

    Also worked for me. Just added the code to my style.css in the “images” section. Thanks Otto for another rescue.

    Hi Otto,
    I’m eager for image captions. Have upgraded to 2.6 and inserted the caption code you quoted above into my theme style sheet. Still, no captions show up. I have a feeling I might have non-standard code in the style.css, though it works (without captions). For images, I have:

    img
    {
    	border:#c99 0px solid;
    	padding:1px;
    }
    img.wp-smiley, img.noborder
    {
    	border:0;
    	padding:0;
    }
    .left
    {
        float:left;
        margin:5px 15px 3px 0px;
        padding:0;
    }
    .right
    {
        float:right;
        margin:5px 0px 3px 15px;
        padding:0;
    }

    For every image I post, I have to change “alignright” to simply “right”. Could this be the reason that captions are not showing up? If so, what should I do?
    Thanks in advance!
    http://bobarno.com/thiefhunters

    I was having the same problem … no matter what code I posted into my CSS, nothing was helping. The image was showing up and floating properly, but no caption or other styling.

    Discovered that, for me at least, the culprit was the Typogrify plugin. Disabling it restored the caption functionality. FYI.

    mommyknows

    (@mommyknows)

    Thanks to WakeupNaptown it is working for me too. I add the code above to my css … it didn’t work.

    I deactivated all my plugins … it worked.

    Reactivated one by one and it is still working.

    So … deactivate and then reactive plugins one by one to see if that is the culprit.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Help with WP 2.6 Image Captions and Video’ is closed to new replies.