es

Tip: Agregar hojas de estilo condicionales a un tema de Omega

June 18, 2021

Share

Table of contents

Quick Access

En lo personal, Omega es el mejor tema de Drupal con el que he trabajado y lo usamos para nuestros proyectos. Es un tema bastante completo con funcionalidades interesantes como: - Basado en 960 Grid System. - 12, 16 y 24 columnas para las distingas necesidades de diseño. - Responsive Design (Usando la propiedad de @media) - Basado en HTML5 con soporte para los navegadores antiguos. - Clases Push/Pull para manejar posición de bloques y zonas. - Integrado con el módulo Delta - Configuración granular para cada región/zona. Mientras trabajaba en un sitio, me topé con un error que sólo aparecía en Internet Explorer 6 y 7. Oh ¡que sorpresa! /sarcasmo>. Estuve investigando la mejor manera de usar CSS (hojas de estilo) condicionales y me topé con éste enlace. Para los que no saben qué son CSS condicionales, son hojas de estilo que cargan específicamente para navegadores que determinemos, en la gran mayoría de los casos Internet Explorer. Para saber más sobre este tema, acá les dejo unos enlaces: Comentarios condicionales, filtros y hacks - Español How To Create an IE-Only Stylesheet - Inglés Aunque hay un módulo Conditional Styles que maneja fácilmente la inclusión de CSS condicionales, Omega lo maneja de tal manera que carga los archivos CSS condicionales antes de las demás archivos CSS, lo que causa que las declaraciones sean sobreescritas. Así que la solución resulto más sencilla: colocamos la siguiente función en el template.php de nuestro tema y creamos los respectivos CSS en la carpeta /css.
function [Nombre de nuestro tema]_preprocess_html(&) {
  drupal_add_css(path_to_theme() . '/css/ie-lte-8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/css/ie-lte-7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/css/ie-6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
}
Espero que les sea útil, cualquier duda escríbanla en los comentarios y con gusto les responderé. Todo el crédito a minneapolisdan, que encontró la solución. Fuente: Condicional Styles Get Rendered Before Omega CSS - Drupal.org