How to include stylesheets properly

Events happening in the community are now at Drupal community events on www.drupal.org.
samwillc's picture

Hi,

I set up my custom grid and the instructions say this:

Step 7

Include the css files in the sub-theme .info file
For example:
stylesheets[all and (max-width: 1008px)][] = css/yourTheme-alpha-default-wide.css
stylesheets[all][] = css/yourTheme-alpha-default.css
stylesheets[all and (min-width: 1008px)][] = css/grid/yourTheme_default/wide/mysubtheme-default-wide-12.css

(thanks to jshamley for pointing this out!)

My subtheme is called tnd.
My structure is thus:

../themes/tnd/css/global.css
../themes/tnd/css/tnd-tnd-default-narrow.css
../themes/tnd/css/tnd-tnd-default-normal.css
../themes/tnd/css/tnd-tnd-default-wide.css (don't actually need this)
../themes/tnd/css/tnd-tnd-default.css (don't actually need this either, I use tnd-tnd-default-narrow.css and tnd-tnd-default-normal.css to make changes for different screen sizes)

../themes/tnd/css/grid/tnd_default/narrow/tnd-default-narrow-12.css
../themes/tnd/css/grid/tnd_default/narrow/tnd-default-narrow-12.png
../themes/tnd/css/grid/tnd_default/normal/tnd-default-normal-12.css
../themes/tnd/css/grid/tnd_default/normal/tnd-default-normal-12.png

In my tnd.info file is this (from the top):

name = My custom sub theme
description = My custom sub theme for Omega
core = 7.x
engine = phptemplate
screenshot = screenshot.png
base theme = omega

; REQUIRED CORE REGIONS

regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
regions[content] = Content

; CSS GRID SYSTEMS

grids[tnd_default][name] = 978px grid
grids[tnd_default][layouts][narrow] = Narrow
grids[tnd_default][layouts][normal] = Normal
grids[tnd_default][columns][12] = 12 Columns

; GRID STYLESHEETS

stylesheets[all][] = css/grid/tnd_default/narrow/tnd-default-narrow-12.css
stylesheets[all][] = css/grid/tnd_default/normal/tnd-default-normal-12.css

; ADDITIONAL REGIONS
more stuff here continues....

Now, whether or not I include the...

; GRID STYLESHEETS

stylesheets[all][] = css/grid/tnd_default/narrow/tnd-default-narrow-12.css
stylesheets[all][] = css/grid/tnd_default/normal/tnd-default-normal-12.css

..bit, it makes no difference. The stylesheets are loaded in the correct order, and the site is responsive. I have put different body background colours in ../themes/tnd/css/tnd-tnd-default-narrow.css and ../themes/tnd/css/tnd-tnd-default-normal.css and they switch when resizing so everything appears to work.

So I have a couple of questions:

1) Do you need to include the stylesheets in .info file seeing as mine are recognised with or without them being in there?

2) Why do you need stuff like...

stylesheets[all and (min-width: 1008px)][] = css/grid/yourTheme_default/wide/mysubtheme-default-wide-12.css

...in the .info file when you set the media queries in the appearance section in the UI itself? What does it do setting these media queries in the .info file?

I hope this makes sense. Any help is very much appreciated. Thanks.

I am also more than happy to share the grid systems I am using with anyone. At the moment, it only allows 12 column narrow (using 748gs) and 12 column normal (using 978gs). Although the Omega theme is awesome and a huge thanks to the people working hard on it, I have always had a problem with the content being too squashed at 940px across.

Sam.

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: