Add default stylesheets/javascript to the starterkits [#1077662]

This (in many ways) has been requested quite often.

I'm going to add in a few things to the starterkit(s) to make it a bit easier to get moving quickly with as little (or possibly no) editing of the .info file in the subthemes created from the starterkit.

CSS Changes
- Add a default enabled stylesheet in the starterkits (custom.css)
- Add browser specific stylesheet(s)
  - IE6 (ie6_custom.css)
  - IE7 (ie7_custom.css)
  - IE8 (ie8_custom.css)
JS Changes
- Add a default javascript include ready for editing (custom.js)

This will be tested and released in the 2.1 version pending

Comments

Comment #1

himerus CreditAttribution: himerus commented 1 March 2011 at 19:19

I'm updating this after a tiny bit of investigation.

The IE stylesheets will be included by Omega if they exist using omega_preprocess_html()

CSS Changes
- Add a default enabled stylesheet in the starterkits (custom.css)
- Add browser specific stylesheet(s)
  - IE6 (ie6.css)
  - IE7 (ie7.css)
  - IE8 (ie8.css)
JS Changes
- Add a default javascript include ready for editing (custom.js)

Comment #2

himerus CreditAttribution: himerus commented 1 March 2011 at 19:28

Also rather than using custom.css, it's going to use subtheme.css as the default name of the enabled stylesheets so it doesn't overwrite the default omega/css/custom.css styles.

Comment #3

threading_signals CreditAttribution: threading_signals commented 1 March 2011 at 19:52

Thanks for your hard work Jake.

Comment #4

himerus CreditAttribution: himerus commented 1 March 2011 at 19:58

Status:

Active

» Fixed

tagging 2.1 release now with this feature(s) implemented.

Comment #5

bengt CreditAttribution: bengt commented 2 March 2011 at 11:02

Thanks for a really nice theme! While starting to use Drupal7 I am also changing base theme from Zen to Omega.

In Omega 2.1 you add - if I understand it correctly - conditional style sheets via preprocess-html.inc. In Zen you should have used the .info file, something like this:

conditional-stylesheets[if IE][all][] = css/ie.css
conditional-stylesheets[if lte IE 6][all][] = css/ie6.css

Is Omegas way better? In preprocess-html.inc, how do I use "if" etc, e.g. "if lte IE 6"? By the way, wouldn't it be good if there is an ie.css in the starter-kit (which should be used by all IE versions)?

Comment #6

himerus CreditAttribution: himerus commented 2 March 2011 at 12:50

@bengt

With Zen, the code you pasted requires the Conditional Styles module.

There was work to get this into core for D7 (#522006: Conditional Styles in .info files, since drupal_add_css has it), but it was pushed to D8 in this reply by Dries: http://drupal.org/node/522006#comment-2903228

So, while drupal_add_css supports the conditional stylesheets, adding them via a .info file currently is not supported.

Take a look at the core bartik and seven themes and how they are adding the stylesheets.

If that issue is updated at some point (and does get into D7 somehow) I will update the code in Omega to reflect those changes, but it seems it's stuck with this solution until then.

It would be possible in the subthemes preprocess_html (or in Omega: preprocess/preprocess-html.inc) to add

drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE', '!IE' => FALSE), 'preprocess' => FALSE));

And that should give the "all IE browsers" stylesheet you're looking for. IMHO... with the vast differences between IE6 > IE8, I rarely see too many hacks that need to be in every version.. but then again, I just don't do IE hacks... I refuse to support those crappy browsers.. but that's just me ;)

Comment #7

bengt CreditAttribution: bengt commented 2 March 2011 at 18:57

@himerus: Thanks for your answer. I agree with you concerning IE, but not my customers...

A little bit of topic: how can I *programmatically* add conditional js-scripts (it concerns rounded corners) in Omega?

Comment #8

16 March 2011 at 19:01

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #9

PCateNumbersUSA CreditAttribution: PCateNumbersUSA commented 12 July 2011 at 14:43

Nevermind, it works, I just had a typo. :(

> What would I add the preprocess-html.inc for a IE 9 specific stylesheet? I added:

> drupal_add_css(path_to_theme() . '/css/ie-9.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 9', '!IE' => FALSE), 'preprocess' => FALSE));

> but it doesn't seem to work. I know the filename and path are correct.

Comment #10

P2790 CreditAttribution: P2790 commented 3 January 2012 at 17:09

Status:

Closed (fixed)

» Active

This does not work for me at all, could someone please direct me as to what I am doing wrong.
I want to have an IE specific css file that will get loaded when using IE and will override all of the other css stylesheets.

I have copied the above code that #6 himerus mentioned into a new file called 'preprocess-html.inc' and placed it within my omega subtheme folder 'preprocess'

drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE', '!IE' => FALSE), 'preprocess' => FALSE));

I have created an 'ie.css' file which is within my /css in my subtheme.

Any changes I make to this file are not showing in ie.

Thanks