WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help with WP 2.6 Image Captions and Video (17 posts)

  1. acrofford
    Member
    Posted 5 years ago #

    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?

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    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.

  3. acrofford
    Member
    Posted 5 years ago #

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

    Andy

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

    I stole it straight out of the default theme. ;)

  5. beisbolct
    Member
    Posted 5 years ago #

    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.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 5 years ago #

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

    Step 9.

  7. rpesq
    Member
    Posted 5 years ago #

    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?

  8. Andrew Ozz
    WordPress Dev
    Posted 5 years ago #

    @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 :)

  9. rpesq
    Member
    Posted 5 years ago #

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

    Thanks.

  10. Anonymous
    Unregistered
    Posted 5 years ago #

    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

  11. Anonymous
    Unregistered
    Posted 5 years ago #

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

  12. Andrew Ozz
    WordPress Dev
    Posted 5 years ago #

    @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;
    }
  13. Pac_AW
    Member
    Posted 5 years ago #

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

  14. thiefhunter
    Member
    Posted 5 years ago #

    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

  15. WakeupNaptown
    Member
    Posted 5 years ago #

    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.

  16. mommyknows
    Member
    Posted 5 years ago #

    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.

  17. Jerry Gartner
    Member
    Posted 5 years ago #

    This came out of the classic theme css and resolved my particular version of this issue.

    /* Captions & aligment */
    .aligncenter,
    div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .alignleft {
    	float: left;
    }
    
    .alignright {
    	float: right;
    }
    
    .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 & aligment */

Topic Closed

This topic has been closed to new replies.

About this Topic