Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #161966
    Naoko
    Participant

    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/

    #161990
    sapana
    Participant

    @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,
    Sapana

    #162038
    Naoko
    Participant

    Hi, 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?

    #162129
    sapana
    Participant

    @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,
    Sapana

    #162142
    Naoko
    Participant

    Hi, 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!

    #162153
    sapana
    Participant

    @naoko-kaku: Glad to know that we figure it out. Merry Christmas!!

    Kind Regards,
    Sapana

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Customization image's caption in Catch Box 4.8.1 works only classic box’ is closed to new replies.