• : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.
  • : Function ereg() is deprecated in /var/www/investic.net/drupal/includes/file.inc on line 646.

(2) Desarrollando el theme para ANEL. Construyendo page.tpl.php, layout.css,anel.info

Ya tenemos la definición del theme ya ahora toca ponernos a construir el theme...¿por dónde empezamos?

Empezamos trabajando sobre 3 ficheros:
- anel.info (1)
- page.tpl.php (2)
- layout.css (3)

(1) anel.info
Este fichero llevará el nombre del theme. En este caso lo hemos denominado "anel" así que el fichero llevará el mismo nombre.
En anel.info definiremos las regiones definidas anteriormente de la siguiente manera:

regions[left] = Columna izquierda
regions[right] = Columna derecha
regions[seccion_left] = Seccion izquierda
regions[seccion_right] = Seccion derecha
regions[header_left] = Cabecera izquierda
regions[header_right] = Cabecera derecha
regions[footer] = Pie de página
regions[content_bottom] = Contenido inferior

(2) page.tpl.php
En este archivo "llamaremos" y situaremos todas las regiones en pantalla. En este caso utilizamos el theme Basic desarrollado por Raincity Studios el cual nos sirve de base para adaptar nuestro page.tpl.php a nuestro diseño

(3) layout.css
Empezamos creando las cascadas de estilo - CSS con los ids y clases fundamentales para que los elementos fundamentales de las regiones se situen correctamente en pantalla. En este caso utilizaremos el layout.css donde daremos estilo a los identificadores de cabecera, menús superiores, menús laterales y pie de página.

Con estas primeras modificaciones ya podemos tener una primera versión.

Captura de proceso de desarrollo de theme

Tal y como se puede observar en la imagen el desarrollo del theme lo realizamos sobre un drupal con contenido ficticio generado por el generador de contenido del módulo Devel.

Bien, ahora que tenemos la base podemos ponernos a "pintar y colorear" con las cascadas de estilo.

Firmado: Theme Room


Diseño y desarrollo INVESTIC con DRUPAL