Personalizacin Bsica de una tienda en Magento

En este primer tutorial nos vamos a centrar en personalizar la apariencia de una tienda de la forma ms sencilla posible. Vamos a aprovechar que Magento tiene un excelente diseo en su tema por defecto y veremos como podemos darle un aspecto personalizado con cuatro pequeos cambios. NOTA IMPORTANTE: Nos hemos cambiado de direccin, puedes encontrar este tutorial en nuestra nueva web de tutoriales

Qu vamos a hacer?
Vamos a crear una tienda de libros que se llamar Rosa de Papel. Partiremos del tema por defecto y veremos como hacer unos cambios sencillos para personalizar mnimamente la tienda. El aspecto que presenta una tienda Magento por defecto es este:

Las categoras, banners y productos que ves debajo de la cabecera son solo datos de relleno que hemos cargado para que la tienda no aparezca completamente vaca. Estos datos de muestra pueden descargarse en un fichero comprimido de la pgina de Magento y cargarse en la base de datos, pero no son necesarios en absoluto. El tema por defecto es elegante y est bien diseado, vamos a cambiar slo la cabecera para adaptarlo a nuestro negocio. Este es el logo que tenemos:

Lo mejor, si queremos tener ms flexibilidad a la hora de utilizarlo con cualquier fondo, es tener una versin del logo con fondo transparente (fichero gif o png). De todas formas esto no es imprescindible para seguir este tutorial.

Dnde haremos nuestros cambios?

Los ficheros y carpetas del tema 'default' se encuentran repartidos en estos dos directorios:

magento/app/design/frontend/default/default (pla ntillas y layouts si el tema los requiere) magento/skin/frontend/default/default (imgenes, css y javascript)
El primer 'default' es el nombre del paquete y el segundo el nombre del tema. Un paquete (package) es una forma de agrupar temas relacionados, o ms exactamente, variaciones de un mismo tema. Cuando creemos un tema ms complejo utilizaremos nuestra propia carpeta de paquete, pero como lo que vamos a hacer es realmente una pequea variacin sobre el original, vamos a colocar nuestro tema dentro del paquete 'default'. Nuestros ficheros estarn en:

magento/app/design/frontend/default/rosa_de_pape l magento/skin/frontend/default/rosa_de_papel
Esto nos permite aprovechar la jerarqua de temas de Magento para colocar en nuestras carpetas slo 4 ficheros con los cambios sobre el original. Magento buscar el resto de ficheros siguiendo esta jerarqua: default/rosa_de_papel default/default base/default El segundo eslabn de esta cadena es siempre el tema 'default' del paquete en el que estemos. Haciendo nuestros cambios de esta forma contaremos con las actualizaciones que el equipo de Magento haga para mejorar el tema y tendremos nuestras modificaciones separadas y fciles de localizar. Nunca debemos hacer nuestros cambios en el tema 'default' directamente, porque si hacemos alguna actualizacin, todos nuestros cambios se perdern y tendremos que volver a hacerlos.

Lo ms bsico, cambiar el logo

El cambio del logo es lo ms sencillo que podemos hacer para personalizar nuestra tienda. Es un paso imprescindible incluso cuando contemos con un tema que no necesita ninguna modificacin. El nombre de nuestro negocio es lo mnimo que tendremos que incluir. Al ser un cambio tan necesario, se puede hacer directamente desde el interface de administracin de Magento. Vamos a colocar la imagen con el logo con fondo transparente en el directorio de nuestro tema. La imagen ira en:

magento/skin/frontend/default/rosa_de_papel/imag es/rosaDePapelLogo.png
Ahora tenemos que decirle a Magento que utilice nuestro nuevo tema y luego decirle cmo se llama la imagen que utilizamos como logo. Para cambiar el tema, entramos en el panel de administracin de Magento, enSistema/Configuracin. Seleccionamos Diseo en el men de la izquierda y abrimos el apartadoTemas. En el desplegable que aparece en la esquina superior izquierda, seleccionamos 'configuracin por defecto' y, en la pantalla central, como tema 'por defecto' ponemos el nuestro 'rosa_de_papel' (el nombre del directorio con nuestro tema).

