Cómo crear un subtema en Drupal usando Omega

Omega es un tema base para Drupal muy popular (más de 20 000 sitios reportan que lo usan) por sus ventajas y que hemos usado en Rootstack bastante. Las razones principales por la que nos encanta es primero, el hecho de que es un tema responsivo (responde de acuerdo al tamaño de pantalla que lo accesa) y segundo, que está basado en un sistema de grids. En el blog hemos recibido preguntas de cómo configurar un subtema de Omega y es por eso que hemos escrito ésta entrada.

Entonces, cómo creamos un subtema con Omega:

Lo primero es descargar Omega. Para éste ejemplo estaremos usando la versión de Drupal 7: Omega Extraemos el contenido del archivo en /sites/all/themes. Dentro del directorio /omega vamos a ver un directorio que se llama starterkits, entramos ahi y vemos alpha-xhtml, omega-html5 y omega-xhtml. Escogemos el tipo de starterkit que queramos (probablemente omega-html5), copiamos el directorio omega-html5 y lo pegamos en /sites/all/themes. Le cambiamos el nombre del directorio al nombre que queramos darle al subtema. No se deben usar espacios o - (guiones) para el nombre del subtema, en cambio si se puede usar el _ . (En este ejemplo, lo llamaremos rootstack). Una vez cambiado el nombre del directorio, entramos y también le cambiamos el nombre al archivo starterkit.info por rootstack.info (El nombre de nuestro subtema). El siguiente paso es editar las siguientes lineas del rootstack.info:

name = rootstack
description = Subtema basado en Omega-HTML5

Seguido de esto eliminamos las siguientes lineas:

hiddden = TRUE 
starterkit = TRUE

Una vez salvado el archivo .info, Cambiamos los nombres de los archivos que están dentro del directorio /css de la siguiente manera: todos los YOURTHEME-alpha-default.. los cambiamos por rootstack-alpha-default... Con ésto hemos terminado de crear nuestro subtema y finalmente lo activamos en nuestra instalación de Drupal, en la página de admin/appearance. No es necesario activar Omega o Alpha para que nuestro tema funcione.

Sobre las hojas de estilo (CSS) y cómo funcionan en Omega

¿Adónde pongo mis estilos? ¿Porqué hay ...-alpha-default.css, ...-alpha-default-narrow.css, -alpha-default-normal.css y ..-alpha-default-wide.css y un global.css? Cada CSS de los alpha le dan estilo a un rango de resoluciones: Narrow: 740px para arriba Normal: 980px para arriba Wide: 1220px para arriba. Ésto es así, para poder crear estilos que le dan estilo a determinados rangos de pantalla. En cuanto al funcionamiento de cada CSS, es más fácil si nos imaginamos que son capas. El orden en que cargan los CSS es asi: global.css, alpha-default, default-narrow, default-normal y por último carga default-wide. Por así decirlo, la capa de más abajo es global.css y la más alta la de default-wide. ¿Porqué ésto es así? Hay que tener en mente que en CSS el último CSS que carga sobreescribe a los anteriores (ya depende de cuan específico sea la declaración, pero por regla general pasa asi). Es decir, si en global.css tenemos p { font-size: 16px;} y en default-wide tenemos p { font-size: 20px;}, ésta última sobreescribirá la regla de global.css (sólo si ambas hojas de estilo se están cargando). El propósito es que en global.css se coloquen estilos que estarán en todo tipo de pantallas: celulares, tablets, desktop. A medida que se modifican los alpha-default, narrow, normal y wide, es para sobreescribir declaraciones anteriores y adecuar a cada tipo de pantalla. ¡Espero que ésta guía les sea de ayuda para empezar a crear subtemas con Omega y empezar a diseñar! Cualquier duda o comentario, escríbanlo abajo y trataré de responder sus preguntas. **ACTUALIZACIÓN** Gracias a Jesus Manuel Olivas, por la información que se me pasó agregar: Todos estos pasos de crear un subtema, los podemos hacer después de instalar los módulos Drush y Omega Tools, con el siguiente comando en la consola:

omega-subtheme "Subtheme Name" [html5]

o

drush omega-subtheme "Subtheme Name" xhtml