Cómo agregar un archivo CSS por layout en Magento

Siguiendo un poco con el tema de las buenas prácticas en cuanto a maquetación, módulos y esas yerbas; vamos a ver cómo incluir un nuevo archivo css dentro de nuestro template.

Básicamente tenemos dos formas (algunas más en realidad si queremos hacer las cosas poco prolijas).

La primera y más extendida, sería tomar page.xml de nuestro layout y repetir, por ejemplo la siguiente línea.

<action method="addCss"><stylesheet>css/mi_css.css</stylesheet></action>

Le cambiamos el nombre del archivo (que deberá estar ubicado en el path correcto) y con eso vamos a tener nuestro archivo css listo para ser leído.

La segunda forma de hacerlo, que nos sirve para nuestras extensiones, es hacer esto mismo pero desde la definición de layout del módulo.

Esto nos permitirá que sólo en los casos en los que el módulo se instancie, o incluso sólo en una sección, se agregue nuestro archivo css.

Dado que el archivo css ya lo tenemos ubicado dentro de las carpeta de skin correspondiente, vamos a agregar la definición a nuestro módulo.

Vamos a suponer que el módulo se llama Noticias. Normalmente, encontraríamos dentro de la carpeta de layout del frontend un archivo noticias.xml.

Dentro de ese archivo tenemos que agregar las siguientes líneas.

<?xml version="1.0"?>
<layout version="0.1.0">
 
    ...
 
    <default>
        <reference name="head">
            <action method="addCss">
                <name>noticias.css</name>
            </action>
        </reference>
    </default>
 
    ...
 
</layout>

De ésta forma le decimos que tome el bloque «head» (que se encuentra definido en page.xml) y agregue un archivo css. Luego se le pasa el path al archivo que puede ser cualquiera dentro de la carpeta de skin the nuestro theme.