Y pulsamos el botn 'guardar la configuracin' que aparece en la parte superior derecha. No vamos a ver ningn cambio porque nuestro tema slo tiene la imagen del logo y todava no le hemos dicho a Magento cmo se llama (si la hemos llamado logo.gif entonces s la coger sin que sea necesario indicarselo, porque es la que busca por defecto). Para indicar cual es el logo, en la misma pantalla de configuracin anterior (Sistema/Configuracion Diseo). Seleccionamos 'Cabecera' y en la entrada de texto que pone 'Logo Image src' ponemos nuestra imagen: images/rosaDePapelLogo.png

En esta misma pantalla tambin puedes cambiar el 'Welcome Text' para poner cualquier mensaje de bienvenida que quieras para tu tienda. Este mensaje aparece en la cabecera, en la parte derecha. Si no lo cambias puedes verlo con el mensaje 'Default welcome msg!'. No olvides pulsar el botn 'guardar la configuracin' para salvar tus cambios.

El logo original del tema por defecto mide 167 x 47 pixels. Si hacemos nuestro logo del mismo tamao o de un tamao muy similar no tendremos ningn problema:

Pero queda un poco pequeo y queremos darle mucha mas visibilidad a nuestra marca. Nuestro logo mide 340 x 100 px. Al colocarlo vemos que la cabecera queda un poco ancha:

El problema es que el div que contiene todos los elementos de la derecha es muy ancho

(600px). Cuando el logo es un poco ms ancho que el que tena por defecto, este div no cabe a la derecha y queda por debajo:

La solucin es muy sencilla, slo tenemos que cambiar en la hoja de estilos el ancho de la caja que contiene los links y enlaces de la derecha para que sea ms corta y no quede 'enganchada' debajo de nuestro logo.

Cambiando la hoja de estilos

Para saber exactamente lo que cambiamos y no tener que andar tocando lineas en el fichero original, vamos a crear nuestra propia hoja de estilos y hacer que se incluya junto con las hojas de estilos que tiene el tema por defecto. Para esto tendremos que crear dos ficheros:

magento/app/design/frontend/default/rosa_de_pape l/layout/local.xml(slo para indicar a Magento que coja nuestra hoja de estilos) magento/skin/frontend/default/rosa_de_papel/css/ local.css(nuestra hoja de estilos)
local.xml debe contener slo las siguientes lneas:

<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <!-- add the local stylesheet --> <reference name="head"> <action method="addCss"><stylesheet>css/local.css</stylesheet></action> </reference> </default> </layout>

La lnea <action method="addCss"><stylesheet>css/local.css</stylesheet></action> es la que indica el fichero .css que debe cargarse. Ahora podemos volver al problema que queramos solucionar: la anchura del div con los enlaces de la derecha de la cabecera. Esta anchura est definida originalmente en los estilos del tema que estamos tomando como base ('default'):

magento/skin/frontend/default/default/css/styles.css sobre la lnea 494 de la siguiente forma:

.header .quick-access { float:right; width:600px; padding:28px 10px 0 0; }

Lo nico que queremos cambiar es la anchura, que vamos a pasar de 600px a 400px, as que en nuestro fichero local.css slo tenemos que incluir:

.header .quick-access {width:600px;}

Y el resultado es:

Perfecto!. Justo lo que queramos. Estos cambios tan sencillos pueden ser suficiente para muchas tiendas. Podemos utilizar el tema por defecto u otro que nos guste, pero siempre tendremos que aadir nuestro logo para tener la tienda mnimamente personalizada. Para diferenciarnos un poquito ms de la instalacin por defecto vamos a cambiar tambin el color de fondo de la cabecera.

Cambiando el fondo de la cabecera

Tenamos pensado nuestro logo sobre un fondo marrn y queremos que nuestra tienda tenga esos colores. Podemos cambiarlo con un par de lneas en el fichero css y una imagen que pondremos como fondo. Como siempre, vamos a buscar primero como est definido el fondo de la cabecera en el temadefault. En su hoja de estilos, sobre la lnea 482 tenemos:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

