Archived topic

How to Change Font Size and Color of Image Captions

3 replies · Started by Data on June 9, 2020

Viewing posts 1–4 of 4

June 9, 2020 at 3:53 pm #1321337

I am using WordSmith, the image captions are same-sized like regular page content. I want to depreciate the captions form the normal content. Kindly do let me know how to change its color and font size. I read previous form threads, but none of them work on my site.

June 9, 2020 at 5:06 pm #1321405

Hi there,

Try this CSS:

.wp-block-image figcaption {
    font-size: 10px;
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

June 9, 2020 at 5:53 pm #1321417

Thank you. Just one more thing, can we place an in-line small icon alongside the image caption?

June 10, 2020 at 1:19 am #1321666

Hi there,

you can use a :before pseudo element to add an image:

.wp-block-image figcaption:before {
    content: url(your_image_url_here);
    margin-right: 1em;
}

You will want the image to be the exact dimensions as it cannot be resized with CSS.
The content property accepts unicodes for font icons as well.

This archived topic is closed to new replies.

Start building better websites today.