Tip: Add Conditional Stylesheets to Omega

June 18, 2021


Table of contents

Quick Access

In my personal point of view, Omega theme is the best Drupal theme I've worked to date. It's the theme we use for our projects because its pretty impressive, with interesting features as: - Fully Responsive Grid layouts based on 960.gs standards. - 12, 16, 24 Column Layouts built in. - HTML5 and XHTML Starterkits - Content first layouts with push/pull classes. - Every region/zone size and placement configurable. - Apply custom CSS classes to any region/zone. - Create contextual layouts with the Delta module. While I was working on a project, I ran into a bug that only happened in Internet Explorer 6 and 7. What a shock! /sarcasm> So I started searching for the best way to use conditional CSS and I found this link. For the people that don't know what are conditional css, they are css declarations aimed at specific browsers (almost everytime Internet Explorer). To know more about this, I leave here this link. How To Create an IE-Only Stylesheet Although there is a module Conditional Styles that easily manages the addition of conditional CSS, Omega loads the conditional CSS before the theme's CSS. This causes that the changes made for IE are overriden by the theme's stylesheets. The solution turned to be simpler than I thought: we place the function below, in the template.php of our subtheme and we add the CSS in our css folder.

function [subtheme name]_preprocess_html(&$variables) {
  // Añadir hojas de estilo condicionales para IE
  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));
I hope this will be useful, any questions or doubts can be written on the comments below and I will answer them. All credit to minneapolisdan, who found the solution. Source: Condicional Styles Get Rendered Before Omega CSS - Drupal.org