Drupal Themingisrael@elizarraraz.com

Themes

•Control del diseño

•HTML, CSS, imágenes, Javascript, etc.

Drupal “Theming”

•Apariencia : Photoshop, Illustrator, Fireworks, etc.

•Hojas de estilo (CSS)

•Adaptar HTML generado por drupal

3 pasos

1.Info Files (.info)

2. Template Files (.tpl.php)

3.Adaptar funciones

Estructura Theme

Estructura Theme1. Info File

2. Template Files .tlp.php

3. Funciones y variables.

Primer Paso: .Info File

•Nombre y descripción

• Screenshot ó imagen

•Core (Versión Drupal)

•CSS

•Regiones

• Features “Características”

Nombre y descripción

name = Drupal México

description = Theme elaborado en el taller de Drupal

Screenshotscreenshot = images/screenshot.png

Core

core = 6.xbase theme = zen

CSSstylesheets[all][] = styles.css

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

Características

features[] = logo

features[] = name

features[] = slogan

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

Templates Básicos

Page.tpl.php

Templates Básicos

block.tpl.php

Templates Básicos

node.tpl.php

Templates Básicos

box.tpl.php

Templates Básicos

comment.tpl.php

Templates dinámicos

Duplicar node.tpl.php

Reenombrar node-nodetype.tpl.php

node-blog.tpl.php

Templates dinámicos

Front disponible en Drupal 6.-x

Templates dinámicos

Templates dinámicos

Importante! Copiar desde el Core al Theme

Templates dinámicos

3 Paso: Funcionestemplate.tpl.php

Consultar API Drupal

http://api.drupal.org

Zen & 960.gs

¿Que demonios es Zen?

Theme Framework

http://drupal.org/project/zen

Zen Garden

http://www.csszengarden.com/

960.gsCSS Framework

Basado en grid de 12 y 16 columnas

960.gs Clases CSS•container

•grid•prefix•suffix•alpha•omega

960.gs ejemplos<div id="page" class="container-16 clear-

block">

CONTENIDO

</div>

960.gsArea disponible 940 px

Padding 10 px por lado