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!

[GriffinGraffix]

#774685

The fix by adding the above code to functions file isn’t working for me. I do have child theme active. I also tried by removing my previous scripts loading code as well and leaving only the one specified above with no results either.

Here’s what’s in my function file:

<?php
function avada_child_scripts() {
	if ( ! is_admin() && ! in_array( $GLOBALS['pagenow'], array( 'wp-login.php', 'wp-register.php' ) ) ) {
		$theme_info = wp_get_theme();
		wp_enqueue_style( 'avada-child-stylesheet', get_template_directory_uri() . '/style.css', array(), $theme_info->get( 'Version' ) );
	}
}
add_action('wp_enqueue_scripts', 'avada_child_scripts');

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' );

add_filter('gettext', 'translate_text'); 
add_filter('ngettext', 'translate_text');
function translate_text($translated) { 
$translated = str_ireplace( 'Related Projects', 'Similar Dogs ', $translated );
$translated = str_ireplace( 'Project Details', 'Breed Traits', $translated );
return $translated; 
}

[spirittlk]

#839573

If anyone solves this I’ll be forever grateful. I had to delete the child style.css and just copy it all into the “custom CSS” filed in the Avada options which has drastically slowed my site. This all started being a problem with the latest avada upgrade. Has anyone filed a support ticket? Thank you!

[spirittlk]

#839597

Guess what! Avada posted the solution here:
https://theme-fusion.com/support/submit-a-ticket/

It has to do with updating a few lines in the Child’s functions.php file and was an easy fix!

[Ammar. S]

#839773

Hello Everyone

Just a note, this has also been fixed in our default theme that comes with the complete document package, if you simply download and install it, you should be able to use the new child theme and add your styles further there.

Thanks

-Ammar

[Author]

Posts