Tip: Add Conditional Stylesheets to Omega

From my personal experience, Omega is the best Drupal theme I’ve worked with. It’s our go-to theme for projects because of its impressive features, including:

• Fully Responsive Grid Layouts: Based on 960.gs standards, which ensure layouts adjust smoothly to different screen sizes.
• Flexible Column Layouts: Built-in 12, 16, and 24-column layouts allow for versatile design structures.
• HTML5 and XHTML Starter Kits: Provides modern, semantic structure options for web development.
• Content-First Layouts: Push/pull classes make it easy to prioritize content visibility and layout.
• Customizable Regions and Zones: Size and placement of regions/zones can be configured to fit specific design needs.
• Custom CSS Classes: Ability to apply unique CSS classes to any region or zone.
• Contextual Layouts with the Delta Module: Create layouts that adapt based on context, improving user experience.

Handling Conditional CSS for Internet Explorer

While working on a project, I encountered a bug that only appeared in Internet Explorer 6 and 7. (No surprise there!) To address this, I researched ways to use conditional CSS. For those unfamiliar, conditional CSS targets specific browsers—usually Internet Explorer—to apply CSS styles accordingly. For more on this, see the guide: How To Create an IE-Only Stylesheet.

Although Drupal has a "Conditional Styles" module that helps manage conditional CSS, Omega loads these conditional stylesheets before the theme's main CSS, which causes IE-specific changes to be overridden by the theme’s default styles.

The Solution

The solution turned out to be simpler than expected. We can add the following function to our subtheme’s template.php file to ensure that the conditional CSS is loaded correctly. Place the CSS files in the subtheme’s css folder as well.

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));
}

Final Thoughts

I hope this solution is helpful! If you have any questions, feel free to leave them in the comments below, and I’ll be glad to help. Special thanks to "minneapolisdan" on Drupal.org for discovering this solution.

We recommend you this video