Miguel Rodríguez hace desarrollo de software efectivo.

Usando clases CSS para tematizar/personalizar a Drupal sin programar

Te he dicho que es realmente importante especificar estilos con clases CSS a fin de reusar el código?, te he dicho que hay muchos módulos de Drupal los cuales tienen la capacidad para establecer clases CSS? Como ustedes saben, CSS es utilizado para definir los estilos visuales en una página web, CSS puede asignar aquellos estilos sea a elementos específicos, utilizando IDs, o para grupos de elementos, mediante el uso de clases, por asuntos de reutilización (en realidad hay una gran cantidad de conceptos y principios que alientan a mantener las cosas reutilizables y evitar la redundancia, como DRY [No te repitas]), si hay un estilo que puede ser implementado en otro lugar, deberías definir ese estilo con una clase, al hacer esto puedes implementar estos estilos más fácilmente, aunque puedas pensar que todavía se tienen que programar los cambios, eso es solo en teoría.
Hay fases en el proceso de tematización de Drupal que no requieren la intervención de ningún experto en informática (programador, desarrollador, analista/programador, ..., como quieras llamarlo) módulos tales como Paneles (Panels) y Vistas (Views) permiten al usuario crear disposiciones visualmente, así como algunos de estos módulos permiten asignar clases CSS visualmente, por lo que el usuario puede cambiar el contenido, la disposición y todos los estilos dentro de la disposición, por ejemplo, al tiempo que escribí este artículo, el tema que hice tenía un par de clases CSS el cual pueden ser usados para resaltar pedazos de texto, así que si alguna vez quiero resaltar pedazos de texto con mi editor (CKeditor), solo tengo que añadir las clases "messages highlight" (de hecho, esas clases CSS vienen con Drupal por defecto, yo solo las personalicé) y el texto se vería resaltado de acuerdo con el diseño del tema.
ejemplo de Clases CSS en Drupal
Hay algunos módulos de Drupal que permiten al usuario cambiar el contenido y el diseño de forma visual, incluso las clases CSS, esto permite al usuario cambiar/establecer el estilo de todo el contenido.
Atribución: 
Eso ahorraría tiempo y dinero, así como aliviar al experto en informática de realizar algunas tareas, veamos cuales de todos esos módulos soporta esa capacidad y como dejan usarlo.
 

Vistas (Views)

 
Los siguientes párrafos solo se referirán a Vistas 3 (Views 3)
Este módulo es uno de los módulos de Drupal mas usados, tiene muchas capacidades, esto también incluye manejo de clases CSS junto con opciones de contenedores HTML que te dejan cambiar la apariencia de la salida, Vistas (Views) puede permitir establecer clases CSS en el contenedor de la Vista (View) en si misma, a cada fila y campo, usando esta característica puedes dar formato el resultado entero de la consulta.
 
Hay algunas cosas que puedes hacer, primero, puedes establecer clases CSS al contenedor para cambiar la apariencia globalmente, esto es bastante básico pero también útil, segundo, puedes establecer clases CSS a cada fila/campo (puedes usarlo junto con las clases CSS del contenedor de la Vista), esto es usado para estructuras complejas que necesitan múltiples elementos identificados, es usado en ocasiones junto a la tematización de las Vistas (una implementación de "template 'theme hook' sugestion" para Vistas) para implementar librerías externas y elementos de páginas web.
Clase CSS del Contenedor de la Vista
Se puede añadir una clase CSS al contenedor de la Vista, ya sea para establecer o para activar un estilo.
Atribución: 
 
El campo "clase CSS" para el contenedor de la vista es bastante simple de ver, está localizado en el menú avanzado de la vista, sin embargo, a fin de establecer una clase CSS a las filas, es necesario que establezcas el estilo "lista sin formato" a las filas, y entonces establece el contenedor de la fila con una clase CSS personalizada, casi pasa lo mismo con los campos, es necesario que establezcas el estilo "campo" a los campos y establezcas el contenedor con una clase CSS personalizada.
Clases CSS de los campos de las Vistas
Los campos y las filas de las Vistas también pueden tener clases CSS personalizados.
Atribución: 
 

Paneles (Panels)

 
Los siguientes párrafos solo se referirán a Paneles 3 (Panels 3)
Ni siquiera debería decir que este módulo es ampliamente usado (deberían saberlo ya), Paneles (Panels) tiene la capacidad de permitir al usuario crear interfaces visualmente, el usuario puede establecer el ancho (width), el título, el contenido (obvio) y propiedades CSS de cada "pane" (un "pane", pronunciado "pein", es una representación administrable de los nodos en el panel), esto incluye clases CSS, también puedes añadir propiedades CSS a cada región y el contenedor del panel en sí mismo, siempre y cuando sepas las clases CSS, esto permite crear interfaces complejas a través de la Interfaz Visual sin ni siquiera saber como programar.
Panels general settings - CSS classes
Atribución: 
 