El fondo de la cabecera original es esta imagen: magento/skin/frontend/default/default/images/bkg_header.jpg

Podemos copiarla y editarla con cualquier programa de edicin grfica para pintarla como queramos o podemos crear una imagen desde cero. El tamao del original es 2000 x 150 pixels. La imagen final debemos colocarla en: magento/skin/frontend/default/rosa_de_papel/images/bkg_header.jpg

Para nuestro diseo hemos utilizado varios tonos marrones y hemos conservado las dos sombras laterales que marcan el ancho de la tienda, pero puedes hacerlo tan sencillo o tan complicado como quieras. Hay que tener en cuenta que si tenemos un logo muy alto esta imagen de fondo tendr que repetirse verticalmente. Si prevs que esto puede ocurrir, tienes que hacer un diseo del fondo que quede bien al repetirse, como el original, con lneas horizontales, o con colores planos. En nuestro caso, el logo mide slo 100 pixels de alto y el fondo no necesitar repetirse. Para que coja nuestra imagen tendremos que copiar la lnea que vimos antes en nuestra hoja de estilos (magento/skin/frontend/default/rosa_de_papel/css/local.css):

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

Realmente slo necesitariamos incluir la parte de 'background' para que machaque la informacin de la lnea original, pero la copiamos entera porque ms adelante cambiaremos algn otro detalle. El resultado es:

Como podemos ver en la imagen, todava nos quedan algunos detalles por cambiar para que el resultado sea aceptable. La caja de bsqueda en la parte superior todava tiene una imagen azul de fondo y la zona con el men de categoras tambin. Como en este tutorial queremos hacer lo ms sencillo posible, simplemente vamos a eliminar la imagen de fondo de la caja de bsqueda (utilizando nuestra hoja de estilos). Sobre la lnea 490 de la hoja de estilos original ( magento/skin/frontend/default/default/css/styles.css ) encontramos la lnea que define el fondo y el estilo general del formulario de bsqueda:

.header .form-search { position:absolute; top:0; right:29px; width:315px; height:30px; background:url(../images/bkg_formsearch.gif) 0 0 no-repeat; padding:1px 0 0 16px; }

Lo nico que queremos cambiar es el fondo (background) por lo que en nuestro fichero local.cssponemos:

.header .form-search { background: none;}

Para cambiar la barra de color azul oscuro en la que aparecen las categoras podramos hacer como antes, copiar y editar la imagen que tenemos por defecto: magento/skin/frontend/default/default/images/bkg_nav0.jpg pero en este ejemplo vamos a cambiarlo por un color plano, sin imagen, que queda muy bien para los colores que hemos elegido. En el css del tema default encontramos que el fondo de esta barra de navegacin se define en la siguiente lnea (513 aproximadamente):

.nav-container { background:#0a263d url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }

En nuestro fichero local.css quitamos la referencia a la imagen, dejando slo el cdigo del

color que queramos:

.nav-container { background:#4A2D07; }

Nota: El cdigo del color que quieras puedes obtenerlo, por ejemplo en esta web: http://www.colorpicker.com/

Ya lo tenemos casi listo. Si nos fijamos bien en la imagen, queda una lnea muy fina de color azul entre la cabecera y la barra de navegacin con las categoras. Esto podemos cambiarlo directamente en una lnea que ya tenemos en nuestro fichero local.css:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

Esta lnea, adems de la imagen de fondo de la cabecera, est definiendo una lnea superior de 5px con color #0d2131 y otra lnea inferior de 1px con color #415966. Esa lnea inferior es la que queremos modificar. Vamos a cambiarla a color negro, quedando:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #000000; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

El resultado final es:

Naturalmente podramos seguir cambiando cosas, todava nos quedan tonos azules, podramos cambiar el pie de la tienda, etc, pero la idea de este tutorial es mostrar que con slo 4 cambios muy bsicos, sin ninguna complicacin, podemos personalizar la tienda.