Strange image caption and paragraph issues

  • Author
    Posts
  • #158678

    cygnusstudiosflorida
    Member
    Original poster

    Hello!

    I recently switched to Dicot and absolutely love the theme, but have noticed several problems so far:

    1) Image captions

    All are now in a much smaller font, and also seemingly random colors (some blue, some gray, haven’t checked every post).

    Audio and table blocks exhibit the same behavior.

    I’ve tried overriding this using the following “Additional CSS” for image captions. Text-align is respected, but color and font-size are ignored. Again, the same is true when I try this for audio and table blocks:

    .wp-block-image figcaption {
    text-align: center;
    color: #000000;
    font-size: 12px
    }

    Here are some example pages containing each block type I’ve mentioned:

    Two images with captions:

    https://cygnusstudios.blog/2020/09/25/new-cover-uriah-heep-the-wizard/

    Audio block with caption:

    https://cygnusstudios.blog/2020/09/11/podcast-test/

    Table block with caption:

    https://cygnusstudios.blog/2020/09/15/coming-soon-podcasts/

    ——-

    2) Random smaller text fonts

    Here’s an example of that… Scroll down to see the “Instruments” list (now displaying in a tiny font), and also strangely the first word of the lyrics at the bottom of the page is tiny and italicized:

    https://cygnusstudios.blog/2020/07/13/new-cover-bad-company-seagull/

    ——-

    Neither of these posts have been modified since switching to Dicot, and obviously I don’t want to have to go back and fix every post and page on my blog manually using the editor.

    Are these known issues, or any other suggestions for a fix? Thanks in advance for your time!

    The blog I need help with is: cygnusstudios.blog

    #158704

    designorbital
    Theme Author

    Hi,

    For some reasons, there is inline styles in the markup.
    Please try the following css snippets.

    About Captions:

    
    span.has-inline-color.has-vivid-cyan-blue-color {
        color: #1e1e1e;
        font-size: 14px;
    }
    

    About List Font Size:

    
    li em[style] {
        font-size: 14px !important;
    }
    

    Thanks

    #158707

    cygnusstudiosflorida
    Member
    Original poster

    Hi designorbital, and thanks for the reply!

    Please excuse my CSS “newbie-ness”, but might there be a detailed web page you know of which documents all acceptable WordPress CSS elements? I’m not coming up with much of anything via a Google search, but I assume some may be restricted as is the case with the “Custom HTML” widget.

    – Regarding captions, inserting that snippet did the trick. I’m a bit confused with the syntax though, since it references blue. Is that in effect “converting” the blue captions to black?

    I also tried modifying the color element to hex black, which also works:

    span.has-inline-color.has-vivid-cyan-blue-color {
    color: #000000;
    font-size: 16px;
    }

    Additionally, will this take care of all captions, regardless of the block types which accept them?

    – The “li” snippet works great, thanks for that. Weird that it was only affecting certain posts and pages though.

    – As far as the lyrics section of the following post displaying the first word in a tiny font (although it looks fine in the visual editor), still no idea what’s causing that. I’ll probably be converting older posts to blocks when I get the time anyway (in this case, a “Verse” block), so that should take care of it I would think:

    https://cygnusstudios.blog/2020/07/13/new-cover-bad-company-seagull/

    Thanks again for the absolute best Premium theme I’ve ever used, it really enhances the look of my blog in a big way!

    #158708

    designorbital
    Theme Author

    Hi,

    About Captions:

    I guess that this rule is mostly used in your blog. So i think it will work for captions. If some captions are missing and you noticed them, please ping me back so i will try to cover them as well.

    About Lyrics:

    Please try the following css snippet.

    
    p span[style] {
        font-size: inherit !important;
    }
    

    Further,

    You may be right that converting posts to blocks may be producing such inline styles. This is the reason of this irregular styles.

    Hope it will help you.
    Thanks

    #158709

    cygnusstudiosflorida
    Member
    Original poster

    Yep, that “p span” element did the trick. For now, it’s a good workaround until I can go back through all of my content and get everything converted to blocks.

    Thanks again for your time, I certainly appreciate it!

    #158730

    cygnusstudiosflorida
    Member
    Original poster

    FYI, been playing around with “Additional CSS” and found that this snippet takes care of all my captions in posts created using the “Classic” editor:

    .wp-caption .wp-caption-text {
    color: #000000;
    font-size: 14px;
    }

    Like the paragraph element you provided above, it seems to be a convenient workaround for those old posts until I can get them converted to blocks. In fact, now I actually don’t even need to do that at all.

    Which leads me to one more question, if you don’t mind: Is there an equivalent for posts with color captions created by the new block editor? Similar to the snippet above, it would be nice to take care of that globally as well without having to edit posts.

    Ultimately, I’m going to get out of the habit of applying color to captions, to ensure there’s no conflict with whatever color palette I happen to select for the blog.

    #158829

    designorbital
    Theme Author

    Hi,

    Please try the following css snippet. I hope it will work globally.

    
    span.has-inline-color {
    color: #000000;
    font-size: 16px;
    }
    

    Thanks

    #158845

    cygnusstudiosflorida
    Member
    Original poster

    Hmm… The font size override works, but the color is ignored. This is true with all captions I’m using (image, table, and audio player), globally on all pages and posts I’ve created using the block editor.

    This snippet is still very useful to enlarge caption text, if nothing else. I actually went to a lighter color palette for other reasons as well, and the blue captions are now much easier to read. Plus, you’ve already provided me with the ability to change their color using your first snippet, if I decide to do so later.

    All that said, I don’t think I need to bug you with this stuff anymore. It was definitely a CSS learning experience for me. I also discovered how to properly use “Inspect” in Chrome to pinpoint certain elements, which I’ve never done before either.

    Thanks so much again for your time and trouble… Dicot is an awesome theme, so kudos to you and keep up the GREAT work!

    #158899

    designorbital
    Theme Author

    Thanks for your valuable feedback.

The topic ‘Strange image caption and paragraph issues’ is closed to new replies.