[Resolved] Caption below image

Home Forums Support [Resolved] Caption below image

Home Forums Support Caption below image

Viewing 15 posts - 31 through 45 (of 61 total)
  • Author
    Posts
  • #173988
    Tony

    Hi Tom
    I used this code and the caption is under the image and looks fine.
    .wp-caption .wp-caption-text {
    background: transparent;
    padding: 2px 0;
    color: #616149;
    text-align: center;
    position: relative;
    }

    I’m not sure what this post above is about though:
    “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:”

    There is then a chunk of different code after this but I’m not sure what it’s trying to achieve or if a conclusion was reached.

    QUESTIONS:
    1 – how would i put the caption in the image on a post i.e. over-ride the css?
    2 – is there a way to have the caption show up only on hover (under the image or over the image)?

    #174063
    Tom
    Lead Developer
    Lead Developer

    If you have links in your captions then that extra CSS will be necessary.

    1. I’m not sure what you mean by this?
    2. This should do it:

    .wp-caption-text {
        display: none;
    }
    
    .wp-caption:hover .wp-caption-text {
        display: block;
    }
    #174082
    Tony

    OK I understand and will try the code out tomorrow.
    In Q2 I mean how do I over ride the css that puts the caption under the image if, on some post(s), I want the caption inside the image.

    #174103
    Tom
    Lead Developer
    Lead Developer

    Will there be more posts with it below or on top of the images?

    #174117
    Tony

    I have no idea to be honest.
    If the hover works ok then probably on top inside the image would be the standard.
    Up to now I haven’t used captions on emeddled images. In my gallery and light box it’s automatic and uses hover.
    Hold fire and let me have a play today.

    #174133
    Tony

    Having experimented I believe that if I use a caption it will mostly be in/on the image and only shown on hover.

    If I want to override this (position and/or hover) on a post how would I do it?

    #174198
    Tom
    Lead Developer
    Lead Developer

    You would have to use the page ID and give the caption different styling for those specific pages.

    So if you want the caption below only on a specific page, you would do something like:

    .page-id-xx .wp-caption .wp-caption-text {
        background: transparent;
        padding: 10px 0;
        position: relative;
        color: #000;
    }

    xx being the page ID.

    #174391
    Tony

    That works thank you.
    I guess that you need a copy of this code for each individual page or can multiple post id’s be used in the same piece of code?

    #174447
    Tom
    Lead Developer
    Lead Developer

    Multiple page IDs can be used, just separate them with commas:

    .selector-1,
    .selector-2,
    .selector-3 {
        color: white;
    }
    #174458
    Tony

    Thank you

    #180884
    Lisa

    Hi Tom,

    Love your theme. Do you have the time to help? I’ve added

    .wp-caption .wp-caption-text {
    background: transparent;
    padding: 10px 0;
    position: relative;
    color: #000;
    }

    to the child theme editor but I’m still getting the text with overlay instead of moving the caption text below the image. I’ve also tried

    #attachment_398 > figcaption {
    background: transparent;
    padding: 10px 0;
    position: relative;
    color: #000;
    }
    w/o success.

    Can you help with this?

    Thank you,

    Lisa

    #180890
    Lisa

    Update:

    There was an error in the style sheet which was invalidating this code. Error removed and all is working. Thank you so much for posting these responses. The threads are very helpful.

    Best,
    Lisa

    #180891
    Tom
    Lead Developer
    Lead Developer

    Glad you fixed it 🙂

    • This reply was modified 8 years ago by Tom.
    #212175
    Anand

    I used the text provided by Aaron Redmon on Page 1 of this thread. In Firefox, the caption immediately moved below the image. However, in Chrome and Edge it just stays above the image.

    What to do?

    Anand

    #212257
    Tom
    Lead Developer
    Lead Developer

    Can you post the link to your site?

Viewing 15 posts - 31 through 45 (of 61 total)
  • You must be logged in to reply to this topic.