Un sitio en Drupal paso a paso. Parte 4

Un sitio en Drupal paso a paso (Parte 4 de 6)

Una de los temas más interesantes a la hora de aprender Drupal es como modificar lo que el usuario final ve en el sitio terminado.

El Theme es un conjunto de archivos que definen como será el aspecto final del sitio. Para muchos diseñadores webs acostumbrados a maquetar con HTML y CSS no será una dificultad aprender a hacer un Theme para Drupal.

Sin embargo existen una serie de detalles y formas de trabajar que deben conocerse para entender como empezar a desarrollar un Theme.

Desde cero o …

Drupal.org provee una serie de themes listos para utilizarse. Al igual que un módulo estos pueden descargarse e instalarse y automáticamente se podrá observar el cambio visual en todo el sitio.

Para desarrollos profesionales no siempre se puede optar por un diseño prefabricado. Generalmente existe un layout predefinido que hay que seguir, lo que el cliente quiere para su sitio.

Entonces surgen dos posibilidades. La primera es adaptar un theme existente modificando el CSS y algunos archivos más para obtener el nuevo diseño. La segunda opción es construir un theme desde cero.

Por extraño que parezca, es más simple y habitual recurrir a modificaciones de themes existentes que a crear uno nuevo desde cero. Y existe una razón muy fuerte para esto, hacer un theme desde cero puede ser una tarea realmente difícil.

Debido a esto último un grupo de desarrolladores han diseñado una serie de Themes especialmente creados para ser modificados fácilmente y adaptados a las necesidades de cada uno. Se destacan Zen, Clean y Artists C01 entre otros. Aunque últimamente esta lista ha crecido mucho y se agregan a la lista Stark, Basic, Foundation, y todo tema que a simple vista parezca demasiado "blanco".

Un subtheme de Zen

El Theme Zen

Para darle el aspecto visual al sitio se creó un subtheme de Zen. Para quienes no lo conozcan Zen es un Theme de Drupal que tiene como características principales su buena documentación, y su gran cantidad de selectores de CSS listos para usar. Además permite crear sub temas en base a uno más general. De esta forma se pueden reutilizar diseños existentes o definir hojas de estilos comunes para todos.

Para crear un subtheme de Zen se debe descargar el paquete desde la página principal del proyecto http://drupal.org/project/zen y descomprimir el archivo tar.gz en la carpeta /sites/all/themes del directorio donde esta instalado Drupal.

Una vez hecho esto, se debe crear una nueva carpeta con el nombre del tema, en este caso el nombre elegido fue cuenco.

Usando comandos de Linux:

#crear el directorio themes en sites/all si no existe
cd /var/www/apache2-default/drupal6/sites/all
mkdir themes
#Descargamos zen en este directorio (Puede que no sea la versión 1.1 la actual)
cd themes
wget http://ftp.drupal.org/files/projects/zen-6.x-1.0.tar.gz
#descomprimimos zen
tar xzvf zen-6.x-1.0.tar.gz
#creamos un nuevo directorio en su interior con el nombre del sub tema
cd zen
mkdir cuenco
#copiamos los archivos de la carpeta STARTERKIT al nuevo directorio creado
cp -R STARTERKIT/* cuenco

STARTERKIT es una base para que el diseñador pueda crear su propio subtema. Aún faltan dos pasos para que zen reconozca el nuevo theme. Por un lado la documentación oficial indica que hay que reemplazar todas las STARTERKIT por el nombre de nuestro theme, en este caso cuenco.
Por lo tanto, donde diga por ejemplo:

<?php

function STARTERKIT_preprocess_page(&$vars) {
  $vars['sample_variable'] = t('Lorem ipsum.');
}

?>

Deberá quedar:

<?php

function cuenco_preprocess_page(&$vars) {
  $vars['sample_variable'] = t('Lorem ipsum.');
}

?>

Los reemplazos deben hacerse en los archivos .php que se encuentren en el directorio del nuevo Theme creado.

El último paso consiste en la elección del layout del sitio. Zen provee dos opciones de trabajo. Un diseño Liquido, y uno Estático. Si se opta por un layout líquido, se deberá copiar el archivo layout-liquid.css al directorio cuenco. En caso de elegir un diseño estático se copiará layout-fixed.css.

En cualquiera de los dos casos se deberá renombrar el archivo con el nombre layout.css

#copiamos el archivo
cd /var/www/apache2-default/drupal6/sites/all/themes/zen
cp layout-fixed.css cuenco
#y lo renombramos
cd cuenco
mv layout-fixed.css layout.css

Un poco de CSS:

El theme después de aplicar Css

Explicar paso a paso como se creó el aspecto visual de cada elemento del sitio seria un desperdicio de tiempo.

De hecho esto es algo muy particular de cada diseñador. No me considero un experto en css y por lo tanto muchas cosas probablemente se puedan resolver de otro forma. Lo que sigue es el archivo cuenco.css, aquí alojé todos los estilos propios del tema. En verdad no es una forma muy profesional de trabajar. Hay quienes separan los archivos css según el tema o las secciones que modifiquen. Pero en este caso la utilidad se encuentra en que puedo mostrar en un solo lugar, las diferencias que se aplican con respecto al diseño original de Zen.

El archivo de css personalizado puede verse aquí.

Como se dijo antes, Zen trae dos layouts definidos. Uno líquido, en donde se las diferentes secciones se estiran o comprimen a medida que la ventana del navegador cambia de tamaño. Y otro estático en donde todas las secciones mantienen sus dimensiones.

Para que el Theme reconozca el archivo CSS es necesario agregarlo en el archivo cuenco.info. Esto es nuevo para todos los themes de Drupal 6.

stylesheets[all][]   = layout.css
;stylesheets[all][]   = html-elements.css
; stylesheets[all][] = tabs.css
; stylesheets[all][] = messages.css
; stylesheets[all][] = block-editing.css
; stylesheets[all][] = wireframes.css
stylesheets[all][]   = cuenco.css
stylesheets[all][]   = garland.css
stylesheets[print][] = print.css

Todas las hojas de estilo comentadas con un punto y coma seran cargadas desde el theme Zen, he aquí una de las ventajas de usar Zen. Algunos habrán notado la presencia del archivo garland.css. No es un error, personalmente me gusta como garland trata las tablas y los fieldsets colapsables. Por eso copie esa parte del css de garland y la incluí en mi propio tema.

Una de las cosas que pude lograr en este tema, que no había podido lograr antes, es no modificar el template de zen para colocar los menús primarios en
el header. Existe un método a través de Css que permite mover el navbar dentro del div header. Esto permite hacer temas con los menus organizados como en drupal.org y en muchisimos otros sitios que usan estos diseños.

Diseño simplificado del sitio

Las plantillas tpl en Drupal

Sin embargo conocer las plantillas y su funcionamiento puede hacer que el tema a crear sea verdadermente flexible.

Sin entrar en demasiados detalles, Drupal utiliza los archivos con extensión tpl.php para generar el HTML final del sitio. Podría entenderse como una matriz para hacer HTML en base a ciertos datos que Drupal le envia a la plantilla.

La plantilla page.tpl.php es la encargada de realizar el render general del sitio. Es como el esqueleto general. Dentro de este se ubicaran los menús, los bloques, los contenidos, etc.

Para modificar la plantilla de zen se pueden hacer dos cosas. Una es modificarla directamente desde el directorio zen/ y la otra es copiar esa plantilla dentro del subtema. Esta ultima opción hace que el subtema utilice la plantilla modificada en vez de la que provee Zen por defecto y así se evita alterar la plantilla page.tpl.php para todos los subtemas existentes.

Mi recomendación personal. Modificar lo menos posible las plantillas. Esto permite que las actualizaciones del theme de drupal sea lo menos dolorosa posible en un futuro.

La principal razón para modificar una plantilla es para agregarle nuevas regiones. Existen otros métodos que se verán más adelante en este artículo para modificar algunos componentes dentro de la plantilla.

Otras regiones.

Una de las novedades que incluyen los temas en Drupal 6 es que se pueden indicar las regiones de los temas directamente desde el archivo .info. De esta forma, lo que en drupal 5 se habría hecho asi:

Dentro del archivo template.php escribir:

<?php

function cuenco_regions() {
  return array(
    'left' => t('left sidebar'),
    'right' => t('right sidebar'),
    'navbar' => t('navigation bar'),
    'content_top' => t('content top'),
    'content_bottom' => t('content bottom'),
    'header' => t('header'),
    'pre_footer' => t('pre footer'), //nueva región
    'footer' => t('footer'),
    'closure_region' => t('closure'),
  );
}

?>

En Drupal 6 se hace de esta forma:

Dentro del archivo cuenco.info

regions[left]           = left sidebar
regions[right]          = right sidebar
regions[navbar]         = navigation bar
regions[content_top]    = content top
regions[content_bottom] = content bottom
regions[header]         = header
regions[pre_footer]     = pre_footer
regions[footer]         = footer
regions[closure_region] = closure

Sin embargo, tanto en Drupal 5, como en Drupal 6 es necesario agregar una modificación al template page.tpl.php

    <div id = "pre_footer">
      <div id ="pre_footer-inner">
       
<?php print $pre_footer;?>

      </div>
    </div>

Este código le indica al tema donde imprimir el contenido de los bloques alojados en la región. Dicho de otra forma, $pre_footer será reemplazado por todos aquellos bloques que esten activos en la región "Pre footer".

Widgets para los comentarios.

Cuando un artículo posee comentarios se puede observar en el extremo superior derecho un dibujo con el número de comentarios del nodo. Para realizar esto es necesario modificar otra plantilla. La plantilla de los nodos.

Widget de comentarios

Así como page.tpl.php el la plantilla genérica para todo el esqueleto del sitio, existe node.tpl.php que es la plantilla genérica para imprimir el contenido de un nodo.

Si se modifica esta plantilla se cambiará el aspecto de cómo se imprime cada nodo del sitio. En caso de solo querer cambiar el estilo de un tipo de contenido se puede usar por ejemplo node-articulo.tpl.php que cambiaría el estilo solo para el tipo de contenido artículo.

El cambio en la plantilla fue simple. Solo se agregó el siguiente código sobre el div con clase “content”

<?php

 print $comment_widget; 

?>

Ahora, $comment_widget no existe. Esto es una construcción propia de este sitio. Para definir el valor de la variable $comment_widget se debe modificar el archivo template.php de la siguiente forma.

<?php

function cuenco_preprocess_node(&$vars) {
  if($vars['comment_count']) {
    $vars['comment_widget'] = '<a href = "#comments"><div class = "comment_widget">'. format_plural($vars['comment_count'], '1 Comment', '@count Comments') .'</div></a>';
  }
}

?>

Esta función es la encargada de crear las variables “personalizadas” para la plantilla del nodo. Por suerte zen ya da la estructura de la función para que solo tengamos que agregar el código en su interior.

Más variables:

El widget para los comentarios es solo un ejemplo de la potencia de las variables. Para este theme definí algunas variables que sobreescriben el contenido de otras ya existentes.

Por ejemplo, en este tema visual, tanto el logo, como el nombre del sitio, son imágenes. En el template page.tpl.php este codigo está definido como:

<?php if ($logo): ?>

    <div id="logo"><a href="
<?php print $front_page; ?>
" title="
<?php print t('Home'); ?>
" rel="home">
      <img src="
<?php print $logo; ?>
" alt="
<?php print t('Home'); ?>
" id="logo-image" /></a>
    </div>
 
<?php endif; ?>

 
<?php if ($site_name): ?>

   
<?php if ($title): ?>

      <div id="site-name"><strong>
        <a href="
<?php print $front_page; ?>
" title="
<?php print t('Home'); ?>
" rel="home">
       
<?php print $site_name; ?>

        </a>
      </strong></div>
   
<?php else: ?>

      <h1 id="site-name">
        <a href="
<?php print $front_page; ?>
" title="
<?php print t('Home'); ?>
" rel="home">
       
<?php print $site_name; ?>

        </a>
      </h1>
   
<?php endif; ?>

 
<?php endif; ?>

Ahora bien, ¿Cómo hacer que $site_name sea una imagen? Nuevamente las variables permiten modificar este valor.

Con esta simple función, la variable site_name (cuyo valor es el nombre del sitio) es reemplazada por una imágen:

<?php

function cuenco_preprocess(&$vars, $hook) {
  $site_name = $vars['site_name'];
  $vars['site_name'] = theme_image(path_to_theme() . '/images/logo_text.png', $site_name, t('Home'));
}

?>

Comentarios finales:

A simple vista puede parecer que hacer un theme en drupal es algo complicado. Bien, no es muy fácil al principio. Pero con un poco de práctica se pueden lograr diseños muy vistosos, no como este :), que respondan a detalles y configuraciones del sitio. Y cuyas modificaciones futuras se basen solo en cambios en el CSS.

Muchas personas, entre las que me incluyo, recomiendan no utilizar un único archivo de Css para todo el theme. Esto simplifica el mantenimiento futuro. Sin embargo en este caso opte por centralizar todo para simplificar las explicaciones.

Lo que queda es puro css. Explicar cada detalle no tiene sentido, y cualquier diseñador web conociendo el funcionamiento de las plantillas en drupal debe estar en condiciones de crear su propio theme.

Para aquellos interesados en profundizar más sobre la creación de themes en Drupal existen algunos libros (en inglés) como Drupal 5 Themes o su versión para Drupal 6.

La documentación de Zen, o los videos de la documentación del theme Genesis también son de gran ayuda. Aunque ambos están también en inglés.

Por último, les recomiendo este artículo en español: http://investic.net/blog/miren/desarrollo_theme_definicion en el se explica muy bien un caso real. Especialmente en lo que refiere al diseño inicial y la metodología a utilizar.

Te invito a leer también...

Compartir este material en...

Comentarios

Gracias por enseñarnos de una manera tan fácil algo que por nuestra cuenta sería emplear muchísimas horas de estudio y prueba.

en este artículo me ha quedado claro que documentos hay que modificar, pero me he perdido un poco en qué sección de los documentos hay que insertar en código.

muchas gracias por todo.

Muchas gracias por compartir tu gran sabiduría con la comunidad.

Sólo una pregunta de novato, puedes explicar cómo se hace para tener diferente número de columnas en la parte central, como tienes tú en la página principal http://cuencodigital.com, aparentemente hay una sóla columna en la parte central, pero dentro del div content hay 3 divs de la clase topic y dentro etiquetas dt que hacen de "columnas".

Un saludo

Alguien hizo esta misma pregunta en este mensaje del foro puse la respuesta allí.

Hola:

Primero que todo, gracias por tu valioso tiempo. Yo empecé hace poco con joomla y la verdad me resulto un "arroz con chorizo". Decidí probar con Drupal y lo encuentro muy organizado y mucho más amigable, y de la forma que tu los explicas me da más animo de seguir adelante. Todo vá muy bien pero me perdí pues no veo en que momento nombraste el archivo "cuenco.css" ni donde va colocado. Otra duda es que mi versión de Drupal (6.19) el archivo "layout-liquid.css" no se encuentra en el directorio "zen", sino en "/zen/zen-internals/css/" nombrado en "zen-liquid.css". Quisiera saber si estamos hablando del mismo archivo o será que estoy más perdido que un "juey vizco". >:(

Gracias por tu gran ayuda, espero hacer de tu sitio mi escuela personal.

Hola José:

No, no estás perdido, el problema es que el theme zen cambió de la versión 1.x a la 2.x durante el tiempo que lleva escrito este artículo.

Por ahora te recomiendo que leas el archivo README.txt de la versión 2.x del theme zen. Ahi estan explicados los pasos básicos para crear un subtheme de zen usando la última versión estable.

Saludos