Panels pane's CSS classes
Panel panes (a representation of nodes in the panels) can also have custom CSS classes.
Atribución: 
 
Establecer las clases CSS a los "panes" es bastante simple, simplemente tienes que ir a la opción "propiedades CSS" en su menú y añadir las clases necesitadas, establecer clases CSS al contenedor del panel también es simple, en la sección general puedes encontrar el campo "clases CSS" para hacer esto, sin embargo, a diferencia de los "panes" y el contenedor del panel, las regiones (el contenedor de los "panes") no son tan simples de personalizar, a fin de establecer las clases a las regiones en Paneles (módulo), debes usar una interfaz flexible personalizada con el constructor de interfaces, el resto de las interfaces no pueden ser personalizados (al menos de esta manera), al hacer esto, puedes establecer cualquier clase CSS a cualquier región.
 

CKeditor

 
Los siguientes párrafos solo se referirán a CKeditor 3
Este es un editor de texto web bastante bueno, tiene muchas capacidades, lo más interesante es que puede crear DIVs personalizados y mostrar los bloques (elementos html) visualmente, permitiendote editar las propiedades para los DIVs creados, con esto puedes personalizar el texto en la manera que quieras, puedes crear un bloque personalizado con una clase CSS especifica dando una apariencia especial a un pedazo del texto.
CKEditor - Clases CSS de los contenedores DIV
Incluso cualquier trozo de texto en CKEditor puede tener clases CSS.
Atribución: 
 
El procedimiento para crear un bloque ya fue descrito antes, pero primero verifica que el campo soporte entradas full HTML, entonces pulsa el botón "mostrar bloques" (show blocks), selecciona el contenido para el nuevo bloque (simplemente mantén el botón y seleccione el texto), pulsa el botón "crear contenedor DIV" (create div container) y llena el campo "Clases de hojas de estilo" (Stylesheet Classes) con las clases CSS necesitadas.
 

Context

 
Los siguientes párrafos solo se referirán a Context 3 - Beta 6
Este es un módulo genial, puede permitir cambiar los bloques, menús, comportamiento de otros módulos, y las propiedades de la página web siendo accedida, solo puede permitir cambiar las propiedades de la página web en general, no las propiedades de ningún bloque o menú, pero este todavía es bastante útil, quizás puedas accionar un estilo en especifico, o cambiar el fondo de la página web (si puedes), esto es algo que puede ser usado eficientemente.
Context - Clases CSS del 'Tema HTML'
Se puede establecer una reacción (con Context) que cambia el sitio web mediante el uso de clases CSS.
Atribución: 
 
Usar clases CSS con Context es bastante simple, simplemente establece algunas condiciones (rutas, idiomas, tipos de nodo, ...), asegúrate si quieres que todas las condiciones sean verdad o no, añade la reacción "Tema HTML" (Theme HTML) y establece las clases CSS necesarias, aunque este cambio es bastante simple, puedes establecer un estilo el cual cambie cuando este adentro de un elemento con una clase CSS específica, con esto puedes incluso cambiar la apariencia de la página web entera.
 

Omega

 
Los siguientes párrafos solo se referirán a Omega 3
En mi humilde opinión, es el mejor tema base disponible para Drupal, Omega puede cambiar la disposición de la página web visualmente, su disposición está dividida en secciones, zonas y regiones que puedes organizar como necesites, puedes incluso cambiar las propiedades de cada región y zona, incluyendo (por supuesto) las clases CSS, con otros módulos como Delta y Context, puedes cambiar la disposición de páginas web diferentes dependiendo en las condiciones (previamente establecidas por el usuario).
Clases CSS de las zonas de Omega
Las zonas de Omega puede tener clases CSS.
Atribución: 
 
Clases CSS de las regiones de Omega
Las regiones de Omega también pueden tener clases CSS.
Atribución: 
 
Las clases CSS pueden ser establecidas en la sección "Configuración de zonas y regiones" en la configuración del subtema de Omega, selecciona la región o zona a cambiar y cambia sus propiedades como se necesite, Delta puede guardar esta configuración a fin de cargarla en otra ocasión, hay algunos otros módulos que pueden usar estos datos, Context es uno de ellos, puedes especificar una reacción (con Delta) que cambie la página web si alguna condición coincide.
Context - usando los datos guardados de Delta como una Reacción de Context.
Se puede establecer una reacción (con Context) que cambia el sitio web mediante el uso de clases CSS.
Atribución: 

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .