magento appends a querystring parameter to CSS and JS - css

How Can I appends a querystring parameter to each CSS and JavaScript include in the HTML to clear CSS and JavaScript cache.
I have tried
<action
method="addCss"><stylesheet>css/style.css?123</stylesheet></action>
and
<action
method="addItem"><type>skin_css</type><name>css/styles.css?123</name><params/></action>
.
But each time it returns a the base package like
http://www.example.com/skin/frontend/base/default/styles.css?123
not my custom theme directory .
How to solve this ?

This free extension should do what you want - works perfectly for me:
https://github.com/jreinke/magento-suffix-static-files

When you're adding a css file through xml layout updates, the addCss action (which realy just calls the addItem action with the type set to skin_css) is looking for a file path, not a url. While query strings are valid in urls, they aren't in file names. Magento sees that as an invalid parameter, gets confused and falls back to base/default.
I can think of 2 solutions for this. Unfortunately both are kind of hackey.
Move the css file to the base default theme. This works but it depends on fallbacks that might not stay the same in other versions of magento.
instead of directly inserting the css file, create a phtml template file with the html code to insert a css file. Then insert a core/template block with that new template file as its template in the layout xml. I've used this method on the sites i develop for to work around this problem.

Here's what we do:
<reference name="head">
<block type="core/text" name="link.tags">
<action method="setText">
<text>
<![CDATA[<link rel="stylesheet" href="/css/style.css?v=2">]]>
</text>
</action>
</block>
</reference>
Got this idea along with some other useful stuff from 5 Useful Tricks For Your Magento local.xml.
As an alternative, you can always just rename the file from style_v1.css to style_v2.css etc. whenever you make a change -- it has the same effect as changing style.css?v=1 to style.css?v=2.

as a follow up answer to this question i found the following (paid) magento extension which does what you require:
http://www.magentocommerce.com/magento-connect/clear-css-and-javascript-cache.html

Related

How to prevent an asset css file from caching in a custom BE module?

I've found this line of code to embed custom css in my custom BE module extension.
<f:asset.css identifier="myextcss" href="EXT:myExt/Resources/Public/Css/myext.css" />
This works fine. But the browser caches this file - how do I prevent it from this? I know, that pages can be set non-cache in FE. But in BE I want only this file prevented from caching, not the whole module.
after some trying I found a workaround.
I add these lines to my controller
$mytoken = substr (str_shuffle($_GET['token']),0,8);
$this->view->assign('mytoken', $mytoken);
And this to my fluid:
<f:asset.css identifier="myextcss" href="EXT:myExt/Resources/Public/Css/myext.css?{mytoken}" />
So the browser find always a "new" file request and reload it.

How to compile css file

I've seen this on a site:
<link rel="stylesheet" href="http://blablas.com/built/assets-styles.css?v=12355" />
which need to be underlined assets-styles.css?v=12355"
How to compile css file as above?
is it possible with less or sass?
[update]
And How about this?
<link rel="stylesheet" href="https://blablas.com/built/assets-201501-35b4b2bf0e75bb40f98d111b2d97951d.css">
CSS files are not to be compiled.
The reason the URI parameter is there could be it is not really a CSS file that's called, but a PHP engine (with mod_rewrite) that returns a CSS file based on the given parameter.
Another reason to use parameters is to force web browser to fetch the stylesheet again when necessary.
That has nothing todo with Compiling CSS! You use it for Cache Control. Everytime the CSS File gets changed they just need to change the numer and the new version gets requested.
In the 1st Link you posted ist a GET Variable therefore ist more likely to be vor some inernal Processing

How to use a common header alternative pages using diazo

I have two static html files, one is a design for a homepage, the other is a design for a regular page.
I have a rules to determine which one to use, like this:
<rules css:if-content="body.section-front-page">
<theme href="home.html" />
</rules>
<rules css:if-not-content="body.section-front-page"
css:if-content=".portaltype-document">
<theme href="index.html" />
</rules>
Though I am realizing now that these two pages have common elements, such as the header.
Is there a way to use the header from one page or something, that means if I make changes to the htmlt, it only needs to be done in one place? Another way of asking, can you mix together design files?
You would need to have just the one theme file to do that.
If you design the theme file properly and you do have common elements between the home page and the other site page templates this should be quite possible.
I guess the design is key here... the following site uses one theme file but has a very different home page using rules similar to your css:if-content="body.section-front-page" to determine not to show the left and right columns for example.
http://www.lotterywest.wa.gov.au/
This is not possible.
Diazo (version 1.0.4-py2.7) simply loads the theme file (see diazo.rules.expand_theme(element, theme_doc, absolute_prefix)). The loaded file must have a etree.parse()able format and AFIK there are no "rules" to embed or include further files or code.
I've been trying to find a workaround with no success until now. My alternative idea was to include the common code as a replace rule and then apply the other rules. E.g. have a given id in your theme-file and expanding it with a diazo rule. This works only if you do not need to expand your code (see my question https://stackoverflow.com/q/21703070/1659599).
If you only nedd to add html text without further replacements then you could add this by a rule.

Magento Top Menu suddenly stops writting "Active" Class

I have come accross a strange problem where magento seems to have stopped writting the Active and Active parent classes onto my menus.
I have been using the default Magento menu and it has been working for a month or so fine. I have cleared the cache and re-indexed the categories and products.
Any advice appreciated.. could this be a file permision problem ?
for me this xml change in my local.xml solves the issue:
<default>
<reference name="catalog.topnav">
<action method="unsetData"><key>cache_lifetime</key></action>
<action method="unsetData"><key>cache_tags</key></action>
</reference>
</default>
Followed Benmarks advice, Disabled the Block Html Caching and the active class was being written again.
Magento's HTML Block caching is a rather strange beast. They've only enabled a few blocks to work with it, one of which is the top menu (the template file is different depending on which version of Magento you're using).
If you want to keep block caching on and get rid of this bug, then you could create a module with a new block type which
extends Mage_Catalog_Block_Navigation
and set the following data in your block's _construct() method:
$this->addData(array(
'cache_lifetime' => null,
'cache_tags' => array(Mage_Catalog_Model_Category::CACHE_TAG, Mage_Core_Model_Store_Group::CACHE_TAG),
));
This sets the cache time to null, ie disables it.
Then, in your layout files you'll need to find (in page.xml) the Navigation Bar. It will have the following tag:
<block type="catalog/navigation"...
Which you'll need to replace with your own module's navigation block class:
<block type="mycompany/navigation"
Refresh your caches, and you should find your classes behave properly. For more information on Magento's layout I really reccommend Alan Storm's excellent book 'No Frills Magento Layout', and for a great addition to your Magento debugging tools check out this module which shows you which blocks are being cached (as well as a whole load of other useful block info).

Joomla Beez template, mystery CSS

Im looking at the Joomla Beez templates index.php file, and I come across this.
<jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />
What is beezDivision? Theres no mention in the related CSS, and Ive grep -in 'beezDivision' * -R with nothing resulting other than a few lines very similar to the above one showing up (all in the templates/beez/index.php file). I imagine its used somewhere internally, but havent had luck finding out what it does. Possibly something new to me for CSS?
I havn't looked into how the style attribute is being used in the Beez template but the attribute value refers to the chrome style used to wrap the output generated by the module:
http://docs.joomla.org/What_is_module_chrome%3F
Confirming jessedb's answer - /templates/beez/html/modules.php contains a function to generate a custom module style with the appropriate name.

Resources