Para crear un tema para Drupal desde cero debe conocerse algo de programacin (php) y algo de html.

Lo primero que debe hacerse es crear el directorio donde vamos a guardar nuestros archivos. Se recomienda usar la carpeta de themes que se encuentra dentro de la carpeta sites, la ruta es sites all (o el nombre del sitio) themes. !n nuestro caso vamos a crear una carpeta llamada mi"tema y as# llamaremos el tema nuevo que vamos a utili$ar. !l siguiente paso es crear los archivos b%sicos de un tema, ellos son un archivo in&o que va a guardar la in&ormacin de versin, de autor, de estilos y de regiones (que veremos m%s adelante)' el otro archivo es page.tpl.php que llevar% todo el html de nuestro tema' un archivo

de (!)D*! para dar in&ormacin de uso y un archivo donde se guardar%n los estilos del tema. !l primer paso es crear un archivo de in&ormacin de tema, que en nuestro caso llamaremos de la misma &orma que nuestro directorio+ mi"tema.in&o. !n el archivo debe e,istir inicialmente el nombre del tema (name), una descripcin (description), aqu- drupal va dirigido (core), el nombre del archivo de estilo (stylesheet),la versin de nuestro tema (version) y si se quiere la &echa de modi&icacin del archivo en &ormato timestamp (datestamp).
name = Mi Tema description = Un tema para probar Drupal core = 7.x stylesheets[all][] = style.css ; stylesheets[print][] = print.css version = " .!" pro"ect = "drupal" ; # !#$ %$ # datestamp = "!&&'(''&#%"

.on este archivo creado, podemos ir al men/ de administracin de )pariencia y ver qu- el tema ya es reconocido por Drupal para ser elegido. Para el siguiente paso hay que de&inir las regiones o $onas que van a ser usadas dentro del tema. !l tema b%sico de Drupal tiene un encabe$ado, dos barras laterales a cada lado del contenido y un pie. !sas regiones pueden crearse libremente y deben ser de&inidas en el archivo in&o para que Drupal las recono$ca y las despliegue al crear las variables de la p%gina a mostrar. .ada regin debe crearse con un nombre reconocible tanto para el usuario como para Drupal.

De&inir las regiones es de&inir cmo queremos que el usuario vea nuestro sitio. Puede ser simple su uso, o puede ser un dise0o m%s complicado como se ve en la imagen 1. Para nuestro sitio usaremos las regiones como est%n dise0adas en la imagen 2 y crearemos varios divs en una p%gina html que llamaremos page.tpl.php. )dem% agregaremos al archivo mi"tema.in&o la in&ormacin del total de regiones que creamos con sus nombres y descripciones. mi_tema.info
name = Mi Tema description = Un tema para probar Drupal core = 7.x stylesheets[all][] = style.css ; stylesheets[print][] = print.css re)ions[header] = *eader re)ions[menu] = Menu re)ions[banner] = +anner re)ions[content] = ,ontent re)ions[ri)ht-a] = .i)ht sidebar / re)ions[ri)ht-b] = .i)ht sidebar + re)ions[0ooter] = 1ooter ; # !#$ %$ # version = " .!" pro"ect = "drupal" datestamp = "!&&'(''&#%"

3os damos cuenta que cada regin lleva un nombre interno que se escribe dentro de corchetes y un nombre descriptivo que es como lo ver% el usuario en la pagina de con&iguiracin de bloques. Luego vamos a crear nuestra p%gina de plantilla que muestre este html en el sitio y poder asignar la plantilla como predeterminada. !ste es un html b%sico que puede generar la p%gina que queremos despu-s de agregarle estilos. Primero lo a0adimos sin agregarle nada. 4 vamos y lo activamos en la con&iguracin de apariencia del sitio. page.tpl.php
23D4,T567 html8 2html8 2head8 29head8 2body8 2div id=":rapper"8 2div id="header"8*eader29div8 2div id="menu"8Menu29div8 2div id=":rapper$main"8 2div id=":rapper$content"8 2div id="banner"8+anner29div8 2div id="content"8,ontent29div8 29div8 2div id="ri)ht-a"8.i)ht /29div8

