Wednesday, December 19, 2012

Zen Cart - Change CSS not effective

Never tot that those simple thing we do can cause so much trouble with Zen Cart. huh!

Situation:
I make changes to Stylesheet.css file from my zen cart folder. Working fine in my local machine then i decided to transfer to my hosting. How normally i do, i rename the Stylesheet.css file to any name or just put underscore to the end of the file name (eg: Stylesheet_.css), then transfer the updated Stylesheet.css file. So, inside the folder there will be two css file. I refresh my browser to see the changes but still no change to my template. I clear my browser history/cookies/cache still not working.

Fixed:
The reason that modifications to the Stylesheet.css do not affect the site is because Zen Cart sends BOTH CSS files to the browser. Stylesheet.css is loaded first, then stylesheet_.css — The latest loaded file will have the priority over the files before. And, if a CSS selector appears in multiple files (multiple times in a same CSS file), the one loaded last will always be the one used by the browser.

If you’d like to keep a backup copy of your CSS file in the same folder, just add ‘.bak’ to the end of the filename (well, anything, as long as the filename does not end with .css)

Phew! Alhamdulillah.