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; 
}

• This reply was modified 1 week, 5 days ago by GriffinGraffix.

[Author]

Posts