Download - Drupal Theming
![Page 2: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/2.jpg)
Themes
•Control del diseño
•HTML, CSS, imágenes, Javascript, etc.
![Page 3: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/3.jpg)
Drupal “Theming”
•Apariencia : Photoshop, Illustrator, Fireworks, etc.
•Hojas de estilo (CSS)
•Adaptar HTML generado por drupal
![Page 4: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/4.jpg)
3 pasos
1.Info Files (.info)
2. Template Files (.tpl.php)
3.Adaptar funciones
![Page 5: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/5.jpg)
Estructura Theme
![Page 6: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/6.jpg)
Estructura Theme1. Info File
2. Template Files .tlp.php
3. Funciones y variables.
![Page 7: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/7.jpg)
Primer Paso: .Info File
•Nombre y descripción
• Screenshot ó imagen
•Core (Versión Drupal)
•CSS
•Regiones
• Features “Características”
![Page 8: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/8.jpg)
Nombre y descripción
name = Drupal México
description = Theme elaborado en el taller de Drupal
![Page 9: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/9.jpg)
Screenshotscreenshot = images/screenshot.png
![Page 10: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/10.jpg)
Core
core = 6.xbase theme = zen
![Page 11: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/11.jpg)
CSSstylesheets[all][] = styles.css
![Page 12: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/12.jpg)
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
![Page 13: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/13.jpg)
Características
features[] = logo
features[] = name
features[] = slogan
![Page 14: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/14.jpg)
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
![Page 15: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/15.jpg)
Templates Básicos
Page.tpl.php
![Page 16: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/16.jpg)
Templates Básicos
block.tpl.php
![Page 17: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/17.jpg)
Templates Básicos
node.tpl.php
![Page 18: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/18.jpg)
Templates Básicos
box.tpl.php
![Page 19: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/19.jpg)
Templates Básicos
comment.tpl.php
![Page 20: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/20.jpg)
Templates dinámicos
Duplicar node.tpl.php
Reenombrar node-nodetype.tpl.php
node-blog.tpl.php
![Page 21: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/21.jpg)
Templates dinámicos
Front disponible en Drupal 6.-x
![Page 22: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/22.jpg)
Templates dinámicos
![Page 23: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/23.jpg)
Templates dinámicos
Importante! Copiar desde el Core al Theme
![Page 24: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/24.jpg)
Templates dinámicos
![Page 26: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/26.jpg)
Zen & 960.gs
![Page 27: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/27.jpg)
¿Que demonios es Zen?
Theme Framework
http://drupal.org/project/zen
![Page 28: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/28.jpg)
Zen Garden
http://www.csszengarden.com/
![Page 29: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/29.jpg)
960.gsCSS Framework
Basado en grid de 12 y 16 columnas
![Page 30: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/30.jpg)
960.gs Clases CSS•container
•grid•prefix•suffix•alpha•omega
![Page 31: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/31.jpg)
960.gs ejemplos<div id="page" class="container-16 clear-
block">
CONTENIDO
</div>
![Page 32: Drupal Theming](https://reader035.vdocuments.us/reader035/viewer/2022062500/568158b1550346895dc5fef5/html5/thumbnails/32.jpg)
960.gsArea disponible 940 px
Padding 10 px por lado