I'm using the Conditional Styles modules to add a few CSS tweaks for IE. I have it working, but for some reason the IE-specific CSS is getting rendered before the Omega CSS in the code. The effect of this is that any style changes I make for IE get overridden by my Omega theme stylesheets that follow.

It seems that the Conditional Styles should be rendered AFTER my Omega theme's CSS, as it usually the case.

Maybe it's not an Omega issue, maybe it's a Conditional Styles issue? But I haven't had this issue before.

Comments

minneapolisdan’s picture

minneapolisdan commented
Status: Active » Closed (fixed)

Ok, I figured it out, did some more searching around. #1, you can't use the Conditional Styles module with Omega, as far as I can tell. After reading this post, http://drupal.org/node/1077662, I learned that I needed to add my Conditional Styles for IE in a preprocess function. It's a bit over my head at the moment how the preprocess and post process thing is supposed to work, but going to my good ol' template.php file, I was able to add it there. If this helps anyone else, I used the following code: (Note: I usually start with 3 IE style sheets, and below I'm just using a generic "custom theme" as the name, you'd replace it with your actual subtheme name)


function custom_theme_preprocess_html(&$variables) {
  
  // Add conditional stylesheets for 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));
}

Doing it this way, my IE-specific styles get rendered last, after all the other CSS files in Omega. If I were to assign a "weight" of anything over zero to my stylesheets, however, such as "10", it would get rendered after the IE styles. So I keep all the weights of my custom CSS files as "0".

timtunbridge’s picture

timtunbridge commented

Thanks for posting this minneapolisdan.

I initially tried to get the above code working via a subtheme preprocess-html.inc, but couldn't get Omega to recognize it.

Then (as you said) I placed the very same code into my subtheme template.php and hey presto, she works!

Thank you again.

hanspln’s picture

hanspln commented

#1 solved for me too

This CSS also solved my main problem in ie6,7,8 (sidebars).

.region-sidebar-second-inner {width: 220px; float:right; margin-top:25px;}
.region-sidebar-first-inner {width: 220px; float:left; margin-top:25px;}

This forces the sidebar-first to 220px, which I actually need right now anyway.

goldlilys’s picture

goldlilys commented
Status: Closed (fixed) » Active

Used the #1 codes above, but the ordering of these ie css files are still being overridden by global.css because that's the last one being generated. What do I have to do so that the ie.css files will get rendered last.

goldlilys’s picture

goldlilys commented
Status: Active » Closed (fixed)

Nevermind, I missed the last part to make all css like the global.css have weight 0 so the ie css be rendered last. Thanks for the help.

Patroclas’s picture

Patroclas commented

This is useful - but I can't find where to change the weight of the css files. Where should I be looking please?

bensey’s picture

bensey commented

As described in http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_ad...,
you can also add a weight value to the array in the above statements from #1 to achieve this, eg:

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, 'weight' => 20));

Although I couldn't get this working with THEMENAME_preprocess_html(), I had to use THEMENAME_alpha_preprocess_html() which I picked up from a comment here:
http://groups.drupal.org/node/180999

Can anyone shed any light on why this might not be working for me? The function THEMENAME_preprocess_html() doesn't even seem to register, nothing inside it is executed.

tchopshop’s picture

tchopshop commented

I think it doesn't work because no matter what weight you give them, omega stylesheets are loaded with the scripts, not with the stylesheets. This is because there is a small amount of javascript that writes the responsive part of the theme. Scripts are loaded after stylesheets in the html.tpl.php

The only way I got it to work was to manually place the conditional comments in the html.tpl.php after the loading of scripts. I'd rather not have to modify the template for such a basic thing. It seems like something that should be added in the UI, since everything else is.

kdmarks’s picture

kdmarks commented

Weights are working for me, to force the conditional comments to load after global.css. In template.php, I've got: 

