I have made a custom module and within that module I want to add my own css file.
So far I have made all the required phtml files and the necessary layout.xml file. Testing the module I can see that I can call all the relevant files so I am confident my layout.xml is working. My issue is that when I try and add css to my modules files I only get the same HTML code as when I don't try to call the css. I.e. the head is not added
I have read this magento tutorial and this other tutorial as well as several others and I can't see what I am doing wrong
I shall use signup as my example:
in the signup.phtml i have
<form>HTML & PHP to create form</form>
but nothing else. To get the head for my form page I try to call page/html/head.phtml and add an action node to call my css
<layout>
<default>
<reference name="root">
<block type="core/template" name="page_head" output="toHtml" template="page/html/head.phtml" />
<action method="addCss"><stylesheet>css/normalize.css</stylesheet></action>
</reference>
</default>
<user_register_form>
<block type="core/template" name="prefcentre_regform" output="toHtml" template="ps/prefcentre/signup.phtml" />
</user_register_form>
<layout>
(Please not this is my most recent attempt to link my page with css, I have made several other attempts but it seems pointless to add all attempts)
It is my understanding from reading the tutorials that Magento will load the default handle and apply to all the pages in this .xml file. so why is this not being loaded? I am also wondering if my css is in the right folder, I currently have it in frontend/base/default/css but I have also tried placing it in frontend/default/modulename/css. I am not sure how Magento loads the stylesheet i.e which function it uses so I have not been able to take a look to try and work it out and I have not found that explanation in any of the tutorials
SUMMARY
-
how do I set up the .xml file to add css to the pages in my module?
-
were do I need to locate my css for magento to find them?
-
which class is used to load action method="addCss"? (I have looked in various Mage/Core/Block folders)
-
is there an alternative way to troubleshoot an xml problem other than simple trail and error? (for example I use Zend_Debug::dump($var) very useful when editing the php side of things)
Best Answer
You have an error in your xml, the
<layout>
tag at the end should be closed, but I will assume that it's a copy/paste mistake and that is not the problemYour problem is here:
What you are doing is:
core/template
that is using thepage/html/head.phtml
as its template.addCss
method of thepage/html
block (since the root is of that type if you look in thepage.xml
layout file)What you should be doing is referencing the
head
block as theaddCss
function is in that one.Now before answering your main question, I would like to put out a few remarks:
<default>
handle, will applied website-wide, not just for pages of that particular layout file.page.xml
file, you can find it. In fact there are 2 methods to add CSS files,addCss
andaddItem
From the type of the block,
page/html_head
, you would be able to figure out that the block isMage_Page_Block_Html_Head
. (It's in the format ofmodule/path
)<default>
handle. As it would be loaded in all pages throughout the website.But what you can do, is create your own "default" handle, and make all other handles "extend" it.
So using all that info, this is how your XML would look like:tl;dr
css/normalize.css
as the path for the CSS file, it should be located atfrontend/default/default/css
and not inside a subfolder.