[Resolved] Customizing Image Caption Background & Text

Home Forums Support Customizing Image Caption Background & Text

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1396475
    Jason

    Hey Folks – I’m trying to customize the image caption on my site. Both the Background Color, font, etc.

    I’m using the following CSS, but it’s not working. Any help is appreciated!

    .entry-content .wp-caption .wp-caption-text {
    text-align: center;
    background-color: #eaeae8;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: “Oswald”;
    }

    #1396839
    David
    Staff
    Customer Support

    Hi there,

    try:

    .entry-content .wp-block-image figcaption {
        text-align: center;
        background-color: #eaeae8;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 18px;
        text-transform: uppercase;
        font-family: “Oswald”;
    }
    #1397546
    Jason

    Hello, this worked to an extent.

    The font family is not changing. Neither is the font weight when I attempt to customize it. There is also a gap under the picture and the background color change, and I would like to to be up against the picture.

    #1397553
    Jason

    Here is the code I used:

    .entry-content .wp-block-image figcaption {
    text-align: center;
    background-color: #F3F7F7;
    border-width: 10px;
    border-color: #1C1F33;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 700px;
    font-color: #1C1F33;
    font-family: “Rubik”;
    }

    #1397641
    Leo
    Staff
    Customer Support

    Any chance you can provide the password so we can view your site?

    #1397657
    Jason

    I’ve unhidden it for just a bit

    #1397661
    Leo
    Staff
    Customer Support

    Try
    font-weight: 700; instead of font-weight: 700px;

    and
    color: #1C1F33; instead of font-color: #1C1F33;

    #1397689
    Jason

    Thanks. These worked. However, It’s still not transforming to Rubik, and there’s still the space in between the top of the background color and the image. I’d like them to connect so there’s no gap.

    #1397818
    Leo
    Staff
    Customer Support

    Is the Rubik font selected anywhere in the customizer?

    #1397840
    Jason

    Yes, for all headings. Body font is Nunito.

    #1397842
    Leo
    Staff
    Customer Support

    Can you unlock the site again? Or provide the password so we can always access it?

    #1397857
    Jason

    Unlocked – is there a way to provide the password securely?

    #1397865
    Leo
    Staff
    Customer Support

    Replace:
    font: “Rubik”;

    with
    font-family: "Rubik", sans-serif;

    Make sure you are using the right quotation marks.

    Also if you right click on the element and use browser inspect tool, then you can see all the invalid command/CSS:
    https://www.screencast.com/t/zWl5eh6mPtz

    #1397877
    Jason

    Thanks, how can I remove the white space in between the caption and image?

    #1397903
    Leo
    Staff
    Customer Support

    Try this CSS:

    .wp-block-image figcaption {
        margin-top: -0.5em;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.