function MYTHEME_preprocess_html(&$variables) {

    // Add conditional stylesheets for IE
    drupal_add_css(path_to_theme() . '/css/ie-8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));
    drupal_add_css(path_to_theme() . '/css/ie-7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));

}
tchopshop’s picture

tchopshop commented

I just tried that with weights from #10... I don't understand how that could work for you... when I look at the page source, it's clear that the omega styles are rendering *after* the IE conditional styles, because all javascript loads after all CSS (I think), and it's a bit of Javascript that is loading the responsive stylesheets.

As proof, this is a chunk from the page source, after inserting the template code.

<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" href="http://maplestreetcounseling.net/sites/all/themes/maple/css/ie-8.css?lu1txi" media="all" />
<![endif]-->

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="http://maplestreetcounseling.net/sites/all/themes/maple/css/ie-7.css?lu1txi" media="all" />
<![endif]-->

<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="http://maplestreetcounseling.net/sites/all/themes/maple/css/ie-6.css?lu1txi" media="all" />
<![endif]-->
<style type="text/css" media="all">@import url("http://maplestreetcounseling.net/sites/all/themes/maple/css/maple-alpha-default.css?lu1txi");
@import url("http://maplestreetcounseling.net/sites/all/themes/maple/css/maple-alpha-default-normal.css?lu1txi");
@import url("http://maplestreetcounseling.net/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lu1txi");</style>

From what I have read elsewhere, the authors of the Omega theme don't believe in creating IE stylesheets tailoring to older browsers, so I believe the only way to get Omega to do it is to hardcode it somewhere in the html.tpl.php template -- after the scripts run. I hope I'm wrong, but why doesn't anyone know how to do this with any certainty?

I wish one of the maintainers would clarify their position on this essential if unpleasant aspect of web design.

duckzland’s picture

duckzland commented

Weight is working confirmed, the only thing is the path_to_theme() will point to the parent theme (omega) thus for any subtheme I believe we should you use drupal_get_path('theme', yourthemename) instead

tchopshop’s picture

tchopshop commented

I don't understand what you are saying because weight is *not* working for me, and as you can see from the page source... it couldn't possibly work.

duckzland’s picture

duckzland commented

In my case, only the basic related layout is written in the omega css and other styles is on custom library.

To override the layout in omega css I use css !important properties

rwilson0429’s picture

rwilson0429 commented

Thanks, setting the weight worked perfectly for me.

bengt’s picture

bengt commented

@tchopshop, @duckzland: is hardcoding or !mportant the only ways to get conditional stylesheets appear after omega specific css-files (e.g. THEME-alpha-default.css)?

tchopshop’s picture

tchopshop commented

in my experience yes... also using !important doesn't make the entire stylesheet appear later it only makes individual style rules override later ones.

MStrzelecki_’s picture

MStrzelecki_ commented

it does work, !but before *OMEGA SUBTHEME CUSTOM CSS* :(
This module http://drupal.org/project/conditional_styles also dont work for me...

function THEMENAME_preprocess_html(&$variables) {

// Add conditional stylesheets for IE
drupal_add_css(drupal_get_path('theme', THEMENAME) . '/css/ie8-and-below.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));
drupal_add_css(drupal_get_path('theme', THEMENAME) . '/css/ie9.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 9', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));

}

also doesn not render after subtheme css. In some cases it could work, but only when you wish to override some omega's core css. But not subtheme.

Any ideas?

MStrzelecki_’s picture

MStrzelecki_ commented

Hi all!

After a lot of reaserching I have forked solution from zen and AT.
http://drupal.org/node/1508452

TelFiRE’s picture

TelFiRE commented

This is pretty standard in other themes, shocked it isn't built in already. There is not a single website in the world that does not benefit from IE-specific code. I think there should be an initiative to have this be standard.

alberto56’s picture

alberto56 commented

Comment #1 worked for me, except I'm getting this strange behavior: #1650878: Insert IE stylesheet causes comments (<!--[if lte IE7]...) to appear on screen to end-user

christowm’s picture

christowm commented

Hi folks,

I have been pulling my hair out over this one as well. Some folks say it works others say it doesn't. I finally figured out why drupal_add_css within a preprocess function was not adding the style sheet to the end of the style sheet list. It has to do with the field 'group'. It turns out that while group would typically be a constant like "CSS_THEME" or "CSS_DEFAULT", the omega theme is using its own grouping value. If you want to place your conditional CSS somewhere at the end, utilize 'group' => 2000. Here is the code that finally worked for me...

function MYSUBTHEME_alpha_preprocess_html(&$vars) {

  drupal_add_css(path_to_theme() . '/css/plg-alpha-default-wide.css', array(
    'type' => 'file',
    'group' => 2000,
    'media' => 'all',
    'browsers' => array('IE' => '(lt IE 9)&(!IEMobile)', '!IE' => FALSE),
    'weight' => 100
  ));

}

If you look at the omega/alpha/includes/alpha.inc file you will notice that it uses custom grouping values of 1000 and 2000 for its drupal_add_css calls. Hopefully that helps some folks who have been grappling with this.

Cheers,
Mitch

dkre’s picture

dkre commented

Cheers Mitch, this was a big help for me.

tritof’s picture

tritof commented

Hi,

Combining #18 and #22, the one working for me is : 

<?php
function MYTHEMENAME_alpha_preprocess_html(&$vars) {

  drupal_add_css(drupal_get_path('theme', MYTHEMENAME) . '/css/ie9.css', array(
    'type' => 'file',
    'group' => 2000,
    'media' => 'all',
    'browsers' => array('IE' => 'lte IE 9', '!IE' => FALSE),
    'weight' => 100
  )); 
}
?>

Thanks very much for this.
Cheers

pixelsweatshop’s picture

pixelsweatshop commented

Correction to #24

Missing array quote results in

Notice: Use of undefined constant THEMENAME - assumed 'THEMENAME' in custom_preprocess_html() 

<?php
function MYTHEMENAME_preprocess_html(&$vars) {

  drupal_add_css(drupal_get_path('theme', 'MYTHEMENAME') . '/css/ie9.css', array(
    'type' => 'file',
    'group' => 2000,
    'media' => 'all',
    'browsers' => array('IE' => 'lte IE 9', '!IE' => FALSE),
    'weight' => 100
  ));
}
?>