drupal, manual

Omega, Tema base para un responsive web design en Drupal (I)

Creando un subtheme

Estamos ahora en el trabajo migrando prácticamente todo a Drupal, así que nos han dado un pelín de formación y ale, ¡A sacarse las castañas!.

Así que me puse manos a la obra. Lo primero, una vez tenemos nuestros wireframes y mockups de lo que queremos hacer, es buscar si ya hay algo que pueda hacer lo que nosotros queremos y que no nos cree mucha “basura” en el código. Lo que sí tenía claro, es que quería utilizar un layout que siguiese la filosofia del responsive web design, una técnica que permite controlar no solo la escalabilidad de la estructura del layout, sino que también nos permite ,mediante media-queries de css3, controlar qué contenidos se van a mostrar y de qué forma a medida que las capacidades de la pantalla del dispositivo van cambiando. Es decir, con un solo layout podremos controlar nuestra interface para cualquier dispositivo, logrando una adaptación realmente potente.

Entonces, y despues de ver algunos frameworks y empezar a plantear “mi propio tema responsive web design” para Drupal, encontré omega.

Como bien Se dice en la web del proyecto, Omega es un Responsive HTML5 Base Theme, con el cual podremos crear subtemas gobernados por su potente core alpha. Como bien leéis en la web de su proyecto, Omega está escrito para HTML5, incorporando el marcado correspondiente en cuanto a maquetación de este lenguaje se refiere.

Vale, ya tenemos un tema base, ¿ Y ahora que ?.

Leyendo su página de documentación, Veo que la mejor manera de trabajar con él es no tocando su core alpha ni el propio tema omega, la mejor manera de trabajar, al menos para probar y ver como funciona, es creando un subtema.

Por lo tanto, eso hago. Para ello encuentro en su documentación un vídeo que nos hace bastante fácil la creación del subtema. Yo lo traduzco en modo texto por si acaso hay alguna duda.

  1. Bajamos el tema omega aqui proyecto Omega
  2. Descomprimimos y copiamos el tema como cualquiera para la carpeta /sites/all/themes para obtener /sites/all/themes/omega
  3. Entramos en el directorio /sites/all/themes/omega/starterkits/ y copiamos la carpeta /omega-html5
  4. Pegamos la carpeta omega-html5 en la carpeta /sites/all/themes/ para obtener /sites/all/themes/omega-html5
  5. Renombramos la carpeta /sites/all/themes/omega-html5 por ejemplo a /sites/all/themes/tema_prueba
  6. Entramos en /sites/all/themes/tema_prueba y renombramos el archivo starterkit_omega_html5.info  => tema_prueba.info
  7. Entramos en /sites/all/themes/tema_prueba/css y renombramos los archivos YOURTHEME-alpha-default-narrow.css => tema-prueba-alpha-default-narrow, YOURTHEME-alpha-default-normal.css => tema-prueba-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css =>  tema-prueba-alpha-default-wide.cssYOURTHEME-alpha-default.css => tema-prueba-alpha-default.css.
  8. Abrimos el archivo /sites/all/themes/tema_prueba /tema_prueba.info y vamos a las líneas 8 9 10 y 11 
          ; IMPORTANT: DELETE THESE TWO LINES IN YOUR SUBTHEME
          hidden = TRUE
          starterkit = TRUE

    Y las borramos

  9. Antes de salir, cambiamos el contenido de description y  name por los adecuados como descripción y nombre del subtema, guardamos tema_prueba.info y cerramos.
  10. Vamos al panel de administración de Drupal, apariencia, activamos y ponemos como predeterminado el nuevo tema ,et voliá🙂, ya tenemos subtema en omega para empezar a trastear sin miedo.
La ventaja de tener  un subtema como podréis ver en los css que hemos renombrado anteriormente, es que estos, están limpitos, esperando que empecemos a trabajar con ellos.
Ahora voy a ver como crear nuevas regiones y como personalizar los css de mi subtema, pero eso es otra historia que publicaré más tarde. No parece un proceso arduo, aunque así en modo texto lo parezca, los más atrevidos siempre podéis hacerlo con una buena shell y un buen vi🙂.

Enlaces de interés para Omega

Estándar

9 thoughts on “Omega, Tema base para un responsive web design en Drupal (I)

  1. Ivan dice:

    Estoy liado con drupal y he escogido Omega como theme base. Pero me encuentro con que la interfaz no me carga como debería. En configuración me aparecen las zonas y las regiones unas debajo de otras. No como se ve en la página del proyecto. Donde hay una interfaz mucho más cómoda. Como te se ve a ti?

  2. javierlopezdeancos dice:

    se me ve en las opciones del tema como esta imagen

    Y ya cuando aplico el tema o subtema se me veria así de momento


    ya que ahora voy a añadir mas regiones y zonas y puede que decida hacer algo más personalizado

    No sé si habrá algo más usable que esto, de momento los que he visto son iguales que el mio🙂.

  3. javierlopezdeancos dice:

    voy a ver esto que dices de delta context a ver que tal está y tres preguntas se me ocurren…tienes blog?🙂, twitter?🙂, vas a la drupal camp?🙂

    • ivan dice:

      El problema es que el menú de la izquierda a mí no me aparece allí. Lo tengo encima de la imagen que te mostré. Ahora voy a hacer una nueva instalación para ver si algo hice mal. Tenía web pero murió. Ahora estoy con drupal para crear una nueva web, espero pronto. MI twitter es @imm_es y no, no voy a la drupal camp porque estoy de Barcelona. Estoy intentando montarme como freelance y hay que ahorrar al máximo.

      PD: He intentado seguirte en twitter. Te he enviado solicitud.

      • javierlopezdeancos dice:

        puede ser algo de sus css, yo lo instalaría todo otra vez desde cero. Ya te he añadido a twitter y jo, mucha mucha suerte con tu nueva andadura, a ver si hacen streaming desde la drupalcamp🙂

  4. ivan dice:

    Solucionado!!!!!! instale de nuevo el theme y todo correcto. Espero que hagan algo en streaming, desde ahora ire publicando en twitter mis avances en drupal. Disfruta de la drupalcamp. Y espero compartas tus conocimientos😉

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s