custom css not working in style.css

[ollyvision]

Hello

I have a fresh install of wordpress, with elementor pro and hello with hello child theme.
When i add any custom css to the style.css it does'nt change anything on the website, but if i add it to a elementor css custom box then it works. I've tried turning off the few plugins i have on, off and nothing changes. Also no caching plugin is running.

is there something i need to do to make the style.css work? It appears in wordpress file editor but ive tried adding via that method and just editing the file and uploading via ftp, but no difference.

Thanks

[milad-jfr]

@ollyvision

i found this solution :
in the child theme folder on function.php line 17

define( 'HELLO_ELEMENTOR_CHILD_VERSION', '2.0.0' );

change version number at the end for example change it to 2.0.1
and your style will load .

complement :
it seems Awkward but you must change the version after every changes you made in the style.css ,
better to place all the styles and change the version at the end to fix

[milad-jfr]

as a better solution for development time ,
you can do this and no need to change the version anymore ( Don't forget to remove it and change it back to default after your done developing otherwise your caching won't work for this file and it would load for ) :

add this :

?v='.time()

after the style.css file name like this :

get_stylesheet_directory_uri() . '/style.css?v=' .time() ,

this is complete code you need to replace with the style load function in child theme function.php :

function` hello_elementor_child_scripts_styles() {

	wp_enqueue_style(
		'hello-elementor-child-style',
		get_stylesheet_directory_uri() . '/style.css?v=' .time() ,
		[
			'hello-elementor-theme-style',
		],
		HELLO_ELEMENTOR_CHILD_VERSION
	);
}

Explanation:
We are basically adding a dynamic version number to the css file which forces the browser to load the new css every time we update it.

Don't forget to remove it after your done developing otherwise your caching won't work for this file and it would load for returning users again and again.
source :
https://wordpress.stackexchange.com/questions/40667/how-do-you-avoid-caching-during-development

Hi there,

Thanks for the effort Milad. We have the same issue as ollyvision, but unfortunately your advice of changing the version number doesn't work for us. Even if what you said works, it shouldn't be considered a solution, but a workaround instead. Only applying the style.css file whenever a version number in a different file is changed, doesn't sound like a good practice to me.

Anyway, I'm new to reporting issues on GitHub. What will happen after the issue is reported? Will a developer look at the issue and either fix it or provide a functional workaround? Is the style.css file supposed to work this way or is it an issue?

[oscarlms]

This has to do with how your browser interacts with the cache and how the elementor child theme enqueues the style.css file. For me, what worked was creating a function in functions.php that tracks the CSS version and appends it every time the browser calls it, so every time you change your style.css, make sure you update the version number and save it; then refresh your browser. Using this workaround makes your browser look for the new CSS file version every time and actually show changes:

function hello_elementor_child_enqueue_scripts() { $version = wp_get_theme ()->get ('Version'); wp_enqueue_style('hello-elementor-child-style', get_stylesheet_directory_uri() . "/style.css", array(), $version,); } add_action( 'wp_enqueue_scripts', 'hello_elementor_child_enqueue_scripts', 20 );

Another option (that I haven't tried) is using more modern development tools like grunt, linting, etc.

[milad-jfr]

Hi there,

Thanks for the effort Milad. We have the same issue as ollyvision, but unfortunately your advice of changing the version number doesn't work for us. Even if what you said works, it shouldn't be considered a solution, but a workaround instead. Only applying the style.css file whenever a version number in a different file is changed, doesn't sound like a good practice to me.

Anyway, I'm new to reporting issues on GitHub. What will happen after the issue is reported? Will a developer look at the issue and either fix it or provide a functional workaround? Is the style.css file supposed to work this way or is it an issue?

Thanks for the reply,
here we are talking about Hello-Elementor ,
maybe other template using the different structure ,

and here there is nothing wrong with the developer ,
this problem is related to user cache system ,
and i suggest two solution you can check the second solution ( or workaround ) here :
#48 (comment)
and by using this function you can do the development without need to change the version and after you finish the development return back this function to default

[davITnemec]

Hello @milad-jfr , I'm dealing with the same issue, and Googling takes me here. I've implemented the versioning of the CSS child theme file. The appended part, with the time of creation/updated file, is inserted correctly at the end of the file.

But when I change the CSS child file, I need to use a hard refresh in the browser (i.e. CTRL + F5) - after that the time of updating of file is updated.

I don't use any caching tool - only Elementor itself. Couldn't be there connection with some performance/cache option in Elementor itself?

Result: behaviour is like before - always need to use CTRL + F5 to load updated CSS in child theme.

Thank you for your help

[mondalaci]

I've tried the above to no avail. style.css wasn't even included into my pages. Luckily, claude.ai provided the solution that worked:

add_action('wp_enqueue_scripts', function() {
    $parent_style = 'hello-elementor-theme-style';
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('hello-elementor-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [$parent_style],
        wp_get_theme()->get('Version')
    );
}, 100);

This theme is seriously broken, and it should be fixed.

[Qadir-Hassan]

Even I am facing the same isue , I have tried all possible solution.

[Ramblin]

Checkout the solution on github prsented by the Elementor team
https://github.com/elementor/hello-theme-child

With the right nfunctions.php and style.css files in the child theme root, it works perfectly

For a development/testing system on a home network at 192.168.1.243/miratech

functions.php

<?php
/**
 * Theme functions and definitions.
 *
 * For additional information on potential customization options,
 * read the developers' documentation:
 *
 * https://developers.elementor.com/docs/hello-elementor-theme/
 *
 * @package HelloElementorChild
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

define( 'HELLO_ELEMENTOR_CHILD_VERSION', '2.0.0' );

/**
 * Load child theme scripts & styles.
 *
 * @return void
 */
function hello_elementor_child_scripts_styles() {

	wp_enqueue_style(
		'hello-elementor-child-style',
		get_stylesheet_directory_uri() . '/style.css',
		[
			'hello-elementor-theme-style',
		],
		HELLO_ELEMENTOR_CHILD_VERSION
	);

}
add_action( 'wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20 );

style.css

/*
Theme Name: Hello Elementor Child
Theme URI: http://192.168.1.243/miratech
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Richard Cantin
Author URI: https://ayuda.ca
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, th>
*/

/* Add your custom styles here */