Styling in child theme’s “style.css” file not working

[calgary]

#687833

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]

#688187

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]

#688207

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]

#688484

Thanks @marklchaves!

[davelovely]

#688485

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!

[Author]

Posts