6

I found out on Google CDN jQuery with Local Fallback in Magento Layout XML from @philwinkle answer that an external js can be loaded to the "head" via local.xml. Is there also a way to load an external css file via Magento's local.xml so that edits to head.phtml can be avoided?

  • 1
    It works exactly the same. Replace the script tag with a link tag. – philwinkle Aug 27 '13 at 4:52
8

As @Philwinkle said, you can modify the code from the post he previously posted.

<default>
    <reference name="head">
        <block type="core/text" name="your_external_csv">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" type="text/css" href="http://path.com/to/stylesheet.css">]]>
                </text>
            </action>
        </block>
    </reference>
</default>

It's important to understand what Magento is actually doing here so you understand how to modify it. A new block is created using the Mage_Core_Block_Text class. This class only has 4 methods: to get, add and set text and a _toHtml method that automatically outputs the text when the block is echoed in a phtml file.

In the block you've created just now you're using the <action> tag with attribute method, setText to imply that Magento should create the block and then call the following method or function of this block with, in this case, as argument your external CSS tag. So It doesn't really matter what you give as argument, it will always be outputted in the phtml.

  • 1
    Exactly the answer I was looking for. Thank you for taking the extra time to explain the logic behind it too that helps! – J -at- Paper Traitors Aug 28 '13 at 5:31
  • No problem, maybe take some time to give the origional post an upvote to ;) magento.stackexchange.com/questions/3523/… – Sander Mangel Aug 28 '13 at 6:42
  • Keep in mind that the block will be inserted after addItem actions, so CSS loaded this way may be blocked by JS files inserted above via addItem. – thdoan Dec 15 '15 at 2:43
8
<?xml version="1.0"?>

<layout version="0.1.0">
<default>

    <reference name="head">
        <action method="addLinkRel">
            <rel>stylesheet</rel>
            <href>//example.com/css/page.css</href>
        </action>
    </reference>

</default>
</layout>

notice i used // instead of http:// or https://, this lets the page define which protocol to use automatically

2

I see two ways. Hook into <?php echo $this->getIncludes() ?> and change the content of

\Mage_Page_Block_Html_Head::getIncludes
/app/code/core/Mage/Page/Block/Html/Head.php:462
/**
 * Get miscellanious scripts/styles to be included in head before head closing tag
 *
 * @return string
 */
public function getIncludes()
{
    if (empty($this->_data['includes'])) {
        $this->_data['includes'] = Mage::getStoreConfig('design/head/includes');
    }
    return $this->_data['includes'];
}

which is easily possible in the backend.

The alternative is to hook into the core_block_abstract_to_html_after check for the block type and just add your html via observer into the transport object.

/app/code/core/Mage/Core/Block/Abstract.php:886
  • Where can I find public function getIncludes()? – Phil Oct 4 '13 at 15:38
  • added it to the post. – Fabian Blechschmidt Oct 5 '13 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.