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?

Improve this question
1
  • 1
    It works exactly the same. Replace the script tag with a link tag. Commented Aug 27, 2013 at 4:52

3 Answers 3

Reset to default
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.

Improve this answer
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! Commented 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/… Commented 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. Commented 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

Improve this answer
2
  • This works, but does not include a type="text/css" attribute. Commented Dec 5, 2017 at 8:03
  • as of HTML 4.01 and later, type is not required for the link attribute - stackoverflow.com/questions/5409114/… Commented Dec 11, 2017 at 15:31
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
Improve this answer
2
  • Where can I find public function getIncludes()? Commented Oct 4, 2013 at 15:38
  • added it to the post. Commented Oct 5, 2013 at 16:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.