[Resolved] Child Theme – loading style.css *after* other style sheets?

Home Forums Support Child Theme – loading style.css *after* other style sheets?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #306832
    Peter

    I am using the child theme you provide on your site and save my CSS to its style.css.

    Apparently the child theme’s style.css is loaded before the style sheets from the GP Premium add-ons, so styles with the same specifity are being overwritten.

    Is there any way to load the child theme’s CSS after the other style sheets?

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #306857
    Leo
    Staff
    Customer Support

    Hi Peter,

    Just making sure you are not enqueue the parent style sheet? The theme loads it automatically for you:
    https://docs.generatepress.com/article/child-theme-issues/

    Let me know if this helps.

    #306863
    Tom
    Lead Developer
    Lead Developer

    Some stylesheets might be added after the child stylesheet, but you can counter that by making your CSS more specific.

    For example, add body in front of your custom CSS:

    body .site-header {
        margin-top: 10px;
    }
    #306996
    Peter

    @Leo Thanx for you reply, but the functions.php of the child theme is (almost) empty. The only reference to the parent theme is in the Template-comment of the Child-Theme’s style.css.


    @Tom
    Thanx for the hint, but that’s precisely what I wanted to avoid ๐Ÿ˜‰

    #307093
    Tom
    Lead Developer
    Lead Developer

    Any reason why?

    You could try this:

    add_action( 'wp_enqueue_scripts', 'tu_child_scipts', 999 );
    function tu_child_scipts() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }
    #307434
    Peter

    Thanx a lot, the add_action did the trick. The snippet dequeues the style sheet from the child theme and then loads all GP-stylesheets in an array sorting them by time stamp?

    >> [specificity] thatโ€™s precisely what I wanted to avoid
    > Any reason why?

    Starting every selector with something like body just to increase specificity somehow feels, uhm, wronggg. Changing the load order seems cleaner.

    #307519
    Tom
    Lead Developer
    Lead Developer

    It simply removes the stylesheet and then re-adds it. The trick is the hook priority being set to 999 which is later than anything else. That loads it after all of the other hooks.

    I see your point ๐Ÿ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.