[Resolved] Customizing CSS of captions for embedded Youtube videos

[Joey]

I had earlier used this code to customize captions on images and galleries:

.wp-block-image figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

figcaption.blocks-gallery-caption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

However, on the captions of embeded youtube videos, I don’t have this style. See the video at the bottom of the page. I’m trying to unify the style for all captions, whether embeds, images, or galleries. I tried figcaption.youtube-embed but no luck. Thank you.

[Ying]

Hi Joey,

Try to replace your css:

.wp-block-image figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

figcaption.blocks-gallery-caption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

with this css:

figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

Let me know if it works!

[Joey]

Thanks for the quick reply. figcaption (your code) works for font style, padding, etc. But it doesn’t work for margin-left: auto; On the youtube caption, it aligns to the left. On regular images, it aligns them center. Gallery image captions is the only place it aligns correctly (to the right). Do you know why it is doing this? I tried moving the code to the top of my style.css file, but still the same issue.

Please see this link for examples of captions on Gallery images and regular images on my website.

[David]

Hi there,

try this CSS:

figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    text-align: center;
}

[Joey]

Dave, I’m trying to align the captions to the right. But I modified your code and with the other two and this is working for youtube captions, regular images, and gallery captions across my site:

figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    text-align: right;
}

.wp-block-image figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    text-align: right;
}

figcaption.blocks-gallery-caption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    margin-left: auto;
}

Is there a way to condense these three elements into one, or should I just leave it as is? Thank you to both of you.

[Elvin]

Hi,

You can remove .wp-block-image figcaption as it does the exact same thing as figcaption.

Is there a way to condense these three elements into one, or should I just leave it as is? Thank you to both of you.

You can write it this way.

figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
}
.wp-block-embed figcaption, .wp-block-image figcaption {
    text-align: right;
}
figcaption.blocks-gallery-caption{ 
    margin-left: auto; 
    text-align: center;
}

We can group what they have in common and use more specified CSS selectors for the unique properties they differ in.

But if you want the same text-align for all then you can just add it in figcaption{} and delete the other selectors.

[Joey]

Thank you, that works much better. I noticed one small issue: it isn’t aligning to the right on side-by-side images (two columns). See this link. If you scroll down to where it says “A marcher in Minneapolis by Fibonacci Blue and a protester in DC by Alex Brandon” it is still aligned in the center. What am I missing?

[Ying]

Hi Joey,

Try to replace this css:

figcaption.blocks-gallery-caption{
    margin-left: auto;
    text-align: center;
}

with this css:

figcaption.blocks-gallery-caption{
    text-align: right;
}

Let me know 🙂

[Joey]

Ying, while removing margin-left: auto; fixes the side-by-side caption, it screws up the Gallery images caption. But I figured out a workaround. Instead of using the “columns” feature on WordPress to make two pictures side-by-side, I can just do a gallery with two images and it has the same effect, but with the correct caption alignment. If I try a two-image gallery full-page width, it gets weird, but maybe that is a different topic anyway.

Thank you to everyone for all your help, it looks much better.

[Ying]

Hi Joey,

Glad you figured it out 🙂
Always here to help!

[Joey]

I have a question, as I’m starting to have issues again with the formatting of the captions again. Why does figcaption{} not work across the entire site when I use this code?

figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    text-align: right;
}

It mostly works, but it doesn’t align right the regular image captions. I tried deleting all other CSS on the site, and it still has issues. I’ll post a couple pages below that use different formats of captions.

[David]

Theres been a domino affect.
When block editor was introduced, core added class specific CSS to the image blocks and the the figure and figcaption elements. Those historically were left to the theme and a single element selector like figcaption would have sufficed.

Subsequently core added various other classes to images, galleries and embeds. And in addition to that made changes to block HTML specifically the Gallery Block.

So if my memory servers me:

figcaption should work for Old Gallery Block HTML, and Embeds
.wp-block-image figcaption should work for Image Block and New Gallery HTML.

To cover those bases, this CSS should suffice:

figcaption,
.wp-block-image figcaption {
    padding-right: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-style: italic;
    color: grey;
    text-align: right;
}

[Joey]

Okay, I understand now. So they just changed the block gallery. Well, at least it’s a simple solution and it’s working across the site now. Thanks a lot for your help.

[David]

Yeah, Gallery blocks, the HTML changed quite a lot. They are now a grid of effectively image blocks, as opposed to a dedicated gallery item.
Your existing galleries will have the old HTML, and any new ones you add or update will use the new. But the CSS above works for both.

Glad to be of help

[Author]

Posts