[Resolved] Customizing CSS of captions for embedded Youtube videos

Home Forums Support [Resolved] Customizing CSS of captions for embedded Youtube videos

Home Forums Support Customizing CSS of captions for embedded Youtube videos

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1568825
    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.

    #1568868
    Ying
    Staff
    Customer Support

    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!

    #1571083
    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.

    #1571735
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    figcaption {
        padding-right: 10px;
        padding-left: 5px;
        font-size: 15px;
        font-style: italic;
        color: grey;
        text-align: center;
    }
    #1572267
    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.

    #1572277
    Elvin
    Staff
    Customer Support

    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?"

    #1573613
    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?

    #1573682
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1573778
    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.

    #1573783
    Ying
    Staff
    Customer Support

    Hi Joey,

    Glad you figured it out ๐Ÿ™‚
    Always here to help!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.