• I want to add an image to the right hand side of the text on a page.

    When I look at it in the edit screen it appears to have a greyish background and border and the text is smaller than the page text. That’s great!
    However, when I update the page the background and border have gone and the caption is the same size as the text page. I have an image widget which may give something like I want but not sure how to add a widget in the middle of a page.
    Can anyone help?
    Thanks
    Tony

Viewing 9 replies - 1 through 9 (of 9 total)
  • Brian

    (@briansteeleca)

    The amr shortcode any widget allows you to add a widget to a page or post.

    You may be able to accomplish what you want with custom CSS though. If you send me a link to a page with an image that’s not displaying how you want, I may be able to help.

    Thread Starter TonyWilliams

    (@tonywilliams)

    Thanks Brian. here’s the link
    http://www.s506439810.websitehome.co.uk/warriorswordpress/
    You will see I’ve managed to find a plugin that’s put a border around the image but not the caption.
    Cheers
    Tony

    Brian

    (@briansteeleca)

    Hi Tony, I’m not sure what image and caption you’re referring to – can you be more specific?

    Thread Starter TonyWilliams

    (@tonywilliams)

    Hi Brian sorry, it,s the image of the two girls on the page “Disabilty” here
    http://www.s506439810.websitehome.co.uk/warriorswordpress/?page_id=879
    Thanks
    Tony

    Brian

    (@briansteeleca)

    If you want to put the same yellow border around your captions, you can try adding this custom CSS.

    .wp-caption-text {
        border: 1px solid #f9c804;
        padding: 15px;
    }

    This will add a yellow border to all of your text captions. If you only want to add it to this post, you’ll have to be more specific with your CSS.

    One option for adding custom CSS is Jetpack, or you can try the Simple Custom CSS plugin.

    Thread Starter TonyWilliams

    (@tonywilliams)

    Hi Brian I’m afraid that didn’t work 🙁

    I am using a child of the Childishly Simple theme and most of the other edits I have done to the custom css screen have started with “div.” (without the apostrophes) so I tried amending your suggested css change to:
    }
    div.caption-text {
    border: 1px solid #f9c804;
    padding: 15px;
    }
    Unfortunately that didn’t work either.
    So I’m snookered at the moment!

    I’ve added the border around the image with an advanced image editor widget but it doesn’t include the caption.

    Thanks
    Tony

    Brian

    (@briansteeleca)

    Hi Tony, thanks for mentioning the theme you’re using.

    Are you already using the theme’s CSS option mentioned in this article: Internal stylesheets and the ‘Childishly Simple’ theme?

    If not, then follow the instructions to add this CSS:

    <style type="text/css">
    p.wp-caption-text {
        border: 1px solid #f9c804;
        padding: 15px;
    }
    </style>

    If you already have CSS in that section, then you won’t need to add the <style> tags again, instead just your style:

    p.wp-caption-text {
        border: 1px solid #f9c804;
        padding: 15px;
    }

    An aside: I’m using p.wp-caption-text because the caption uses a <p> tag (paragraph). This makes your rule more specific than .wp-caption-text without the p, and I see that’s how it’s been done in your theme.

    Please give that a try – it worked for me.

    Thread Starter TonyWilliams

    (@tonywilliams)

    Thanks Brian that worked like a dream!
    Really appreciate your help.
    Best wishes
    Tony

    Brian

    (@briansteeleca)

    You’re welcome Tony, glad I could help.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding an image and caption’ is closed to new replies.