- This topic has 5 replies, 2 voices, and was last updated 5 years, 3 months ago by sapana.
-
AuthorPosts
-
December 20, 2018 at 10:13 am #161966NaokoParticipant
Hi,
I customized image caption by additional CSS before Gutenberg, as below;
/* Caption */ .wp-caption .wp-caption-text { color: black; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; padding-left: 0; } /* Caption remove dash */ .wp-caption .wp-caption-text::before { content: ""; }
It worked very well before Gutenberg, however, it doesn’t work in Gutenberg block.
After upgrade to Catch Box 4.8.1, my blog’s captions of images in Gutenberg blocks changed to Catch Box’s default.
I expect that my customization works in Gutenberg, but it still doesn’t work.
On the other hand, classic box is OK.
Can I customize caption in Gutenberg block with Catch Box 4.8.1?Sample of Gutenberg block…not change.
https://chokowalk.sakura.ne.jp/n02/ginkgo-biloba-of-tama-center/Sample of Classic block…it is OK.
https://chokowalk.sakura.ne.jp/n02/enkakuji-ume/December 20, 2018 at 11:26 pm #161990sapanaParticipant@naoko-kaku: Go to=>Appearance=> Customize=> Additional CSS and add the following CSS code
.wp-block-image figcaption { color: black; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px !important; padding: 0 !important; margin-bottom: 0 !important; } /* Caption remove dash */ .wp-block-image figcaption:before { content: "" !important; } .wp-block-image { background-color: #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 0.4em; margin-bottom: 2em; max-width: 100%; padding: 9px; } .wp-block-image img{ border: 0; padding: 0; }
Let me know if this helps you out!
Kind Regards,
SapanaDecember 21, 2018 at 11:30 am #162038NaokoParticipantHi, Sapana,
Thank you for your reply.
I added your CSS. It works partially.
Dash before caption is removed. Caption’s size becomes bigger.
But font are not changed to my favorite font.
I’d like to change font of caption to the same font of body.I’ve just added one post to compare captions.
https://chokowalk.sakura.ne.jp/n02/caption-test/Upper block is Gutenberg. I think that its caption’s font is not “Helvetica Neue.”
Lower block is classic. Classic block’s font are OK for me.Can I change font of caption in Gutenberg as well?
December 24, 2018 at 12:39 am #162129sapanaParticipant@naoko-kaku: Go to=> Appearance=> Customize=> Additional CSS and add the following CSS code.
[class^="wp-block-"]:not(.wp-block-gallery) figcaption{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important; color: black; }
Let me know if this what you are looking for!
Kind Regards,
SapanaDecember 24, 2018 at 9:12 am #162142NaokoParticipantHi, Sapana,
Perfect!
I’ve merged your suggestion with the previous one, such as;[class^="wp-block-"]:not(.wp-block-gallery) figcaption{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important; color: black; font-size: 16px !important; padding: 0 !important; margin-bottom: 0 !important; }
It works very well. Gutenberg’s image caption’s font turns to “Helvetica Neue”.
https://chokowalk.sakura.ne.jp/n02/caption-test/Thank you for your support!
December 24, 2018 at 10:22 pm #162153sapanaParticipant@naoko-kaku: Glad to know that we figure it out. Merry Christmas!!
Kind Regards,
Sapana -
AuthorPosts
- The topic ‘Customization image's caption in Catch Box 4.8.1 works only classic box’ is closed to new replies.