Long title, sorry. Anyway:
I've got a WordPress site with a custom theme and its child theme. For a while, updating the child theme's style.css would produce results as expected - a refresh (or hard-refresh) of the website, and it would work from then on out.
Now, however, my updates are only reflected when I hard-refresh a certain page. If I then refresh the same page, or navigate to a different page on which the changes should be applied, the changes are reverted and the old style.css file is called instead.
I am using, and have tried purging all the caches available through the "W3 Total Cache" plugin. I have tried disabling "W3 Total Cache" entirely and installing the "Style.css Load Last Version" plugin, which as far as I know is using this trick to always call for the latest style.css file. I've tried visiting the page using incognito mode. In all cases, the behavior is the same - hard refresh works as a one-time deal, either refreshing the same page or navigating to different parts of the site which should be effected results in the browser calling for an older style.css file version and the changes are reverted.
Long test, sorry :) Anyway, I would love some feedback on this issue as its driving me nuts.
Which method are you using to load your child-theme's css file??
If you are using a link to include your child css as
<link rel="" ..............> then try appending the version at the end of you file name
<link rel="stylesheed"...... href="your_child_style.css?v-=1.10"> where ?v=1.10 is the version number. Every time you update your css increase the version number(In case you don't want to change the version every time i suggest you use the php time() function to generate a unique number eveytime the css is loaded)
If your css file is loaded automatically then make sure you have version decalared in you css file as
/*
Theme Name: yourchildtheme
Version: 1.2
*/
Try to change the version and it will work just fine.
Good luck
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
Related
I am writing my first web application using Flask and SQLAlchemy.
My CSS file is currently saved under a static folder and the styling is correctly applied to my webpage
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
However when I try to update it (for example changing the fontweight from bold to normal) it will not show.
I could even remove all the content of my css file and my website will still look the same (as if the content was never deleted).
The only way I found to make updates was to create a new file "main2.css" and update the url link from the HTML file which is very inconvenient.
Has anyone found a better way?
It sounds like your CSS file is cached. You can test this by changing 'main.css' to 'main.css?something'. Some people append a date string or other to their CSS file so it busts cache periodically.
It's possible you're getting the cached version of your CSS. After making updates to your CSS file, have you tried doing a hard reload? How you do this depends on the browser, but for Safari this can be done by holding Shift and clicking the Reload button.
I had the same issues and I realised I couldn’t keep asking my users to do a hard reload. Constantly renaming my static folder (where all CSS/JS files were kept) seemed error-prone from a production devops perspective. Then I found this addon called flask-static-digest, which was adding md5 hashes to the file names as well as gzipping them. It is a good fix for my production server.
https://github.com/nickjj/flask-static-digest
Another solution I found was really helpful during testing is to do a full reload in your browser (in my case Google Chrome) by shift-clicking the reload button.
I have a wordpress website. I usually make changes in CSS file of theme without any problem but there is file in which CSS changes do not appear. But they do appear while inspecting element.
But while inspecting it shows some digits after the file name. The file name is theme.css, but inspector show me the file name: theme.css?ver=15350008013:1
CSS is compacted and all codes are in one line.
Any change in the CSS file not happen but in the inspector shown. Why CSS editing not working?
This is fairly standard of most caching plugins for Wordpress.
theme.css?ver=15350008013:1
Is requesting a cached version of the file.
The CSS being all in one line is a minified version of the file. This is done to reduce the load on the server by making the file smaller.
Suggestions:
Look through your theme settings to see if there is any mention
of caching.
Look through your plugins and see if there is any
mention of caching.
Once found, clear / flush the cache.
Your changes should now be loaded by the server.
Generally what happens when you clear out the cache is that your plugin / theme will be unable to find a cached version and will minifiy and generate you a new version based off the original and you will see a new number at the end of the request string to tell the browser that the version it has downloaded previously is old and that it needs the new one.
I just started to work with wordpress, and I'm having an odd issue with my style.css(locally), whenever I change the content of it, it's not being updated when I load the page.
The odd issue I'm having, is that if I type any random content in my style.css and save, the style.css in the browser when I reload will load with a partial amount of the css structure from before, the partial amount is directly proportional to the amount of character of the random content i saved!!
Example:
Full style.css:
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
Saving style.css with random content:
random content random content random content random content random
Now, reloading style.css in view source from Chrome:
/*
* Globals
*/
body {
font-family: Georgia, "Times New
The loaded css above was loaded with the amount of characters of the "random content random content random content random content random " i saved in style.css.
Also, if I change the name of my css file to another one, the file gets updated correctly. If I reload the new css file, the updates will stop working again.
This is driving me nuts. Just does not make any sense.
I tried all the following measures:
Working entirely locally to avoid any kind of server caches. In my local server I'm using nginx as web service. I do not have any flags in my conf file to cache any kind of files.
Erased browser cache, cookies;
Checked if I had any wordpress cache plugins: I don't have any;
Tried using other browsers;
I used grep to check for any cached files in my wordpress folder: found none.
Tried to put version in the css file, and in the link html tag of my header.
So I finally found the issue.
One detail I forgot to mention is that im using vagrant to develop my wordpress site.
I had the sendfile flag turned on in the nginx.conf in vagrant. After setting it to off, everything is working perfectly now.
Also, if I change the name of my css file to another one, the file
gets updated correctly. If I reload the new css file, the updates will
stop working again.
Is the give away that this must be a caching issue of one kind of another. I would guess varnish or similar as #JackTheKnife suggested
Use this trick...
<?php $base_dir = __DIR__;?>
<link href="/custom/style.css?v=<?php echo filemtime($base_dir."/custom/style.css")?>" rel="stylesheet" type="text/css" />
...to "auto-version" your css. It retrieves the lasted modified date and time from the file on the server and appends that as a version. Thus every time you change the file, the caches bust remotely (if applicable) and locally.
Normally you need clean the cache of the browser for changes to take effect.
But there was a time that even that did not work and nothing made sense. It was when I uploaded an existing font to my server and it did not update. The solution was to completely delete the existing font and only then upload.
If you are comfortable managing the files in your server, try doing the same.
I'm working on a project in Django and I'm trying to clean some of the CSS up. The project is called 'rs'. The path to the stylesheet in the project folder is :
rsinterface/static/rsinterface/style.css
At the top of my file, I include static files using {% load staticfiles %}.
I then link the stylesheet using the line:
<link rel="stylesheet" type="text/css" href="{% static 'rsinterface/style.css' %}" />
I made some changes to the stylesheet that should be immediately visible, saved and closed the stylesheet, reloaded the page, and nothing was changed. There was some stylesheet that was loaded, as all the previously existing styling stayed the same, but the edits I made were not reflected. I didn't revert any changes, and roughly an hour later I reloaded the page again and the changes were there. I then changed the stylesheet again and, once again, the page didn't change. Ever since then its been intermittent in actually changing the page.
The one way I found to always make the style changes go through is by modifying the CSS file's name each time, but this leads to issues with version control software. Is there an explanation for this phenomenon, and is there any other workaround to make sure it doesn't continue to occur?
Try updating your browser and delete the data after saving your CSS.
For example, in Chrome, use Ctrl + F5 (Windows/LInux) or Cmd + Shift + R (Mac)
Because your website is still using a cached version of your CSS.
you can easily see this in your chrome debugger under network tab.
enter image description here
just open in a different browser or clear cache memory in your browser.
I made some css changes to my custom css file and uploaded the css file. However the changes are not shown. I have tried all of following:
remove var/cache/*
flush js/css cache from magento admin
clear browser cache
flush siteground cache
I even tried removing the css file and then access it from url URL, the old file content still shows but the css effects were gone on front UI.
what could be wrong.....
It is likely that your browser is still caching your CSS files. One way to check if it is indeed the browser and not say accidentally editing the wrong CSS file is by enabling and disabling the CSS file merge. By doing so you are forcing the browser to fetch for a whole new file - essentially bypassing caching.
You may also want to take a look at our CSS/JS Versioning extension which includes automatic refresh of the file name hash based on CSS/JS file timestamps (sensitive to editing and changes) http://extensions.activo.com/css-and-javascript-versioning.html