You are on page 1of 17

Temas

Drupal 7
Osvaldo Villarroel Maraon Desarrollador Drupal vacho@koala-soft.com www.koala-soft.com

Para empezar a ser un Themer


Conocer drupal a nivel bsico.
http://drupal.org/documentation

Php a nivel bsico.


http://php.net/manual/es/index.php http://www.desarrolloweb.com/php/

Html.
http://www.desarrolloweb.com/manuales/21/

Css a nivel intermedio - avanzado.


http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

Herramientas para crear, manipular imgenes


gimp, photoshop, illustrator, etc.

Buen gusto. Si no lo tienes desarrollalo.


http://www.elwebmaster.com/general/como-elegir-esquema-colores-sitio-web http://www.elwebmaster.com/general/el-efecto-laberinto-y-como-afecta-el-diseno-de-tu-sitio-web http://www.elwebmaster.com/general/consejos-errores-comunes-diseno-web

Estructura de archivos

.info (imprescindible) Define todo lo que drupal conocer del tema: hojas de estilos, javascripts, regiones de bloque y ms. Archivos de plantilla (template) .tpl.php Definen la estructura del tema. Contienen html y variables php. Generan una salida HTML. Ejem: comment.tpl.php definir como se muestran los comentarios. Pueden estar en la carpeta o en un subdirectorio "templates" template.php Permite preprocesamiento de variables para mantener limpios de lgica los archivos de plantilla. .css style.css es el archivo principal, pueden existir varios otros y tambin se puede organizar todos en una carpeta "css" NOTA: Escribir en sites/all/themes para separar de los Temas del core.

Otros archivos
logo.png.- El logo del tema que generalmente ser
reemplazado por el logo del sitio. screenshot.png.- La pantalla miniatura para el panel de administracin del sitio.

Existe una gua para crearlos en http://drupal.org/node/11637

theme-settings.php.- Puede ser usado para proveer


opciones de administracin al Tema, ms all del logo, lema, etc.
Gua para construir "advanced features" http://drupal.org/node/177868

color.inc.- Colocado en una carpeta "color" puede dar


soporte al mdulo color (que permite el cambio de color de un tema)
Integracin con el mdulo color http://drupal.org/node/108459

Archivos de plantilla
Consideraciones

Los archivos de plantilla .tpl.php aportan en el diseo


de algn elemento (capa de presentacin). Drupal tiene sus propios archivos de plantilla para el caso en que el tema activo no disponga de estos.

Al encontrar drupal un archivo block.tpl.php dentro los archivos del Tema activo proceder a ejecutar este en lugar del distribuido con el mdulo block del ncleo.

Plantilla html.tpl.php
Es el archivo encargado de definir la estructura de la pgina html. (Muestra <html>, <head> y <body>) Variables php usuales en este template:

$head_title. Ttulo a utilizar en la etiqueta <title>. $head. Encabezado completo, incluyendo las etiquetas
meta, keyword, etc. $styles. Cdigo para incluir las hojas de estilo CSS. $scripts. Cdigo para incluir los archivos javascript. $page. Contenido de la pgina en HTML, ya procesado y listo para mostrar en el navegador. Si nuestro Tema no presenta este archivo drupal usa modules/system/html.tpl.php

Plantilla page.tpl.php
Genera el contenido y enva a html.tpl.php mediante $page

$base_path. Ruta de la instalacin de Drupal. $directory. Ruta relativa de la carpeta donde est el
tema del sitio.
Ejemplo :Para referenciar una imagen dentro del tema usamos: <?php print $base_path.$directory ?>/images/cabecera.jpg

$breadcrumb. Cdigo HTML que muestra la navegacin


de migas de pan del sitio. $front_page. Enlace a la pgina de inicio del sitio. $logo. Enlace a la imagen de logo. $site_name. El nombre del sitio. $site_slogan. Slogan del sitio

