temas drupal
DESCRIPTION
Todo lo necesario para entender el desarrollo de Temas en DrupalTRANSCRIPT
Para empezar a ser un Themer● Conocer drupal a nivel básico.http://drupal.org/documentation
● Php a nivel básico.http://php.net/manual/es/index.phphttp://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 imágenes gimp, photoshop, illustrator, etc.
● Buen gusto. Si no lo tienes desarrollalo.http://www.elwebmaster.com/general/como-elegir-esquema-colores-sitio-webhttp://www.elwebmaster.com/general/el-efecto-laberinto-y-como-afecta-el-diseno-de-tu-sitio-webhttp://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 más.
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.phpPermite preprocesamiento de variables para mantener limpios de lógica los archivos de plantilla.
.cssstyle.css es el archivo principal, pueden existir varios otros y también 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 administración del sitio.
Existe una guía para crearlos en http://drupal.org/node/11637
● theme-settings.php.- Puede ser usado para proveer opciones de administración al Tema, más allá del logo, lema, etc.
Guía para construir "advanced features" http://drupal.org/node/177868
● color.inc.- Colocado en una carpeta "color" puede dar soporte al módulo color (que permite el cambio de color de un tema)
Integración con el módulo color http://drupal.org/node/108459
Archivos de plantilla
Consideraciones● Los archivos de plantilla .tpl.php aportan en el diseño
de algún elemento (capa de presentación).● 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 módulo block del núcleo.
Plantilla html.tpl.php
Es el archivo encargado de definir la estructura de la página html. (Muestra <html>, <head> y <body>)Variables php usuales en este template:● $head_title. Título a utilizar en la etiqueta <title>.● $head. Encabezado completo, incluyendo las etiquetas
meta, keyword, etc.● $styles. Código para incluir las hojas de estilo CSS.● $scripts. Código para incluir los archivos javascript.● $page. Contenido de la página 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 envía a html.tpl.php mediante $page● $base_path. Ruta de la instalación 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. Código HTML que muestra la navegación de migas de pan del sitio.
● $front_page. Enlace a la página de inicio del sitio.● $logo. Enlace a la imagen de logo.● $site_name. El nombre del sitio.● $site_slogan. Slogan del sitio
● $title. Título de la página.● $messages. Mensajes de error o notificaciones.● $tabs. Enlaces de las pestañas que se muestran en la
página (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 página.
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 través de la variable $page['content']● $title. El título del nodo.● $content. El contenido del nodo Es un vector que contiene todos los elementos del nodo. Se puede utilizar la función render para imprimir estos elementos (con render($content) imprimimos todos los elementos, con render($content['campo']) imprimimos sólo el campo 'campo'.
● $user_picture. La imagen de usuario del autor del nodo.● $date. Fecha de creación 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. Número 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
página de inicio (página /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 título del bloque.● $content. El contenido del bloque.● $block->module. El módulo que ha generado el bloque.● $block->region. La región 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. Presentación 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. Presentación de la imagen del usuario. modules/user/user-picture.tpl.php.
Plantillas de módulos
Los módulos 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 código 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 imágenes.
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. Además 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 código: base theme = fusion_coredonde "fusion_core" es el nombre del tema baseNota:.Guía más detallada: http://drupal.org/node/225125
● Se pueden tener múltiples niveles de herencia. Un subtema puede declarar otro subtema como base.
Temas base
Están diseñados 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/themeEsquema de archivoshttp://drupal.org/node/171194http://www.drupal.org