Support » Theme: Dara » How to Override Editor Formatting of Color

  • gregcrowe

    (@gregcrowe)


    Sorry if this has been asked before, but I couldn’t find anything with a search.

    Anyway, I know that if someone changes the text color of a block in the editor it will have priority and everything inside will inherit. However, I would like a-links to always take their formatting from my child theme’s stylesheet, but can’t seem to make that happen. I even tried putting “!important” in the stylesheet on the link color styles, but even that didn’t work.

    So, is there any way to override the .has-text-color style?

Viewing 9 replies - 1 through 9 (of 9 total)
  • fresatomica

    (@fresatomica)

    Hi there!

    Can you share the URL of your site so we can have a look?

    gregcrowe

    (@gregcrowe)

    Oh, sorry about that sure:

    http://www.thefinalquestchs.com

    I have changed the text in the last paragraph on the home page to light gray in the editor for illustration purposes. You can see in the other paragraphs that links are bold black and turn purple on mouseover/click (client preference – don’t get me started). However, when the paragraph’s color is set in the editor, all text including links are forced to inherit.

    fresatomica

    (@fresatomica)

    Hmm, what about the value “initial”?

    
    p.has-text-color a {
        color: initial;
    }
    gregcrowe

    (@gregcrowe)

    Where would I put that, in the child theme styles.css?

    fresatomica

    (@fresatomica)

    Yes, look for this piece of code

    p.has-text-color a {
        color: inherit;
    }

    and replace inherit with initial.

    gregcrowe

    (@gregcrowe)

    But that code isn’t in the theme stylesheet. It’s in one of the WP libraries. I will look again though 2hem I’m at my computer

    gregcrowe

    (@gregcrowe)

    I double-checked, and that tag is nowhere in the Dara stulesheet. Inspecting the webpage revealed that it resided in:

    https://c0.wp.com/c/5.3.2/wp-includes/css/dist/block-library/style.min.css

    gregcrowe

    (@gregcrowe)

    However, putting:

    p.has-text-color a {
        (actual color formatting I want)
    }
    
    p.has-text-color a:hover,
    p.has-text-color a:focus,
    p.has-text-color a:active {
        (actual color formatting I want)
    }

    in the child theme’s styles.css seems to have done the trick! Thank you for your help.

    • This reply was modified 7 months ago by gregcrowe.
    fresatomica

    (@fresatomica)

    Oh, that’s awesome! Thanks for letting me know 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to Override Editor Formatting of Color’ is closed to new replies.