Páginas

lunes, 11 de noviembre de 2013

Crea un Template Drupal



Hoy crearemos un template Drupal.
1º Crea un directorio en tu site. Ejemplo: "Mitema" (Ruta: site/all/themes)
2º Incluye un archivo info (datos básicos del tema) "mitema.info"

Deben figurar:

name = Mi Tema
description = Un tema para probar Drupal
core = 7.x
stylesheets[all][] = style.css
; stylesheets[print][] = print.css
version = "0.1"
project = "drupal"
; 2012-05-02
datestamp = "1336866325"

Donde name dará el nombre al tema, una descripción (description), a qué versión drupal va dirigido (core), el nombre del archivo de estilo (stylesheet),la versión de nuestro tema (version) y si se quiere la fecha de modificación del archivo en formato timestamp (datestamp).
Con esto ya nos debe reconocer el tema.

3º Incluye un README, para dar información del uso.
4ºLinkar estilos y Regiones: 

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0


5º Creamos una página plantilla nombrada page.tpl.php





Content
Right A
Right B
Creamos un header.tpl.php
Creamos un footer.tpl.php

Creamos un CSS que guardaremos en css/style.css Por ejemplo:
style.css

*
{
margin: 0;
padding: 0;
}
.clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header
{
width: 950px;
padding: 5px;
background-color: #BBEEDD;
}
#menu
{
width: 950px;
padding: 5px;
background-color: #EEEEBB;
}
#wrapper-main
{
width: 960px;
}
#wrapper-content
{
width: 480px;
margin-right: 10px;
float: left;
}
#banner
{
width: 480px;
background-color: #BBEEBB;
}
#maion
{
width: 480px;
background-color: #EECCDD;
}
#right_a
{
width: 220px;
margin-left: 10px;
margin-right: 10px;
background-color: #BBEEBB;
float: left;
}
#right_b
{
width: 220px;
margin-left: 10px;
background-color: #BBEEBB;
float: left;
}
#footer
{
width: 950px;
padding: 5px;
background-color: #EE99DD;
}
Con esto tendríamos un boceto de nuestro tema reconocible desde nuestro "panel de administración/apariencia" Ahora necesitaremos que el condenido de nuestro site aparezca dentro de las regiones definidas. Para ello llamamos al contenido desde php.
regions[content] = Content
< ?php print render( $page['content'] ); ?>
regions[header] = Header
regions[footer] = Footer
Importante tanto los dos espacios especiales (mensaje interno de drupal para la navegación por tabs) y el uso de if sí no se quiere mostrar bloques vacíos. "page.tpl.php"
< ?php if ($banner): ?>
< ?php endif; ?>
< ?php if ($messages): ?>
< ?php print $messages; ?>
< ?php endif; ?>
< ?php if ($tabs): ?>< ?php print render($tabs); ?>
< ?php endif; ?> < ?php if ($page): ?>

>< ?php print $title; ?>

< ?php endif; ?> < ?php print render( $page['content'] ); ?>
< ?php print render( $page['right_a'] ); ?>
< ?php print render( $page['right_b'] ); ?>
< ?php require_once("footer.tpl.php"); ?>
Extras: Sí necesitamos incluir imágenes: Deberemos guardar una imágen de tamaño 294px x 219px Es recomendable definir directorio. y vincularla de la siguiente forma.

Podemos usar template.php que se crea en la misma carpeta del tema y que mediante hooks (funciones que permiten interactuar con el núcleo y con otros módulos al momento de generar el código de drupal) modificar la salida final.
 $vars['main_menu'],
'attributes' => array(
'class' => array('links', 'main-menu'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
)
));
}
else
$vars['primary_nav'] = FALSE;
}
?>

No hay comentarios:

Publicar un comentario