Modificando CSS en Magento

Me he encontrado con la tesitura de que en ocasiones hay que cambiar los estilos en magento, al cual cada día admiro y odio más a partes iguales, ya que para cualquier cosa hay que investigar muchísimo, hasta el punto en el que te quedas parado buscando información durante horas, sobre todo cuando quieres cambiar algo que no esta accesible desde lo menús.

En este caso mi intención es modificar el CSS de Magento, aunque debido a la forma de trabajo de Magento habrá que realizar una operación en nuestras páginas, no os preocupéis, lo único que hay que hacer es el equivalente a importar el css cuando hacemos una web normal.

Lo primero que tenemos que hacer es crear nuestro archivo CSS, pero hablando de este gestor de contenidos podemos perdernos por su laberíntico árbol de directorios, de modo que aquí os dejo las directrices y el mapa del tesoro para ubicar nuestro archivo custom.css donde debemos.

• Lo primero que hay que hacer es decidir que tema queremos modificar. Yo en este caso he decidido modifica el tema modern, sin necesidad de instalar ningun otro (Posiblemente ya hablaré de eso en otra ocasión)
• Los temas se pueden observar desde el menú del administrador en Sistema >> Diseño y una vez ahí haciendo click en agregar cambio de diseño, apareciendo una sección como la de la imagen, y donde podremos seleccionar el tema que queramos:

 

•  Una vez que tenemos elegido nuestro tema debemos de ubicarnos en nuestro árbol de directorios en el sitio correcto. En mi caso sería el siguiente prompt, que vosotros debéis de seguir, donde magento es donde esta instalado nuestro CMS.

•  Aquí ya podemos poner nuestro archivo .css para que después pueda enlazarse a las webs del gestor. En mi caso lo he llamado custom.css

De momento no nos hemos perdido ni hemos tenido demasiados problemas, ya tenemos nuestro archivo de estilos, pero aun no conecta con nadie, de modo que vamos a conectarlo a nuestra página de inicio...

• Para ello nos vamos a CMS >> Páginas y una vez dentro seleccionamos la página a la que queremos modificar. Si queremos que sean varias hay que hacerlo de una en una... la vida es así de dura...
• Muy bien, ya estamos en el "controlador" de nuestra página, aquí podemos modificar el titulo, el contenido, los metadatos y el diseño, que es lo que nos interesa así que en ese menú que aparece a la izquierda, se hace click en diseño...
• ...y ya estamos donde se hace la magia, buscamos la sección que se llama, diseño personalizado y ahí debemos de seleccionar el tema que hemos elegido más arriba.

•  Ya solo nos falta hacer el "enlace", para ello debemos de poner este script en el textarea de actualización de diseño:

<reference name="head">
 <action method="addCss">
 <stylesheet>../modern/css/custom.css</stylesheet>
 <params>media="screen"</params>
 </action>
</reference>

Aquí hay que hacer unos apuntes, ya que como se ve en la línea 3, se busca al archivo css, para ello debemos de ir un directorio atrás y luego entrar en la carpeta del tema elegido, y una vez estamos en esa carpeta entrar en su directorio css, para finalmente llamar a nuestro archivo css. En este caso custom.css

---

Nota: Es muy importante no equivocarse en este script o no obtendremos ningún resultado.

---

Muy bien una vez hemos hecho esto nuestro estilo ya se ve reflejado en la web.

Aun a pesar de que muchos diseñadores me quieran linchar después de la siguiente aberración he de informar que he escogido estos colores para que quede el reflejo del cambio una vez se aplica el estilo, no lo toméis como ejemplo si no queréis que el cliente mande un escuadrón de la muerte a vuestra casa...

Y bueno básicamente eso es todo lo que hay que hacer, que parece complicado, pero en realidad es muy sencillo ya que todos los pasos son mecánicos y no tienen demasiados problemas.