[Resolved] Customizing Image Caption Background & Text

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

[David]

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

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

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

[Leo]

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

[Jason]

I’ve unhidden it for just a bit

[Leo]

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

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

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

[Leo]

Is the Rubik font selected anywhere in the customizer?

[Jason]

Yes, for all headings. Body font is Nunito.

[Leo]

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

[Jason]

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

[Leo]

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

[Jason]

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

[Leo]

Try this CSS:

.wp-block-image figcaption {
    margin-top: -0.5em;
}

[Author]

Posts