Image Cations in Block Editor

  • Author
    Posts
  • #154872

    clarebear6t3
    Member

    Hi team,

    Thank you for making this wonderful theme – Arcane has allowed me to ‘step up’ my personal blog and I am really happy with the look and feel of it. I have used this forum to find lots of little custom CSS enhancements, so again thank you, however, I can’t find help with this problem.

    I recently I changed from the Classic Editor to the Block Editor, and notice that some of the theme details are missing or overridden, particularly the styling of images – the caption font is no longer italic (or larger as per CSS) and the images no longer have a frame around their associated caption.

    Here’s a couple of examples:

    This post was created using the Classic Editor and is how I like the images and associated captions to look.

    This post was created using the Block Editor and I think it’s not as attractive or readable.

    Would you kindly assist me with custom CSS I can apply so all images I insert into either posts or pages retain the look and feel of your theme?

    Thank you, your assistance is greatly appreciated.

    The blog I need help with is clarehoran.com.

    #154905

    designorbital
    Theme Author

    Hi,

    Thanks for the appreciation of Arcane theme.
    Yes, new blocks has some new changes.

    Please try the following css snippet.

    
    .wp-block-image figcaption {
        border: 1px solid #eeeeee;
        font-style: italic;
    }
    

    Hope it will help you.
    Thanks

    #154938

    clarebear6t3
    Member

    Thank you so much.

    I added the following:
    font-size: 12px;
    font-size: 1rem;

    and my captions once again looking as I prefer them too.

    Thank you and enjoy the rest of your day.

    #154999

    designorbital
    Theme Author

    Thanks for your feedback.

    #155308

    clarebear6t3
    Member

    Hi team,

    I have now discovered a similar issue with the block editor and blockquotes where the coloured bar to the left of the quote is displaying the default theme colour and not the selected custom colour. My custom colour is set to #8959a3.

    Once again, thank you for your assistance.

    #155318

    designorbital
    Theme Author

    Hi,

    Please share a page having Quote block, so i will be able to share a css snippet with you.

    Thanks

    #155320

    clarebear6t3
    Member

    Hi, this page has the blockquote looking as it should: Blockquote Correct

    I’ve just edited my post from yesterday to demonstrate how it looks using the block editor: Using Block Editor

    Thank you

    #155324

    designorbital
    Theme Author

    Hi,
    Please try the following css snippet.

    
    .wp-block-quote,
    .wp-block-quote.is-style-large,
    .wp-block-quote.is-large {
        border-left: 6px solid #8959a3;
    }
    

    Thanks

    #155331

    clarebear6t3
    Member

    Thank you, this worked a charm :)

    #155336

    designorbital
    Theme Author

    Thanks for your feedback.

The topic ‘Image Cations in Block Editor’ is closed to new replies.