2div id="ri)ht-b"8.i)ht +29div8 2div class="clear"829div8 29div8 2div id="0ooter"81ooter29div8 29div8 29body8 29html8

Si se recuerda en el archivo de in&ormacin de tema, un par%metro creado a0ad#a un archivo de estilo, lo creamos para que tenga cara de nuestro dise0o el sitio. 5gual limpiamos el archivo page.tpl.php porque si revisamos el cdigo &uente, Drupal ya est% incl6uyendo cdigo predeterminado como las cabeceras de un sitio html. 4 separamos el header y el &ooter en archivos di&erentes para su &%cil administracin. page.tpl.php
2;php re<uire-once="header.tpl.php">; ;8 2div id=":rapper$main"8 2div id=":rapper$content"8 2div id="banner"8+anner29div8 2div id="maion"8,ontent29div8 29div8 2div id="ri)ht-a"8.i)ht /29div8 2div id="ri)ht-b"8.i)ht +29div8 2div class="clear"829div8 29div8 2;php re<uire-once="0ooter.tpl.php">; ;8

header.tpl.php
2div id=":rapper"8 2div id="header"8*eader29div8 2div id="menu"8Menu29div8

footer.tpl.php
2div id="0ooter"81ooter29div8 29div8

style.css
? @ mar)inA ; paddin)A ; B .clear @ clearA both; B C:rapper @ :idthA D' px;

mar)in$le0tA auto; mar)in$ri)htA auto; B Cheader @ :idthA D% px; paddin)A %px; bacE)round$colorA C++77DD; B Cmenu @ :idthA D% px; paddin)A %px; bacE)round$colorA C7777++; B C:rapper$main @ :idthA D' px; B C:rapper$content @ :idthA F( px; mar)in$ri)htA ! px; 0loatA le0t; B Cbanner @ :idthA F( px; bacE)round$colorA C++77++; B Cmaion @ :idthA F( px; bacE)round$colorA C77,,DD; B Cri)ht-a @ :idthA ## px; mar)in$le0tA ! px; mar)in$ri)htA ! px; bacE)round$colorA C++77++; 0loatA le0t; B Cri)ht-b @ :idthA ## px; mar)in$le0tA ! px; bacE)round$colorA C++77++; 0loatA le0t; B C0ooter @ :idthA D% px; paddin)A %px; bacE)round$colorA C77DDDD; B

)hora que ya hay un borrador del tema, se debe mostrar el contenido del sitio que en este momento no se est% mostrando. Para esto a0adimos el cdigo php en cada una de las regiones creadas. Para probar se puede a0adir el cdigo siguiente cambiando el contenido del div main por el cdigo que imprime este contenido, este cdigo lleva el nombre de la regin dentro de corchetes. 4 agregando un bloque a este contenido en el administrador de 7loques.
re)ions[content] = ,ontent 2div id="main"82;php print render= Gpa)e[HcontentH] >; ;829div8

5gual con el header y con el &ooter y con todos los otras regiones del tema.
re)ions[header] = *eader 2div id="header"82;php print render= Gpa)e[HheaderH] >; ;829div8 re)ions[0ooter] = 1ooter 2div id="0ooter"82;php print render= Gpa)e[H0ooterH] >; ;829div8

)l header adem%s se le agrega la in&ormacin de logo por cdigo php. !l logo es un archivo que se a0ade al tema con e,tensin png que puede ser cambiado en las opciones que se agregan al mdulo por de&ecto. header.tpl.php
2div id=":rapper"8 2div id="header"8 2;php i0 =Glo)o>A ;8 2div id="lo)o"8 2im) src="2;php print Glo)o; ;8" alt="2;php Gsite-name; ;8" title="2;php print Gsite-name; ;8" id="lo)o" 98 29div8 2;php endi0; ;8

print

