SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WordPress captions behaving differently

    I'm having a bit of trouble customizing my captions. They used to look like this automatically - see screenshot here: http://skipthescams.com/2012/08/how-...-pages-widget/

    Now after upgrading WordPress, they look just the same as the paragraph text. I've tried using this in my custom CSS file in Thesis:

    Code:
    /* 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 */
    which I found in a Google search, but it doesn't change them at all. I know I'm probably missing something obvious - can anyone help, please?

    P.S. I can't show you my page because I'm building it on my local machine, sorry.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I don't know what you mean by "captions". could you explain. Which image are you referring to on that page?

  3. #3
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your response. I mean the first graphic in the article on that page (the caption is "The Pages widget is under Appearance > Widgets"). That's how the WP captions used to be styled without me doing anything to them, and now they are not the same, don't even have a gray box surrounding them as shown underneath that graphic. I'm using the same theme and same process, but a newer version of WP. When I insert the photo, I put my caption text in the area designated for it in the WP dialog box that appears. I need to figure out how to make them look like that again. Does that make more sense?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I think I'm getting confused over what's on the WP backend and what's appearing on the front end. (Each time I read your post I keep getting confused which is which.)

    If you are getting an image on the front end with a caption and these are not styled as you wish, it should be easy enough to help you style it, but we need to see an example of it. If this is really a question about the WP backend, we should probably move this to the CMS forum.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,147
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    My first guess would be that one or more of the selectors you use are changed or missing.
    .aligncenter, div.aligncenter
    .wp-caption
    .wp-caption img
    .wp-caption p.wp-caption-text
    eg. from viewsource
    HTML Code:
    <div id="attachment_1656" class="wp-caption alignleft" style="width: 277px">
    	<a href="http://skipthescams.com/wp-content/uploads/2012/08/page-widget.jpg?9d7bd4"><img class="size-full wp-image-1656" style="margin-right: 10px;" title="page-widget" src="http://skipthescams.com/wp-content/uploads/2012/08/page-widget.jpg?9d7bd4" alt="WordPress Page widget" width="277" height="266" /></a>
    	<p class="wp-caption-text">The Pages widget is under Appearance &gt; Widgets</p>
    </div>
    yiu can see the class "wp-caption"

    If you look at the troublesome page's viewsource, are all the selectors there?

  6. #6
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that - it eventually led me to the answer! I realized I should compare the code WP was giving me for the working caption as opposed to the nonworking one.

    The nonworking version (from WP 3.5.1) puts the caption (i.e., THIS IS MY CAPTION TEXT) outside of the caption brackets [ ] and at the end of the code, like this:

    Code:
    <p>[caption id="attachment_716"]<a href="my-link"><img class="blah-blah" src="my-image" /></a>THIS IS MY CAPTION TEXT[/caption]</p>
    The working version (from WP 3.4.2) puts it in the brackets:

    Code:
    <p>[caption id="attachment_716" caption="THIS IS MY CAPTION TEXT"]<a href="my-link"><img class="blah blah" src="my-image" /></a>[/caption]
    So to work around this for now, I will just manually move the caption text into the brackets. What I don't understand is why I should have to do this. Is this a WordPress bug or is it just me? I'm inserting a photo and creating a caption the same as always, but the resulting code is different now and doesn't work.

    Edit: Plus now when I go in to make other changes to the page, it doesn't save my changes to the caption. Argh.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,147
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    A caption tag is meant for tables, but my guess is it's an HTML5 thing.

    Figures WordPress would keep adding new "features" when it still hasn't fixed long-standing errors in it's core code yet. Gotta be "progressive" I guess.

    Maybe @ralph.m ; knows how to fix things with a change to the CSS file?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by laburke View Post
    I'm inserting a photo and creating a caption the same as always, but the resulting code is different now and doesn't work.
    Quote Originally Posted by Mittineague View Post
    Maybe @ralph.m ; knows how to fix things with a change to the CSS file?
    Possibly, yes. But at this point I don't know what the HTML looks like (the code posted above is not HTML, but some kind of code that presumably is process through WP and turned into real HTML). HTML5 does have a new <figure> <caption> pair of tags, but it's not clear that this is what's happening here. A link to the page in question would be the ideal thing. I can't comment on the WP backend, because I've long since abandoned WP.

  9. #9
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Mitteneague. Just curious, though: I've always associated captions with photos - why would they be meant for tables? Just wondering.

  10. #10
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, ralph.m, for all your help. Once the site is live, I'll post a link here.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by laburke View Post
    I've always associated captions with photos - why would they be meant for tables? Just wondering.
    In CSS, the <caption> tag is associated with tables.

    In your first message, WordPress is using the word caption as part of a hyphenated class name (which could be associated with an image or almost anything), which is fine.

    Then in message #6, WordPress is using caption as a keyword inside a proprietary bracketed expression of some kind. We (I) don't know what that means. It's not standard CSS.

    In everyday language, I think of captions as text beneath images.

    Terminology/word usage can become confusing sometimes.

  12. #12
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, okay, I see. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •