Drupal Theming Themes Control del diseño HTML, CSS, imágenes, Javascript, etc.

Presentación del tema: "Drupal Theming Themes Control del diseño HTML, CSS, imágenes, Javascript, etc."— Transcripción de la presentación:

1 Drupal Theming israel@elizarraraz.com

2 Themes Control del diseño HTML, CSS, imágenes, Javascript, etc.

3 Drupal Theming Apariencia : Photoshop, Illustrator, Fireworks, etc. Hojas de estilo (CSS) Adaptar HTML generado por drupal

4 3 pasos 1. Info Files (.info) 2. Template Files (.tpl.php) 3. Adaptar funciones

5 Estructura Theme

6 1. Info File 2. Template Files.tlp.php 3. Funciones y variables.

7 Primer Paso:.Info File Nombre y descripción Screenshot ó imagen Core (Versión Drupal) CSS Regiones Features Características

8 Nombre y descripción name = Drupal México description = Theme elaborado en el taller de Drupal

9 Screenshot screenshot = images/screenshot.png

10 Core core = 6.x base theme = zen

11 CSS stylesheets[all][] = styles.css

12 Definir Regiones regions[left] = left sidebar regions[right] = right sidebar regions[navbar] = navigation bar regions[content_top] = content top regions[header] = header regions[footer] = footer

13 Características features[] = logo features[] = name features[] = slogan

14 2 paso : Template Files (.tpl.php) Existen 5 templates básicos Page.tpl.php block.tpl.php node.tpl.php box.tpl.php comment.tpl.php

15 Templates Básicos Page.tpl.php

16 Templates Básicos block.tpl.php

17 Templates Básicos node.tpl.php

18 Templates Básicos box.tpl.php

19 Templates Básicos comment.tpl.ph p

20 Templates dinámicos Duplicar node.tpl.php Reenombrar node-nodetype.tpl.php node- blog.tpl.php

21 Templates dinámicos Front disponible en Drupal 6.-x

22 Templates dinámicos

23 Importante! Copiar desde el Core al Theme

24 Templates dinámicos

25 3 Paso: Funciones template.tpl.php Consultar API Drupal http://api.drupal.org

26 Zen & 960.gs

27 ¿Que demonios es Zen? Theme Framework http://drupal.org/project/zen

28 Zen Garden http://www.csszengarden.comhttp://www.csszengarden.com/

29 960.gs CSS Framework Basado en grid de 12 y 16 columnas

30 960.gs Clases CSS container grid prefix suffix alpha omega

31 960.gs ejemplos CONTENIDO

32 960.gs Area disponible 940 px Padding 10 px por lado