Styling Image Captions Distinctively

  • Resolved rodario

    (@rodario)


    2 years, 9 months ago

    Preface: The linked page is just an example. This applies generally.

    Hi,

    I’ve been relatively happy with Neve so far, but I have an issue I can’t find documentation for:

    I’d like image captions to have a distinctive style, distinguishing them as captions rather than just another paragraph (because the latter is what they look like as standard.)

    I think especially on phones it can be hard to tell that a caption is a caption and not a short paragraph, making for a weird reading experience with lots of sentences seeming out of place.

    Usually Image captions are part of a frame of sorts around the image, and of a smaller font size.

    At the moment, I’ve put them in italics, but that is still suboptimal.

    Are there any settings for this I’ve missed? Or is there something I can do?

    Thanks and have a great day

    The page I need help with: [log in to see the link]

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

  • Hello @rodario!

    It’s possible to place the images and captions inside a frame and to decrease the caption font size, so they can be distinguished more easily, by inserting the code below in the Additional CSS section within the Customizer.

    .single-post .wp-block-image {
    padding:18px 18px 2px 18px !important;
    border:1px solid #999 !important;
}
.single-post .wp-block-image figcaption{
    font-size: 12px !important;
    text-align: center !important;
}

    Have a nice day!

    Thread Starter rodario

    (@rodario)

    Hi @luciamarinescu, thank you for your reply.

    Would it also be possible to have the padding be a different color (I’m thinking a slight beige but if there’s a hex code in the code, I can substitute that myself of course) instead of having a border?

    Thanks and the same to you ??

    Hello @rodario!

    It’s possible to add a background color to that frame by adding the background-color property in the first part of the code, so the code will look like below.

    .single-post .wp-block-image {
    padding:18px 18px 2px 18px !important;
    border:1px solid #999 !important;
    background-color: #fffaf2 !important;
}
.single-post .wp-block-image figcaption{
    font-size: 12px !important;
    text-align: center !important;
}

    If you’d like to remove the border completely, you should delete this row -> “border:1px solid #999 !important;” from the first part of the code, so just the color of the frame will remain.

    You can browse and choose a multitude of colors here, copy their hex code and paste it after the “background-color” property.

    Best regards,
    Lucia

    Thread Starter rodario

    (@rodario)

    Hi @luciamarinescu, thank you again.

    I tried implementing the code, but unfortunately it seems like only the bottom half stuck. I don’t see any borders or colored background.

    Best Regards

    AC

    (@purplecodes)

    Themeisle Support

    Hi @rodario,

    Kindly try the snippet below:

    figcaption {
    background-color: tan !important;
}

    This will apply to all captions on your site.
    Just change the color to your preferred one.

    Let us know if this works for you.

    Thread Starter rodario

    (@rodario)

    Hi @purplecodes, thanks for your reply

    I was imagining it like this:

    View post on imgur.com

    So theoretically that would work if it’s possible to modify it so there’s no gap between caption and image, and some padding around the text. Without that, it just looks weird (or… bad).

    Hi @rodario!

    Please try the code below, I think it should provide the style you are looking for.

    figcaption {
    background-color: tan !important;
    margin-top: 0px !important;
    padding: 10px !important;
}

    Have a nice day!

    Thread Starter rodario

    (@rodario)

    Hi @luciamarinescu

    Perfect, thank you ??

    Have a great day too.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling Image Captions Distinctively’ is closed to new replies.