Where should I put the custom .css file for my custom block/phtml.
When I want to customize the display of my block then I have to create a custom .css for that. But where do I have to put that .css file and how do I have to call it so my block would know to use that .css.
1) Put your custom.css in: skin/frontend/{package}/{theme}/css/custom.css
2) Put this piece of code in app/design/frontend/{package}/{theme}/layout/local.xml
<your_layout_handle> //Where you want to display your custom.css
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<name>css/custom.css</name>
</action>
</reference>
</your_layout_handle>
If you display your block in different pages, put this one:
<layout version="0.1.0">
<default translate="label" module="page">
<reference name="head">
...
<action method="addItem"> //add
<type>skin_css</type> //add
<name>css/custom.css</name> //add
</action> //add
</reference>
</default>
</layout>
EDIT:
What does <reference name="head"> mean ?
head is a block that is located between these tags<head>...</head> and it is a block of type page/html_head who contains some methods like:
public function addCss($name, $params = "")
{
$this->addItem('skin_css', $name, $params);
return $this;
}
public function addJs($name, $params = "")
{
$this->addItem('js', $name, $params);
return $this;
}
public function addItem($type, $name, $params=null, $if=null, $cond=null)
{
if ($type==='skin_css' && empty($params)) {
$params = 'media="all"';
}
$this->_data['items'][$type.'/'.$name] = array(
'type' => $type,
'name' => $name,
'params' => $params,
'if' => $if,
'cond' => $cond,
);
return $this;
}
public function addLinkRel($rel, $href)
{
$this->addItem('link_rel', $href, 'rel="' . $rel . '"');
return $this;
}
...
Path: app/code/core/Mage/Page/Block/Html/Head.php
