Theme structure magento

1. Curso de Magento
Unidad Didáctica 08
Estructura de un Tema
David Vaquero

2. Objetivos
Saber cómo se construye un tema

3. Índice de
contenidos
Introducción
Selección de la skin
Creación de la carpeta de la skin
Creación de la carpeta del paquete
Deshabilitar la cache
Selección del paquete y de la skin
CSS
El paquete base
Modificaciones desde el paquete base
Traducciones de cadenas

4. Introducción
Dentro de magento tenemos un conjunto de
elementos visuales
Package: paquete de temas
Theme: tema visual
Layout: diseños por columnas
Block: Bloque de código
Widget: tipo especial de bloque con
funcionalidad

5. Introducción
Todo el contenido que no se
encuentre en un tema siempre lo
cogerá del tema default dentro del
paquete seleccionado

6. Selección de la
skin
Para seleccionar un tema en concreto
iremos a System->configuration->Design
Dentro de Temas podemos cambiar la
skin por defecto
Por ejemplo poniendo blue
Esto nos permite cambiar el aspecto
particular, images, css, js, favicon etc…

7. Creación de la
carpeta de la skin
Dentro del directorio skin/frontend
Creamos una carpeta para nuestro paquete con el
nombre que queramos
Dentro creamos una carpeta default
Dentro creamos las carpetas
css
js
images

8. Creación de la
carpeta del paquete
Dentro del directorio design/frontend
Creamos una carpeta para nuestro paquete
con el nombre pusimos antes
Dentro creamos una carpeta default
Dentro creamos las carpetas
layout
template

9. Deshabilitar la
cache
Iremos a System->Cache Managment
Seleccionamos todos
cambiamos a deshabilitar
Pulsamos en el botón enviar
Esto permitirá ir viendo los cambios que
vayamos haciendo sin que afecte la cache

10. Selección del
paquete y del tema
Iremos a System->Configuration->Design
En el apartado de paquete seleccionamos el
nombre del paquete
En el apartado de Temas ponemos la skin
creada en ambos directorios de paquete,
default
Aquí si recargamos tendremos un tema
completamente en blanco para empezar a jugar

11. CSS
en el directorio skin/frontend/
paquete/default/css es donde
estarán los ficheros css
El fichero principal es styles.css

12. El paquete base
en el directorio app/design/
frontend/base/default
etc
layout
template

13. El paquete base
en el directorio skin/frontend/base/default
css
favicon.ico
images
js
lib

14. Modificaciones desde
el paquete base
Teniendo en cuenta la skin y el app/design el paquete base se utiliza
como base para el desarrollo de temas visuales
Si un archivo no se encuentra en el paquete o tema actual intentará
utilizar los ficheros que haya en el paquete base
Para modificar aspectos del paquete base hay que replicar las carpetas
y ficheros con sus nombres específicos en el paquete y tema que
estemos manejando en ese momento
Para ayudar al desarrollo de temas hay que ir a System-
>Configuration->Developer
Debug: activar los hints de bloques y templates
Así veremos en el código generado html etiquetas que nos
muestran en que fichero está cada cosa

15. Traducciones de
cadenas
Las traducciones de cadenas están
disponibles en el directorio
app/design/frontend/paquete/tema/
locale/codigo_pais
y en app/locale/codigo_pais
nos entramos con un ficheros csv con
las traducciones por cada modulo

16. Licencia y
Financiación
Este curso ha sido financiado por el
Ayuntamiento de Vitoria-Gasteiz
La licencia de la presentación el CC-
BY-SA-NC 3.0 registrada a nombre de
David Vaquero Santiago
http://creativecommons.org/licenses/
by-nc-sa/4.0/