Omega Theme Drupal

En esta gua se explicara como aplicar estilos css sobre omega theme, (no es un manual de css) empezaremos explicando que es Omega y como esta conformada su estructura.

Que es Omega theme framework?

OMEGA THEME FRAMEWORK es un tema base que nos provee de un conjunto de herramientas que nos ofrece muchas de las caractersticas bsicas que los diseadores necesitan como: un sistema de grid, compatibilidad entre navegadores, base de clases CSS y ms. Omega tiene una estructura basada en una grid dividida en muchas partes(secciones, zonas y regiones) esta organizacin puede variar dependiendo en las modificaciones hechas en el archivo ".info", en las siguientes imagenes se muestra esta estructura:

Imagen 1: Estructura de Omega Theme

Autor: Patricio Mndez Lpez

Imagen 2: Configuracin de la seccin contenido (Seccin, Zona, Regin) Las regiones son las piezas ms pequeas de la estructura de Omega, siendo ms especfico, ellas son las columnas del grid, se supone que ellas retienen el resto del contenido (los bloques, Vistas, ...), el nmero de columnas por cada una puede ser configurado Las zonas son los contenedores de cada grid, habr tantas grids como zonas hayan, las griids tienen un numero de columnas permitidas hasta 24 columnas, cada zona puede tener su propia configuracin, as que quizs una zona tenga 12 columnas y otra tenga 16 columnas, a diferencia de las regiones,tomarn toda la pantalla horizontalmente, y pueden ser solamente organizadas verticalmente, las zonas pueden contener solamente regiones y nada ms. Las secciones son los contenedores de las zonas, sus anchos toman toda la pantalla y sus alturas dependen del contenido que sostienen, a diferencia de las zonas y regiones, ellas no pueden se ordenadas (o si quiera creadas) por el usuario, solo hay tres de ellas, la seccin de cabecera, la seccin de contenido y la seccin de pie de pgina, deben ser consideradas como envolventes de contenido esttico.

Autor: Patricio Mndez Lpez

Aplicar CSS a Omega

A fin de dar color al sitio web, los archivos CSS deben ser escritos,Omega provee algunos archivos CSS para implementar el cdigo al tema, esos archivos, como el resto del tema. En la imagen 3 se muestra la estructura que se explico anteriormente desde una vista html, esto con el fin de aplicar estilos css.

Seccin section-content

Zona zone-top-contentwrapper

Regin region-content en esta region se puede encontrar todo el contenido, texto imagenes, etc.

Imagen 3: Estructura de Omega desde una Vista html Bien, ahora que ya entendemos la estructura de omega comenzaremos a dar estilos. Ttulo de la nota

Imagen 4: Ejemplo de contenido Autor: Patricio Mndez Lpez

Tomaremos de ejemplo la imagen 4, aplicaremos estilos css al ttulo de la noticia, aumentaremos el tamao de letra a 30 y el color sera blue. Para hacer esto podemos apoyarnos en las herramientas que nos proporcionan los navegadores, por ejemplo firebug de firefox o de google chrome. Damos click derecho sobre el titulo y damos luego inspeccionar elemento, posteriormente nos posicionamos sobre la div o etiqueta html que contiene el ttulo, en la imagen 5 se muestra como

Escribimos los atributos color y tamao de fuente

Imagen 5: Aplicando css al ttulo de la noticia En la imagen se muestra una cascada de div's y como se puede observar el ttulo que queremos modificar esta en la etiqueta h1 con clase title-content. De lado derecho se muestra los atributos css que se aplicaron.

Problemas al aplicar estilos

Como sabemos todos los h1 que tengan la clase title-conten seran modificados, esto es bueno si todos los contenidos o pagina que se mostraran tienen el mismo patrn de estilo, Pero que pasa si no?. Por ejemplo nuestro portal tiene los siguientes patrones(tipos de contenido) Noticia, Publicaciones, Blog. Y Solo queremos aplicar los estilos de la imagen 5 al contenido Noticia. Para esto tenemos que hacer una herencia de nuestros elementos html(div).

Como identificar de que elemento padre heredar?

Autor: Patricio Mndez Lpez

Esto es simple, primero debemos identificar que tipo de contenido es al que se

aplicaran los estilos. En la imagen 6 se muestra el ejemplo de la cascada de elementos que tenemos que considerar para aplicar estilos unicamente al tipo de contenido noticia

Clase padre node-noticia

Imagen 6: Clase padre, casdada de elemtos html. En Drupal es fcil identificar el elemento padre, este tiene el nombre del tipo de contenido precedido por node (node es una instancia del tipo de contenido Noticia). Entonces quedara de la siguiente forma .node-noticia h1.title-content el ejemplo se puede ver en la imagen 6 en el lado derecho. De esta forma solo se aplicaran los cambios a todos las noticias sin afectar los dems tipos de contenidos(publicacion, blog). Lo mismo para para aplicar css a un label especifico, primero devemos identificar a que campo pertenece la label que queremos modificar. En la siguiente imagen se ilustra la cascada que devemos respetar para aplicar css a una label especifica.

Autor: Patricio Mndez Lpez

El campo padre de El campo padre de nuestra label es .fieldnuestra label es .fieldname-field-redaccion-de name-field-redaccion-de

Imagen 7: Aplicar estilos a una etiqueta especifica

La clase de nuestro campo es .field-name-field-redaccion-de asi que en la cascada de elementos, este sera el elemento padre de nuestra etiqueta. Asi que quedara de la siguiente forma: .field-name-field-redaccion-de .fieldlabel, de esta forma unicamente se modificara la etiqueta que pertenece al campo que le indicamos, ahora bien si solo necesitamos este estilos en el tipo de contenido noticia aplicamos lo anterios quedando nuestra definicion de herencias de clases de la siguiente forma: .node-noticia .field-name-field-redaccion-de .field-label

Autor: Patricio Mndez Lpez