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 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • calgary
    Participant
    Post count: 13

    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: 704

    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: 13
    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!

    GriffinGraffix
    Participant
    Post count: 2

    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
    Participant
    Post count: 4

    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
    Participant
    Post count: 4

    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
    Keymaster
    Post count: 1464

    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

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