The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.I'm working on a sub-theme of Omega. I used Omega Tools to create it, so I have 5 css files in the /css folder.
Having read the handbook, and the README file in the css folder, I'm unclear as to the distinction between the global.css file and the my-theme-alpha-default.css file. It seems that the contents of both files is loaded for every screen size. So why are there two files? What should go in global.css, and what should go in ...-default.css?
Then again, reading the README file in the css folder, it seems to say that the ...-default.css file is only loaded for screen widths in excess of 740px. But that is also what "narrow" claims to be. So I'm also confused as to the difference between ...-default.css and ...-default-narrow.css. I thought the former was for screens less than 740px, and the latter was for the next size up. But perhaps that's not correct?
Can anyone explain to me? The smallest size is anything up to a width of 740px. The next size up is 740px-980px. But those two screen-size categories are handled by those three css files. How do the two screen-size categories get handled by the 3 css files? And if two of the three CSS files are for the same band of screen sizes, what goes in each of the two files?
Comments
Comment #1
mrpauldriver commentedThink of global as the 'mobile first' template and this this is where most of your css will go.
The default template is for desktop resolutions where the css is different for that of mobile.
The remaining templates are really just for exceptions and other values to address scaling up to wider resolutions.
Try resizing your browser window to see the changes between layouts.
Omega is very powerful and well worth spending the time to learn it. You will never need another theme!
Comment #2
jamesoakleyThanks - it's the desktop / mobile distinction that I'd missed.
I am loving doing the CSS work with Omega - once I'd learnt that you set margins on .x-region-inner classes not on #x-region I was away. Very versatile.
Thanks for your help.
Comment #4
Rosamunda commentedSorry for reopening this thread, but it still not clear for me
Ok, so for mobile I use only global.css and for other resolutions I use all the other templates.
This is what confuses me, because the other css files are narrow, normal and wide. So I think narrow should be for 7" screens, normal for 10" screens and wide for all the other, bigger screens (usually the desktop). So where fits default template?
I´ve tried that, setting just a line of code in every css file, determinig different body background colors for each case.
global.css showed on the mobile screen.
global.css showed on the 7" tablet on portrait mode.
narrow.css showed on the 7" tablet in landscape mode.
normal.css showed on the 10" netbook.
wide.css showed on the 19" desktop screen.
The color that I´ve set at the default.css file didn´t showed. I´ve took mozilla firefox and resized the browser manually, and all the other templates showed just fine, but default never appeared.
Thanks for your insight and clarification on this!
Rosamunda
Comment #5
saki007sterAccording to me , the files have been clearly named as they are to be used
1. global.css = global (This file should be used to contain the css for your site which is common to all the layouts i.e. global. I guess this should not contain nay css related to responsiveness , should be more concerned with the common elements )
2. x-alpha-default.css = default ( This is for the mobile screens )
3. x-alpha-default-narrow.css = narrow ( This is for the tablet portrait screens )
4. x-alpha-default-normal.css = normal ( This is for the tablet landscape or normal screen )
5. x-alpha-default-wide.css = wide ( This is for the wide screen desktops )
We dont use global.css to control the responsiveness of the theme, instead this is controlled by the rest of the css files in the css folder ( stuffs like width, visibility of the blocks etc. are controlled here ).
Comment #6
Rosamunda commentedThanks for your replies!!
This is what I have:
1. global.css = the basic css file. So it contains all the code, except the stuff that should be only to wider screens. So mobile takes this code.
2. x-alpha-default.css = it´s actually blank, because the mobile takes tha global.
3. x-alpha-default-narrow.css = Its taken by narrower screens, as 7" tablets.
4. x-alpha-default-normal.css = It´s taken by bigger tablets or netbooks (10")
5. x-alpha-default-wide.css = Just for wide desktop screens.
Actually, after reading a lot, and asking at some forums a lot more, and doing several testings with the css for a month now, I think that there´s no need for a default template.
It only should be useful in case it serves to narrower screens, in between small mobiles and 7", but not as a default template. Because we have global.css for that.
I mean, what´s the benefit to have all basic code non-related to screen size into a global.css file, and all basic code that is related to the screen size in another default.css file?
As I say, there´s no need (in my opinion) to a default css template, but for a narrower.css template.
So that way, it should go like this:
Again, it´s just my opinion :)
Comment #7
enatheabducr commentedMrPaulDriver gave the best answer of all. That's, as far as I've used omega; how it works css in omega. You explained it all in the simplest way!