Respect child theme CSS

  • elarson

    #4389

    Hello,

    I have tried many ways of working with WordPress themes. In general, for people who develop for many different types of websites, I think Graphene is great. I’ve also worked with others that are similar like Weaver (also good) and frameworks like Hypbrid (also good).

    Although I think it is really good to have options for non-CSS people, I do think it would be good to have an override when one want’s a child theme respected.

    I think it would be very helpful to know that the child theme will override graphene theme options, without having to set everything as “!important”.

    For an example of what I am talking about, please see https://forum.graphene-theme.com/graphene-support/background-gradient-in-child-css.

    As an idea, what about having an option under Graphene Options > Display that says “Respect child theme CSS” or something similar.

    Just an idea to consider…

    — Ellyn

    Mod

    Kenneth John Odle

    #28105

    Graphene does respect child theme css, but you have to understand how WordPress and Graphene put a page together.

    If you look at the source code for any blog page (using your brower’s “View Source” function), you will see near the beginning links to style sheets. Generally, the first one is a link to Graphene’s style sheet, or a child theme’s stylesheet, and then links to stylesheets from individual plugins, and finally, if you have used Graphene’s options for color and text display, an internal style sheet codes for those options. If you haven’t made any selections under Graphene’s colors or text style options, you shouldn’t see an internal style sheet (at least one from Graphene).

    Here’s the deal with CSS: you can define something as many times as you want, but it’s the last definition that you will actually see. So if you have this in your CSS:

    p {color:red;}

    p {color:blue;}

    then all of your paragraphs will be blue, rather than red, because blue was the last color defined for your paragraphs.

    So, putting it all together….

    The Graphene style sheet loads first, providing a “background” style for all your elements. If you are using a child theme, then the child theme style sheet loads first.

    The stylesheets for plugins then load. If any elements that are defined here match those in the theme style sheet, then these plugin styles will override the theme styles, presumably because you are using plugins to further style or add additional functions to your blog.

    The internal stylesheet for Graphene options then loads. Note that this also includes any css you enter in Graphene’s “Custom CSS” feature, allowing you to override any theme or plugin styles that you need or want to change.

    The issue for you is how to eliminate that internal stylesheet. There are three things to consider:

    1) If you have entered any css in the “Custom CSS” feature, take it out.

    2) If you have entered any info in the “Text Style Options” feature, take it out.

    3) If you have entered any info in the “Colours Options” feature, click on “Clear” next to each one to eliminate that code.

    Be sure to click on the “Save Options” button on the bottom, and then to empty your browser and server caches before reloading your page. This should obviate any need to enter a lot of !important tags.

    Let me know if this works for you,

    Ken

    elarson

    #28106

    Hi Ken,

    I really appreciate your information. I need to get my head around it (it’s late here in Holland), but I think what you write makes sense.

    Regards,

    Ellyn

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.