-
Posts
-
Hi,
This is not really an Enfold-specific support question, but I’d like to ask it here to see if anyone (Enfold staff and customers alike) happens to know of a solution.
I use the custom.css of the Enfold theme to style almost everything about the website, including temporary landing pages. The issue is that my changes to this css file are completely ignored by the browsers of returning visitors. This means that any landing page I make, even in their very own visual style, is completely broken to them.
Colleagues complain to me about issues on the website, which I clearly recognise as being caused by local caching of the custom.css file. A simple CTRL+R fixes everything, but I can only ask those colleagues to try this, not all other visitors. I can’t possibly add a message to the top of the site to ask visitors to hit CTRL+R before continuing on the site.
Today I saw the website on the PC of another colleague. It had an issue that I immediately recognised as something I fixed in early November 2015, so the custom.css has apparently not been reloaded since then. This is, of course, a huge problem in countless cases!
So I am really REALLY desperate to know of a work-around to this problem. What do other people do? I’ve asked my hosting about this, I’ve asked on this forum in the past, I’ve tried several things (like adding something that versions the file so that every new save will give it a new name and trick the browsers to ‘think’ it is a new file and always download a fresh version), but so far I have not found any working solution.
Any advice would be very much appreciated!
Hey DavyE,
Are you using any caching plugin ? Please update the plugin to latest version and check the settings if you can set auto clear cache every now and then. You can also manually clear cache after any changes to the css styles so the new changes are delivered immediately.
If you are using a CDN like cloudflare to deliver your website faster that could be an issue as well. Please check the CDN settings and run it in development mode so the latest change will reflect on the front end.
Best regards,
VinayHi Vinay,
Thanks for your feedback.
No, I’m not using CDN or caching plugins. I’ve also tried disabling any caching in my hosting settings and even tried flushing that cache countless times when I did use it. Apparently, the caching of the custom.css is purely local and I cannot find a way to force the browsers to download a new version.
I’ve been looking at PHP codes to automatically version the CSS file whenever I save it so the browser is tricked into thinking it is a different file and therefore guarantee people always see the latest changes, but this usually seems to require some changes to the .htaccess file which my hosting provider no longer allows to be edited (I think).
So I’ve come across a simple plugin “Version This” on the WP Plugin Directory. It hasn’t been updated for a long time and doesn’t seem to have any reviews, but perhaps I should try it out nonetheless? Maybe this could be a solution to the problem?
Hi,
I searched for that plugin but I can’t find it. Could you please provide a link to the plugin? Did you minify the scripts and are you using a child theme? You can move the custom css modification in the Quick CSS field, the version number of the stylesheet will automatically change once you toggle the theme options then saved it. The latest version of the stylesheet will be used if someone revisited the site.
Best regards,
IsmaelHello Ismael,
The plugin I mentioned is this one: https://wordpress.org/plugins/versionthis/
I did not minify any scripts and am not using a child theme. I chose to use custom.css instead of the Quick CSS field of the theme settings because that way I don’t lose anything when I update the theme (back when I started using Enfold I think it reset this field with every update) and I only have to update one file for all languages, instead of per individual language (which was also the case when I first started using Enfold).
Does the Quick CSS field still reset with an Enfold update and is it still per individual language or the same for all?
As the CSS changes quite often, I cannot risk losing all of the CSS because the field has somehow reset. The custom.css file can be easily backup’ed or restored if necessary.
Hi,
you won’t loose your content inside of Quick CSS when updating. Not sure what you mean with individual languages though. Are you referring to WPML?
Best regards,
AndyWhen using WPML (yes), each language needs its own theme settings. Is the Quick CSS universal or per language?
Hi,
It’s per language, so you would need to copy/paste your code from Quick CSS between the languages.
Best regards,
RikardExactly, that’s what I mean. It’s inefficient to constantly have to make every single change (no matter how small) and copy it to every other language. Time consuming with multiple languages and risk of eventually having different versions between languages.
So the CSS file is still a better option, but back to my original question: Can it be somehow versioned to force browsers to download the most recent CSS changes? Or any other way to keep browser caches more up to date?
Hi,
In that case please use a child theme and enqueue an extra css file with version name at the end of the file. This will require changing the stylesheet name in the enqueue script every time you make an update.
Please try adding this at the very end of your themes / child themes functions.php file:
/* Enqueue Styles and Scripts */ function custom_styles() { wp_enqueue_style( 'custom_css', get_template_directory_uri() . '/css/custom-v1.css'); } add_action( 'wp_enqueue_scripts', 'custom_styles');Best regards,
VinayHey Vinay,
Sorry for the late answer. I’ll look into your suggested solution when I have some time, but for now I am using a very manual alternative that may be a solution for other people struggling with this:
Through FTP/SFTP connection, I rename the custom.css by, for example, adding the date in the name. Today is June 17, 2016, so the name would be something like “custom20160617.css”.
Then I open functions.php and go to the following line:
wp_register_style( 'avia-custom', $template_url."/css/custom.css", array(), '2', 'all' );and I change the filename there as well:
wp_register_style( 'avia-custom', $template_url."/css/custom20160617.css", array(), '2', 'all' );Then I upload both files and all visitor browsers are tricked into thinking the css file is a different file so will download the new version. If suddenly I make a change to the css file again, I change the name of the css file + the link in the functions.php and it’s all good.
Easy, and so far seems to work really well. At first I thought the functions.php file may be cached as well, meaning the change in referring to another css file might not be recognised by browsers, but so far it has work wherever I tested.
- You must be logged in to reply to this topic.