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"
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:
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] = 05º Creamos una página plantilla nombrada page.tpl.php
Creamos un header.tpl.phpContentRight ARight B
Creamos un footer.tpl.phpHeader
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.
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"regions[content] = Content
< ?php print render( $page['content'] ); ?>regions[header] = Header
< ?php print render( $page['header'] ); ?>regions[footer] = Footer
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.< ?php require_once("footer.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'] ); ?>
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