2;php print render= Gpa)e[HheaderH] >; ;8 29div8 2div id="menu"82;php print render= Gpa)e[HmenuH] >; ;829div8

)dem%s hay que agregar dentro del cdigo de contenido dos espacios especiales que son el de mensa6es internos de drupal, de la navegacin por tabs y tambi-n puede incluir la navegacin por migajas de pan (breadcrumbs). )dem%s si se quiere mostrar bloques en caso de que solo tengan contenido y no en todo momento, puede usarse la condicin if (si) para que lo esconda. !n este caso se esconde el banner si no es necesario. page.tpl.php
2;php re<uire-once="header.tpl.php">; ;8 2div id=":rapper$main"8 2div id=":rapper$content"8

<?php if ($banner): ?> 2div id="banner"8+anner29div8 <?php endif; ?> 2div id="main"8 2div id="breadcrumb"82;php print Gbreadcrumb; ;829div8 2;php i0 =Gmessa)es>A ;8 2div id="messa)es"82;php print Gmessa)es; ; 829div8 2;php endi0; ;8 2div class="clear0ix"82;php i0 =Gtabs>A ;82; php print render=Gtabs>; ;829div82;php endi0; ;8 2;php i0 =Gpa)e>A ;8 2h#2;php print Gtitle-attributes; print Gtitle; ;829h#8 2;php endi0; ;8 2;php 829div8 29div8 2div id="ri)ht-a"82;php render= Gpa)e[Hri)ht-aH] >; ;829div8 2div id="ri)ht-b"82;php render= Gpa)e[Hri)ht-bH] >; ;829div8 2div class="clear"829div8 29div8 2;php re<uire-once="0ooter.tpl.php">; ;8 print print print render= Gpa)e[HcontentH] >; ; ;882;php

Si se quieren a0adir im%genes dentro del tema para ser publicadas en regiones espec#&icas, podemos hacer el llamado a la misma usando &unciones internas de Drupal. !s recomendable usar una carpeta para organi$ar las im%genes igual que otra que se puede llamar 6s para el 6avascript. !n este e6emplo estamos mostrando en la regin del contenido una imagen permanentemente.
2im) src="2;php print base-path=> . path-to-theme=>; ;89ima)es9banner.pn)" 98

Para &inali$ar, se debe crear una imagen de la pantalla para mostrarla en la p%gina de seleccin de temas. !sta imagen llamada screenshot.png debe ser de 189 , 1:8 pi,eles. Si se conoce algo de programacin, se pueden llenar ciertas regiones por programacin sin permitir cambiarlas como por e6emplo ag&egar ala regin men/, el men/ seleccionado como men/ principal (primary menu) en el sitio. Para esto se usa el archivo template.php que se crea en la misma carpeta del tema y que mediante hooks (&unciones que permiten interactuar con el n/cleo y con otros mdulos al momento de generar el

cdigo de drupal) nos permite modi&icar la salida &inal. !ste e6emplo ilustra la lectura del men/ principal+ template.php
2;php 0unction mi-tema-preprocess-pa)e=IGvarsJ GhooE> @ i0 =isset=Gvars[Hmain-menuH]>> @ Gvars[Hprimary-navH] = theme=HlinEs--system-main-menuHJ array= HlinEsH =8 Gvars[Hmain-menuH]J HattributesH =8 array= HclassH =8 array=HlinEsHJ Hmain$menuH>J >J Hheadin)H =8 array= HtextH =8 t=HMain menuH>J HlevelH =8 Hh#HJ HclassH =8 array=Helement$invisibleH>J > >>; B else Gvars[Hprimary-navH] = 1/KL7; B ;8

Para crear la &uncin debemos llamarla con el nombre del tema antes de preprocess"page (que es la &uncin de preprocesamiento de p%gina). 4 lo que crea la variable ;primary"nav que imprime este men/.
2div id="menu"82;php print Gprimary-nav; ;829div8

)s# es un tema en Drupal a grandes rasgos. Pueden descargar la plantilla &uncional perocon bastantes &alencias en estilos y dise0o. Slo es una muestra de cmo podemos generar una plantilla en Drupal desde cero. <ay otras &ormas de crearlas que es usando subtemas de temas generados como =mega y >en que son proyectos que se deber#an revisar para la generacin de temas. ?racias.