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.
Related
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' );
}
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
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/
If I edit .css file and upload it by ftp to apache web-server I need to clear a cache in a browser to see the correct page.
Why does it happen? I think browsers should check .css file's date to decide to load it from the net or from the cache.
What is the proper solution of the problem for web-developers?
I think browsers should check .css file's date to decide to load it
from the net or from the cache.
Depends on the headers. The browser doesn't even need to check if the file has been modified if, for example, the Expires header had a date in the future. It's a good thing, because it spares a request to the server.
Solution for web developers - disabling cache in browser's web tools and/or constanly purging your cache if that option isn't available in given browser.
When you want the changes to go live you can change the CSS file name. Adding a parameter with modfication date to the CSS url is usually enough, like <link rel=stylesheet" href="style.css?20130917" />, but if you use an additional layer (like a CDN) you may need to go with <link rel=stylesheet" href="style.20130917.css" /> and some server-side magic to map filename.[numbers].css to filename.css.
There is a 'hack' you can use - while loading css file add after file path ?randomNumber=xxxx like:
/path/to/my/css/file.css?anything=123123
If you want to ensure the browser grabs a fresh copy of that CSS file you need to change URL for that file. But that's not as bad as it seems. A common trick to to append a new querystring on the end of the CSS file with the last modified datetime. That way it only changes when the file changes.
<link href="/css/stylesheet.css?20131422080000">
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.