1. MÓDULO 6
Configurar el aspecto visual de la web.
Theming con Drupal

2. MÓDULO 6:
Theming con Drupal
Índice:
1. Introducción
2. Módulos que mejoran el aspecto visual
3. Css, Plantillas y Funciones
4. Entorno Drupal

3. MÓDULO 6:
Theming con Drupal
Introducción:
En este módulo se pretende hacer una
introducción al theming con drupal.
Se presentarán módulos que nos ayuden a la
mejora visual de la página web.
Se mostrarán los elementos básicos de un tema
de Drupal.
Se presentarán las herramientas necesarias para
la creación de temas.

4. MÓDULO 6:
Theming con Drupal
Módulos :
• Vertical tabs.
• Tabs+ Cckfieldgrouptabs.
• Homebox.
• Nice Menús, Superfish Menu.
• Panels.

5. MÓDULO 6:
Theming con Drupal
Práctica:
Museo con Panels

6. MÓDULO 6:
Theming con Drupal
Algunas definiciones :
• Tema: Conjunto de archivos relacionados entre sí que son
responsables de controlar el aspecto visual de una página
web.
• Motor de temas (theme engine): Colección de ficheros y
scripts que interpretan el lenguage de programación
utilizado y lo procesan presentándolo en un formato
determinado.
• Región: Lugar dentro de la distribución de la pagina donde
podemos poner contenido. Por ejemplo, bloques.

7. MÓDULO 6:
Theming con Drupal
Cómo muestra Drupal el contenido :
Pagina web
Estilo final y disposición del
contenido
Tema
Formateo inicial
Motor del tema
Manipulacion del contenido
Drupal Core
Contenido sin formatear de
Contenido la BD

8. MÓDULO 6:
Theming con Drupal
Extesiones de un tema :
• .info: Archivo de configuración del Tema. Podríamos decir
que es un archivo similiar a los .INI
• .tpl.php: Extensión utilizada por el sistema de plantillas
PHPTemplate.
• .css: Hojas de estilos.
Nombre_tema.info + Page.tpl.php + Style.css
Tema

9. MÓDULO 6:
Theming con Drupal
Fichero .info:
Archivo con entradas del tipo clave = valor
• Comentarios con “;”
• Claves:
• name • regions
• description • features
• screenshot • stylesheets
• version • scripts
• core • php
• engine
• base theme

10. MÓDULO 6:
Theming con Drupal
Interceptar y redefinir : Css
Hoja de
estilos del
Style.css tema activo
Hojas de
CSS CSS CSS CSS estilos de los
modulos

11. MÓDULO 6:
Theming con Drupal
Plantillas y Funciones:
• Herramientas a utilizar:
• Devel.
• Theme Developer.
• Firebug.
Todas las plantillas y funciones pueden
ser sobreescritas

12. MÓDULO 6:
Theming con Drupal
Sustitución de plantillas:
Copiar la plantilla Pegarla en el directorio del tema
(respetando el nombre)
Limpiar el registro del Hacer los cambios y
tema guardar
Administración | Configuración del sitio | Rendimiento
Limpiar datos de la cache

13. MÓDULO 6:
Theming con Drupal
Redefinir plantillas: Utilización de sugerencias
Page-node-x.tpl.php
Page-node.tpl.php
Page.tpl.php
Las sugerencias sólo funcionan si se encuentran en el mismo
directorio que la plantilla base

14. MÓDULO 6:
Theming con Drupal
Redefinir funcines: template.php
Crear fichero template.php Buscar la función a redefinir
Renombrar Copiar la función
Realizar cambios Limpiar cache

15. MÓDULO 6:
Theming con Drupal
Nomenclatura de las funciones
• Nombre base: theme_nombrefuncion();
• theme_breadcrumb();
• Posibles nombres:
• nombretema_nombrefuncion (); garland_breadcrumb();
• nombremotorplantilla_nombrefuncion(); phptemplate_breadcrumb();
• nombre base.

16. MÓDULO 6:
Theming con Drupal
Redefinir funcines: Plantillas dedicadas
Crear fichero .tpl.php Renombrar fichero
Copiar la función Buscar la función a redefinir
Realizar cambios Limpiar cache
Theme_coment_view Coment-view.tpl.php

17. MÓDULO 6:
Theming con Drupal
Práctica:
Museo con Panels,
plantillas, funciones y css

18. MÓDULO 6:
Theming con Drupal
RESUMEN:
En este módulo hemos aprendido a:
• Instalar módulos que mejoran el aspecto visual.
• Los principios básicos de “theming con drupal”.