style.css in Child Theme – No effect

  • Resolved g2lyon

    (@g2lyon)


    5 years ago

    I am using 2020 as a parent theme. It works!
    I enqueued style.css from child theme, after the 2020 style sheet. It works!
    I add a background image in the header. It works!

    Now I would like to change the text color in primary menu (only primary menu). It doesn’t work!
    The reason is that 2020 is adding some in-line style after the style.css. Style.css arrives too late. No success, even with high priority index.
    Finally I succeded with javascript.
    Would you know a simpler way??

    I also noticed that Jquery was not loaded. I had to enqueue it in my child theme.

    • This topic was modified 5 years ago by g2lyon.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Jarret

    (@jarretc)

    Hi, what CSS were you using in the child theme’s style.css to change the text color in the primary menu?

    Thread Starter g2lyon

    (@g2lyon)

    First I grab some selectors from the elements attributes in html page. No one worked.

    Then I took the top one from google Chrome developpement tool window:
    body:not(.overlay-header) .primary-menu > li > a

    Didn’t work in style.css but it works like a charm in jquery.

    $('body:not(.overlay-header) .primary-menu > li > a').css('color','#FFFFFF');
    It only affects the primary menu.

    • This reply was modified 5 years ago by g2lyon.
    Jarret

    (@jarretc)

    Try removing the > from your code so it looks like this

    body:not(.overlay-header) .primary-menu li a {
	color: #FFFFFF;
}
    Thread Starter g2lyon

    (@g2lyon)

    @jarret,
    Thanks for help
    I tested selector as suggested, but it doesn’t work.

    To make it more clear, find below a copy of what I get from Google Chrome developpement tool:

     element.style?{
     color: rgb(255, 255, 255);
}
(index):41
body:not(.overlay-header) .primary-menu > li > a,?body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover?{
     color: #188513;
}
style.css?ver=0.1.0:10
body:not(.overlay-header) .primary-menu li a?{
    color: red;
}

    1/ element.style? (highest priority) is from child-theme.js
    2/ (index):41 (lower pririty) is from inline <style> tag, probably added by some js script in 2020 as parent theme.
    3/ style.css (lowest priority) is queued from child-theme.css

    In 2020 there is a text color selector. Then color is probably embedded in the <style> tag by some js.
    As the inline <style> tag is located after the style sheets its too late to modify the color in child-theme.css. Fortunately it works with child-theme.js

    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    • This reply was modified 5 years ago by g2lyon.
    Jarret

    (@jarretc)

    Interesting, it worked on my local install of Twenty Twenty. Do you have the site live on a URL that I could check?

    If not, try adding !important onto the end of the hex color code

    body:not(.overlay-header) .primary-menu li a {
	color: #FFFFFF !important;
}
    Thread Starter g2lyon

    (@g2lyon)

    @jarret,
    Sorry, the site is on localhost,
    !important
    Sorry I am not a big fan of this instruction and I didnt think about using it but…
    IT WORKS!
    Thanks for your precious help.

    • This reply was modified 5 years ago by g2lyon.
    Jarret

    (@jarretc)

    You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘style.css in Child Theme – No effect’ is closed to new replies.