How to style caption font?

[wjwcindy]

How could I the change the caption style for images inserted in the WP editor? I want to use a sans serif font like the headings style, and also adjust size and color. tried the following in additional css but the caption remains serif, and nothing else works. I found this from an old post on this forum. Much obliged.

.wp-caption>.wp-caption-text,
.wp-caption>.wp-caption-text:last-child,
.gallery-item>.wp-caption-text,
.gallery-item>.wp-caption-text:last-child {
text-transform: inherit;
font-size: 18px;
color: #666666
font-family: sans-serif;
}

[ruenel]

Hey Cindy,

Thanks for writing in!

You may add !important to force your custom CSS. For example:

.element-class {
     font-family: sans-serif !important;
}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[wjwcindy]

Thanks but It didn’t work. I am trying to style the WP captions?

[ruenel]

Hey Cindy,

Please provide the URL of the page where we can find this Caption so that we will investigate why your code is not working.

Thanks.

[wjwcindy]

Since I wish the change to take effect on all the captions this is not specific to any one page, in any case, I added the code above to Additional Css in Customize under Appearance:
.wp-caption>.wp-caption-text,
.wp-caption>.wp-caption-text:last-child,
.gallery-item>.wp-caption-text,
.gallery-item>.wp-caption-text:last-child {
text-transform: inherit;
font-size: 18px;
color: #666666
font-family: sans-serif !important;
}
and all the WP captions are not affected, eg. the captions on https://www.wangjingwei.org/preserve-en/

[tristup]

Hi Cindy,

I have checked your custom CCS code and found there is no semicolon for the end of the line after color: #666666. I have also found that the .wp-caption-text selector is used in other places with the !important which overrides the code.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[wjwcindy]

Thank you so much for the patience, that did the trick.

[marc_a]

Hey Cindy,

You’re most welcome!