Home Forums Community Forum Styling in child theme’s “style.css” file not working

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • calgary
    Participant
    Post count: 12

    I am using the Avada Child theme. I come from a hand-coded HTML/CSS background, so am used to placing all CSS code in a “style.css” file. When I try to do so (\\wp-content\themes\Avada-Child-Theme\style.css), no styles are applied. Nothing happens. When I apply the same styles through Theme Options –> Customize CSS, it works fine.

    That being the case, what is the point of even having the style.css file?

    davelovely
    Participant
    Post count: 2

    I am having the exact same issue! Although my question is different :-). My question is: How can I fix this issue so the styles.css file in my Avada Child Theme is recognized and takes precedence over parent styles.css? Or how can I get an external file (not a .php program within WordPress) to make use of the Avada Custom CSS? I can’t get that to work but want it to. Thanks.

    marklchaves
    Participant
    Post count: 441

    Hi Guys,

    Here’s a quick test I run on a fresh install to make sure my child theme is good. Note: this is just a quick sanity test.

    
    /* Let's turn our site into a day glo disco scene. */
    body {
        /* Need to override all of these. */
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 1.5rem !important;
        color: violet !important;
        font-weight: normal !important;
        background-color: #111111 !important;
    }
    
    h1, h2, h3 {
        font-weight: 600;
    }
    
    h1, h1.entry-title {
        /* Override for testing. */
        font-size: 4rem !important;
        color: darkgreen !important;
    }
    
    h2 {
        font-size: 3rem;
        color: darkorange;
    }
    
    h3 {
        font-size: 2rem;
        color: darkslateblue;
    }
    
    a {
        color: lightseagreen !important;
    }
    
    div {
        /* Looks like don't need to override. */
        border: 2px solid lightgreen;
        background-color: khaki;
    }
    
    p {
        /* Looks like don't need to override. */
        background-color: red;
        color: blue;
    }
    

    If this test doesn’t work, make sure your child theme is active. Then, check that your functions.php has this at minimum.

    
    function theme_enqueue_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'avada-stylesheet' ) );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    

    Also, always use your dev tools to inspect the element in question. You can see source CSS file referenced for every element using the inspector. It’s a beautiful thing.

    Good luck!

    P.s., @davelovely, you can use standard methods for including local or external CSS. But for WordPress you should always register and enqueue for good practise.

    https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402

    calgary
    Participant
    Post count: 12
    davelovely
    Participant
    Post count: 2

    Thanks @markichaves. So I do have the suggested code in my functions.php file. Interestingly using the inspect element dev tool I see that the child theme style.css file is being found. But it is not getting priority. The avada-stylesheet is taking precedents. So I used !important in my child theme style.css and guess what. It uses that. But I should not have to (and I don’t want to) use !important. That causes many unintended consequences.

    Do you have any ideas how I can fix this problem?

    Thanks again!

Viewing 5 posts - 1 through 5 (of 5 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.