$title. Ttulo de la pgina. $messages. Mensajes de error o notificaciones. $tabs. Enlaces de las pestaas que se muestran en la
pgina (Ejem: ver y editar un nodo). $node. El Nodo que se esta cargando. $page['content']. Contenido principal en HTML. $page['sidebar_first']. Contenido de la primera columna. $page['sidebar_second']. La segunda columna. $page['header']. El contenido de la cabecera. $page['footer']. Elementos del pie de pgina.

Si nuestro Tema no presenta este archivo drupal usa modules/system/page.tpl.php

Plantilla node.tpl.php
Representa el contenido de un nodo a travs de la variable $page['content']

$title. El ttulo del nodo. $content. El contenido del nodo


Es un vector que contiene todos los elementos del nodo. Se puede utilizar la funcin render para imprimir estos elementos (con render($content) imprimimos todos los elementos, con render($content ['campo']) imprimimos slo el campo 'campo'.

$user_picture. La imagen de usuario del autor del nodo. $date. Fecha de creacin del nodo. $name. El nombre de usuario del autor del nodo. $node_url. La URL del nodo. $type. El tipo del nodo (por ejemplo page, story, blog).

$comment_count. Nmero de comentarios del nodo. $page. TRUE si se est visualizando el nodo completo. $teaser. TRUE si se est visualizando la vista resumen. $promote. TRUE si el nodo est promocionado a la pgina de inicio (pgina /node). $sticky. TRUE si el nodo est fijo al comienzo de listas. $status. TRUE si el nodo est publicado.

Si nuestro Tema no presenta este archivo drupal usa modules/node/node.tpl.php

Plantilla block.tpl.php
Representa el contenido de los bloques.

$block->subject. El ttulo del bloque. $content. El contenido del bloque. $block->module. El mdulo que ha generado el bloque. $block->region. La regin en la que est ubicado el bloque.

Si nuestro Tema no presenta este archivo drupal usa modules/block/block.tpl.php

Otras Plantillas
region.tpl.php. Presentacin de cualquiera de las
regiones del tema.
modules/system/region.tpl.php.

comment.tpl.php. Muestra los comentarios del sitio.


modules/comment/comment.tpl.php.

comment-wrapper.tpl.php. Contenedor para los


comentarios.
modules/comment/comment-wrapper.tpl.php.

user-picture.tpl.php. Presentacin de la imagen del


usuario.
modules/user/user-picture.tpl.php.

Plantillas de mdulos
Los mdulos pueden contener sus propias pantllas. Para modificar una deberemos copiar el archivo .tpl.php a la carpeta del Tema activo.

Modificaciones de Temas
Consideraciones: Actualizar la cach del navegador Ctrl + F5. Actualizar la cach del sitio. Drupal genera cdigo html y se lo entrega al navegador. Proceso: Copiar los archivos deseados del Tema base. Modificar los archivos .tpl.php, css, js segun sea el caso. Modificar archivos de imgenes.

Subtemas
Son usados cuando se quiere crear un tema con base
en otro. Se crean de igual forma que cualquier otro tema y tienen la misma estructura de archivos. Adems heredan los recursos de los temas base. Para crear un subtema:
Forma 1. Creando los archivos uno por uno Forma 2. Crear una copia de la carpeta y renombrar archivos. Luego ingresar en el .info del subtema el cdigo: base theme = fusion_core donde "fusion_core" es el nombre del tema base Nota:. Gua ms detallada: http://drupal.org/node/225125

Se pueden tener mltiples niveles de herencia. Un


subtema puede declarar otro subtema como base.

Temas base
Estn diseados para ser extendidos.

Zen http://drupal.org/project/zen Fusion http://drupal.org/project/fusion Omega http://drupal.org/project/omega NineSixty (960 Grid System) http://drupal. org/project/ninesixty Genesis http://drupal.org/project/genesis Basic http://drupal.org/project/basic AdptiveTheme http://drupal.org/project/adaptivetheme

Los temas base suelen tener indicaciones para la forma de crear un subtema.

Referencias
http://drupal.org/documentation/theme Esquema de archivos http://drupal.org/node/171194 http://www.drupal.org