custom css not working in style.css about hello-theme-child HOT 7 OPEN

@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

from hello-theme-child.

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

from hello-theme-child.

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?

from hello-theme-child.

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.

from hello-theme-child.

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

from hello-theme-child.

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

from hello-theme-child.