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

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

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

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

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

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

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

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

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

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

[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

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

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

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

[Author]

Posts