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
  • 1
    It works exactly the same. Replace the script tag with a link tag.
    – philwinkle
    Aug 27, 2013 at 4:52

3 Answers 3

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.

3
  • 1
    Exactly the answer I was looking for. Thank you for taking the extra time to explain the logic behind it too that helps! Aug 28, 2013 at 5:31
  • No problem, maybe take some time to give the origional post an upvote to ;) magento.stackexchange.com/questions/3523/… Aug 28, 2013 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, 2015 at 2:43
9
<?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
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
2
  • Where can I find public function getIncludes()?
    – Phil
    Oct 4, 2013 at 15:38
  • added it to the post. Oct 5, 2013 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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