Skinr

Carlos — Fri, 23 Oct 2009 20:25:04 +0000

Para un proyecto estamos empezando a usar Skinr y la verdad es que está realmente bien. En realidad la idea es muy sencilla, permite asignar una clase a un elemento desde la administración de Drupal. Lo más típico es asignarlas a un bloque, pero se puede hacer a vistas, a nodos, a panels, comentarios, etc.

Para conseguir que funcione hemos de hacer los siguientes pasos:

Bajamos e instalamos skinr en Drupal, de la manera tradicional o si usas drush:
drush dl skinr drush enable skinr

Una vez habilitado si editamos un bloque nos debería salir una opción de skinr pero sólo una que pone "advanced" que permite añadir una clase escribiéndola, cosa que no está mal pero no es lo que buscamos.

Una vez hecho esto tenemos que añadir la variable $skinr en nuestros templates, ya que en Drupal 6 esto no se puede hacer automáticamente (en Drupal 7 ya no habrá que hacerlo). Por ejemplo, para habilitarlos en los bloques hemos de cambiar el block.tpl.php:

module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?> <?php echo $skinr?>"> <?php if ($block->subject): ?> <?php print $block->subject ?> <?php endif;?>

<?php print $block->content ?>

Una vez hecho esto hemos de configurar el .info de nuestro módulo para definir los diferentes grupos de estilos que podremos usar luego. La estructura de esta definición es la siguiente:

skinr[nombre_de_grupo][title] = Titulo del grupo skinr[nombre_de_grupo][description] = Descripción del grupo skinr[nombre_de_grupo][options][1][label] = Titulo de la clase de css skinr[nombre_de_grupo][options][1][class] = nombre_de_la_clase_de_css skinr[nombre_de_grupo][options][2][label] = Titulo de otra clase de css skinr[nombre_de_grupo][options][2][class] = nombre_de_otra_clase_de_css

Podemos poner tantos grupos como queramos y tantas opciones dentro de cada grupo. Una vez hecho esto tenemos que vaciar cache y ya estarán disponibles al editar el bloque y podemos seleccionar los estilos que queramos para el bloque. Pero...no pasará nada, ya que nos falta el último paso. Los css

La definición de los css se puede poner en cualquier fichero CSS que tengamos pero yo los pongo dentro de skinr.css y lo añado en el .info con

stylesheets[all][] = skinr.css

Y en ese fichero css ponemos:

.nombre_de_la_clase_de_css { //atributos de la clase }

.nombre_de_otra_clase_de_css {
//atributos de la clase
}

y taaaachan, ahora sí que ya lo tenemos!

Más info:

Blog de Carlos Rincón - skinr

Skinr