[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;
}

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

[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.

A wise man once said:
"Have you cleared your cache?"

[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!

[Author]

Posts