Support » Theme: Storefront » Storefront Child Theme CSS Problem

  • Resolved futurepacer

    (@futurepacer)


    Hi – Loving Storefront πŸ™‚

    Am using a child theme but can’t seem to get the CSS to work consistently – if I put it in the child theme’s css file nothing happens when the original styling comes from woocommerce.

    I can make the changes by using Jetpack’ Custom CSS, but I’d rather not.

    My question is how to ensure the child theme css works consistently.

    Thanks
    John

Viewing 9 replies - 1 through 9 (of 9 total)
  • I am having similar issue in reducing product page space by moving product page title upward the page line, I have used the jetpack custom css and even the child theme css but none seems to work. see code here

    #breadcrumbs {
    margin: 0px;
    padding: 0px;
    }

    Please assist.

    Hi, the WooCommerce styles are enqueued conditionally after the theme stylesheet. So if you’re just putting CSS directly into the style.css file there’s a chance it’s being overwritten by the core WooCommerce stylesheet.

    Instead you should enqueue your own stylesheet in the child theme. You can rad about how to do that here: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    Honestly though, for a few lines of CSS, using the JetPack feature is fine if you’re already loading JetPack anyway.

    @bennn You’re targeting the wrong selector. Try .woocommerce-breadcrumb.

    Thread Starter futurepacer

    (@futurepacer)

    Hi James – thanks for your prompt response.
    I will give this a go as I’d rather not be loading Jetpack in addition to everything else.

    Given it’s good practice to use a child theme, and that Woo Themes recommends it for alterations, would it be possible to update or add information about using a child theme with Storefront and WooCommerce to the support pages?

    The info that’s on there refers to Canvas and has no reference to enqueue_style.

    I’ve used child themes with other themes and never had to use enqueue_style so in that respect it is an unusual requirement and I think should be highlighted – or the theme code changed of course to make it work in the standard way πŸ™‚

    Thanks again
    John

    Hi John,

    You don’t have to enqueue a separate stylesheet, but it might be better to in some cases. Most themes just include all their CSS in a single file, Storefront is different – we only include the WooCommerce CSS if WooCommerce itself is active to improve performance for those not using it.

    So it could just be a case of styles in our woocommerce.css file overruling what you’ve put in your child theme, I can’t say for sure without seeing your code. Enqueuing a stylesheet with wp_enqueue_style() would resolve this, but you could also just use the !important declaration. That’s up to you.

    We’ll update the docs with more info later πŸ™‚

    Thread Starter futurepacer

    (@futurepacer)

    Hi James
    Thanks for your response – much appreciated.
    John

    Hi James, please see if I use the right code as suggested:
    #woocommerce-breadcrumb {
    margin: auto;
    padding: 0px;
    }
    Every page has too much white space above the page title, it was easier for me to customize with the mystile theme but now I changed to storefront the pages load with white space above the page title .

    Please assist.

    Hi,

    The child theme is a pain to work with not just with css but with other stuff too.

    I have this problem for now. Even if I copy the woocommerce templates in my child theme and activate them I get this:

    http://screencast.com/t/fwoFf95Q

    http://screencast.com/t/jgT5h7495jR2

    The front page is squeezed….

    @surfmedia – if you are looking for help, please start your own thread – this one is already marked resolved.

    If you are using Storefront theme, start a new one here:

    https://wordpress.org/support/theme/storefront#postform

    Hi Guys,

    I’m customising my Storefront_Child theme and have been looking for the CSS stylesheet so I can customise it. But when I click on the “Edit CSS” plugin that I’ve installed, the CSS codes are not there.

    Any idea where I can find the codes?

    Thank you,
    Andrew

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Storefront Child Theme CSS Problem’ is closed to new replies.