En el pasado usaba Genesis como theme base para mis Webs en Drupal. En estos últimos tiempos me he decantado por Omega por su fluidez, su alta variedad de opciones y su facilidad de uso.
Estamos hablando de un Theme que está hecho en HTML5, permite usar Media queries y con tan solo un click podemos tener un diseño válido para todos los dispositivos (Responsive Design). Hablaremos en este artículo de como instalar el Theme, crear un Subtheme muy fácil gracias a Omega Tools y una reseña general del que, para mi, es el mejor Theme de Drupal en la actualidad.
Instalemos Omega y el módulo Omega Tools.
Aun no es tiempo de comenzar a maquetar ni organizar nada, puesto que no tenemos un Subtheme creado. Las instalaciones de los Blank Themes mencionan que hay que instalar Subthemes para empezar a trabajar en ellos, y yo lo repito, esto es muy importante puesto que si trabajamos con Omega por defecto, entonces perderemos todos nuestros cambios si es que el mismo se actualiza. De hecho Omega es un Subtheme de Alpha, el cual tiene todas las funcionalidades que heredaremos.
Creando nuestro Subtheme en unos pasos
Dentro de la categoría Appearance tenemos un nuevo item llamado Create new Omega subtheme. Tal como nos dice el título, ahi podremos crear nuestro subtheme en un par de pasos:
- Debemos elegir el nombre de nuestro Theme, somos libres de elegir el que queramos.
- Recomiendo que herede de Omega, así tomamos tanto las funcionalidades de Omega como de Alpha.
- Starterkit nos permite decidir si queremos un Theme HTML5 y XHTML. Por supuesto nosotros elegiremos HTML5
- Al guardar estos cambios iremos al paso 2, donde podremos poner una descripción de nuestro Theme así como la versión del mismo, y pulsando el botón Finish tendremos nuestro Subtheme creado. ¿Vieron que fácil?
Al habilitar nuestro theme no nos llevaremos una agradable sorpresa al mirar la pantalla, puesto que por defecto vemos los bloques y las grillas visibles. Para deshabilitarlas presionamos los botones que aparecen a la derecha de la pantalla que dicen Grid y Blocks. Veremos más abajo como deshabilitar estas vistas por defecto.
En la parte inferior izquierda veremos una imagen que dice Resize me, nos indica que si cambiamos el tamaño de la pantalla nuestra web se adaptará a los diferentes tamaños. Por defecto Omega tiene 4 tamaños: Narrow, Normal, Wide y Fluid. Podemos deshabilitar cualquiera de estos 4 tamaños, por defecto Fluid no está habilitado.
Configurando nuestro Theme
Si entramos a editar nuestro Theme creado, veremos una gran cantidad de opciones, que describiremos una por una abajo. Sinceramente me parece una configuración muy agradable y fácil de entender.
Grid Settings
En este apartado podemos configurar que tamaños usaremos en nuestro sitio Web, y las media queries que tendrán cada uno de ellos para mostrarse en pantalla. Recordemos que no todos los sitios Webs necesitan tener este tipo de configuración, por lo que si solo queremos un tamaño en nuestro sitio debemos quitar la opción Enable the responsive grid.
La opción Allow customizing viewport meta properties on iOS and Android devices nos permite definir los tamaños en dispositivos Android e iOS. La verdad he encontrado como punto débil el no poder poner un Viewport menor a 1.0, pero bueno en lo demás me parece muy usable.
Zone and region configuration
Aquí podremos editar las zonas y regiones de nuestro Theme. La verdad tenemos mucho más de lo que probablemente vayamos a utilizar, por lo que es mejor ocultar lo que no nos sirva. Las regiones o zonas que no queramos utilizar tan solo debemos inhabilitarlas quitando el checkbox relacionado a Force this region to be rendered.
Debugging
Desde esta opción podremos quitar las Grillas y Bloques que tanto nos molestaban al comienzo. Recomiendo ocultarlas pero que las podamos habilitar si es que queremos. Ambas son útiles para corroborar si el esqueleto de nuestra Web es el que deseamos o aun debemos quitar más zonas o regiones. Yo siempre deshabilito las opciones Show the debugging blocks by default y Show the grid overlay by default..
Por supuesto hay que dejar estos bloques sólo visibles para el administrador, corroboremos esto desde Roles that may use the grid overlay and debugging blocks.
Toggle Libraries
Podemos habilitar librerías opcionales desde este apartado. Las que tenemos disponibles son Formalize, Media Queries y por último Equal Heights. No nos pondremos en detalle con estas librerías porque si no el artículo sería eterno.
Toggle Styles
Como dije antes, Omega trae más configuración de la que, probablemente, necesitemos en nuestro proyecto. Tenemos CSS incluídos para nuestros menús y formularios, entre otras cosas. Alpha también tiene sus hojas de estilo. La mayoría de las veces querremos usar formularios personalizados o menús que no se asemejen a lo que nos brinda nuestro theme, desactivemos estos checkboxes antes de editar los ficheros y cometer un grave error. global.css es nuestro fichero para crear nuestros propios estilos.
Toggle advanced elements
Para finalizar, ciertos elementos de nuestro Sitio Web no nos interesa mostrar, por ejemplo los tabs, el breadcrumb, el slogan (por venir en el logo, por ejemplo). Desde aquí podemos quitar estos elementos sin tener que editar nuestras plantillas.
Conclusión
Como verán, Omega está hecho para que nosotros lo configuremos del modo que queramos y utilicemos símplemente lo que necesitamos. Tanto si tu proyecto es una web corporativa o es una comunidad, Omega se adapta a tus necesidades y te brinda las facilidades para que solo tengamos que entrar a nuestras hojas de estilo para dar forma a nuestro proyecto. Si a esto le sumamos Responsive Design, HTML5, Media Queries y la posibilidad de tener distintos ficheros CSS por tamaño de nuestra Web ... Omega debe ser tu elección.
No olvidar que se puede integrar Less CSS en Omega siguiente este tutorial: Integrar Less CSS en Drupal.