Jun 162011
 

Post to Twitter Post to Facebook


Existen muchas ocasiones en las que quisiéramos tener un theme configurable sin tener que tocar directamente el CSS o los templates, para satisfacer estas necesidades podemos recurrir a crear un formulario de configuración en el cual el administrador del stite pueda facílmente y sin conocimientos de programación cambiar aspectos de nuestro theme.

En este artículo crearemos nuestro propio theme con opciones de configuración que le permitirán al administrador del site modificar mediante un sencillo formulario cambiar el tamaño y/o el tipo de la fuente.

Los primeros pasos

En primer lugar creamos un nuevo directorio en site/all/themes al que nombraremos grayscale y crearemos nuestro fichero .info , en este caso grayscale.info :


name = Grayscale
core = 7.x
engine = phptemplate
stylesheets[all][] = css/style.css
settings [font-family] = 'ff-ss'
settings [font-size] = 'ff-12'

Como se puede observar hemos definido nuestra hoja de estilos en css/style.css y hemos definido dos configuraciones una para font-family y otra para font-size.A continuación vamos a proveer nuestro theme de algo de CSS, definimos nuestro styles.css dentro de sites/all/themes/grayscale/css :


body{
 background-color: #c6c6c6;
}
#page{
 background-color: #c6c6c6;
}
#skip-link{
 width: 960px;
 margin-left: auto;
 margin-right: auto;
 background-color: #c6c6c6;
}
#header {
 width: 960px;
 background-color: #ffffff;
 margin-right: auto;
 margin-left: auto;
 margin-top: 10px;
 height: 40px;
 padding-top: 10px;
 border-top: 3px solid #000;
 border-bottom: 3px solid #000;

}

#logo{
 float : left;
 margin-left: 20px;
}
a#logo{
 text-decoration: none;
}
#name-and-slogan{
 float:left;
 margin-left: 100px;
}
#site-name a{
 text-decoration: none;
}
#navigation{
 width: 960px;
 margin-right: auto;
 margin-left: auto;
 background-color: #c6c6c6;
 height: 45px;
}
#navigation h2{
 display : none;
}
ul#main-menu{
 background-color: #EEE;
 height: 25px;
}
ul#main-menu li a{
 text-decoration: none;
 padding-right: 10px;
 color: #fff;
 height: 25px;
 border-right: 1px solid #fff;

}
ul#secondary-menu{
 background-color: #333;
 height: 25px;
}
ul#secondary-menu li a{
 text-decoration: none;
 padding-right: 10px;
 color: #fff;
 height: 25px;
 border-right: 1px solid #fff;

}
ul#secondary-menu a:hover{
 color: #ff0000;

}
#main-wrapper{
 clear:both;
 background-color: #ffffff;
 width: 960px;
 margin-right: auto;
 margin-left: auto;
}
#main{
 width: 960px;
 margin: 5px auto;
}
#content{
 width: 700px;
 float: right;
 padding-left: 15px;
}
#sidebar-first{
 float: left;ç
 width: 130px;
 margin: 0px;
 padding: 20px;
 background-color: #EEE;
}
#footer {
 width: 920px;
 padding: 20px;
 margin-right: auto;
 margin-left: auto;
 clear : both;
 min-height: 100px;
 background-color: #333;
 color : #fff;

}
#footer a{
 color: #fff;
}

Ahora si activamos nuestro theme nuestro site debe tener el siguiente aspecto :

Construyendo el formulario

El siguiente paso es crear el formulario para establecer la configuración de nuestro theme. Para hacer esto debemos crear el fichero theme-settings.php dentro del directorio de nuestro theme en el cual añadiremos los elementos necesarios para establecer el conjuntos de valores de para nuestras configuraciones.Usaremos la función hook_form_system_theme_settings_alter() para añadir campos a nuestro formulario:


<?php

/**
 * Implementation hook_form_system_theme_alter()
 */
function grayscale_form_system_theme_settings_alter(&$form, &$form_state) {

 $form['styles'] = array(
 '#type' => 'fieldset',
 '#title' => t('Style settings'),
 '#collapsible' => FALSE,
 '#collapsed' => FALSE,
 );
 $form['styles']['font'] = array(
 '#type' => 'fieldset',
 '#title' => t('Font settings'),
 '#collapsible' => TRUE,
 '#collapsed' => TRUE,
 );
 $form['styles']['font']['font_family'] = array(
 '#type' => 'select',
 '#title' => t('Font family'),
 '#default_value' => theme_get_setting('font_family'),
 '#options' => array(
 'ff-sss' => t('Helvetica Nueue, Trebuchet MS, Arial, Nimbus Sans L, FreeSans, sans-serif'),
 'ff-ssl' => t('Verdana, Geneva, Arial, Helvetica, sans-serif'),
 'ff-a'   => t('Arial, Helvetica, sans-serif'),
 'ff-ss'  => t('Garamond, Perpetua, Nimbus Roman No9 L, Times New Roman, serif'),
 'ff-sl'  => t('Baskerville, Georgia, Palatino, Palatino Linotype, Book Antiqua, URW Palladio L, serif'),
 'ff-m'   => t('Myriad Pro, Myriad, Arial, Helvetica, sans-serif'),
 'ff-l'   => t('Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, Geneva, sans-serif'),
 ),
 );
 $form['styles']['font']['font_size'] = array(
 '#type' => 'select',
 '#title' => t('Font size'),
 '#default_value' => theme_get_setting('font_size'),
 '#description' => t('Font sizes are always set in relative units - the sizes shown are the pixel value equivalent.'),
 '#options' => array(
 'fs-10' => t('10px'),
 'fs-11' => t('11px'),
 'fs-12' => t('12px'),
 'fs-13' => t('13px'),
 'fs-14' => t('14px'),
 'fs-15' => t('15px'),
 'fs-16' => t('16px'),
 ),
 );
}

Como se puede ver lo único que devolvemos es un array con la estructura de nuestro formulario indicando, titulo, descripción, tipo..Con este array Drupal añade los nuevos campos al formulario de configuración del theme. Si pinchamos sobre settings debemos ver nuestros nuevos campos como aparece en la siguiente imagen:

Usando la función hook_process_html()

Para que nuestras opciones de configuración se tengan en cuenta y llegemos finalmente a nuestro objetivo, debemos añadir nuestras opciones de configuración (font-size y font-family) en la variable $classes de nuestro theme lo cual haremos a través de la función hook_process_HOOK() , implementaremos este hook en el fichero template.php que debemos crear en el directorio de nuestro theme .El nombre de la función hook_process_HOOK() ,en nuestro caso, debe ser grayscale_process_html() donde grayscale es el nombre de nuestro theme y html el nombre del fichero .tpl.php que queremos sobreescribir.Implementaremos nuestra función de la siguiente forma en el fichero template.php:

<?php
/**
 * Override or insert variables into the html template.
 */
function grayscale_process_html(&$variables) {
 // Add classes for the font styles
 $variables['classes'].= " ".theme_get_setting('font_family');
 $variables['classes'] .= " ".theme_get_setting('font_size');
}

Con el conjunto de variables,estas se usarán en html.tpl.php en <body> a través de la variable $classes.El fichero html.tpl.php reside en modules/system y es parte del core.En este fichero nos encontramos con la etiqueta body y veamos de cerca cómo se construye:

<body class=”<?php print $classes; ?>” <?php print $attributes;?>>

Si mediante firebug exáminamos la etiqueta body podemos ver cómo se han añadido nuestras opciones de configuración las cuales se aplicarán al cuerpo de nuestro site :

Rematando la faena

Como es lógico y normal no notaremos ningún cambio visible en nuestro site ya que no hemos definido el CSS asociado a nuestras opciones de configuración.Terminemos añadiendo nuestras reglas CSS a style.css :


/* font family */
.ff-sss {font-family: "Helvetica Nueue", "Trebuchet MS", Arial, "Nimbus Sans L", FreeSans, sans-serif;}
.ff-ssl {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
.ff-a {font-family: Arial, Helvetica, sans-serif;}
.ff-ss {font-family: Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif;}
.ff-sl {font-family: Baskerville, Georgia, Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif;}
.ff-m {font-family: "Myriad Pro", Myriad, Arial, Helvetica, sans-serif;}
.ff-l {font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode",  Verdana, Geneva, sans-serif;}

/* Base fontsize */
.fs-10 {font-size:0.833em}
.fs-11 {font-size:0.917em}
.fs-12 {font-size:1em}
.fs-13 {font-size:1.083em}
.fs-14 {font-size:1.167em}
.fs-15 {font-size:1.25em}
.fs-16 {font-size:1.333em}

Finalmente ya podemos comprobar los resultados y quedarnos a gusto , si nos vamos a la página de configuración de nuestro theme y si variamos la fuente y el tamaño de la misma podemos ver como cámbia nuestro site según la opción elegida.

Conlusiones

Como hemos podido ver en este artículo definir nuestro propio theme es bastante sencillo gracias a la API que nos proporciona Drupal. Siguiendo unos sencillos pasos hemos logrado delegar en adminstrador del site ciertas tareas de customización del site, sin que tenga que tocar ni una línea de código ya que no tiene por qué tener conocimientos sobre ello.

Espero que os haya sido interesante.

Fuente : Pro Drupal 7 Development

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>