Posted by rdy_kc on November 5, 2012 at 3:54pm
I've created my first Omega sub-theme and am beginning to edit the CSS files.
One strange question though: all of my sub-theme CSS files are empty, from global.css on down.
So where is the look and feel of my omega site coming from if all of the sub-theme files are empty?
Is there another global set of CSS hiding in the shadows I am going to have to overwrite?
Comments
Omega theme has default styles
Poke around in the folder for omega theme. There are some basic styles applied there. Also the layout stuff comes from alpha mostly. I'd recommend getting Firebug for the Firefox browser. It will tell you where all the styles are being set - pretty critical tool when working with omega, in my opinion.
~John
John Hannah
Friendly Machine
Cascading Style Sheets
Drupal provides TOO MUCH CSS (my opinion) from the Drupal Core, all the Modules, and the base theme, all of which cascades down to your content unless you over-ride it with the "empty" css style sheets. If you can picture cascading water, the css files in Drupal Core are at the top, and as you go down the sub-folders file directories, the css files in the "contrib" modules just below the Core css files and the css files in the parent theme (omega) are just below that. Your css files in the sub-theme are the last css files drupal will see before it sends the html and all it's supporting resources to the browser, so you have the last say in what the site will look like. If you are really bored, you can even make a sub-theme of your current sub-theme (a sub-sub-theme) and that css will be the last word in what your site looks like. Of course this does not always work the way it's supposed to, so you still might have to resort to really long css selectors in your code, but whatever you do RESIST the the use of "!important" to get your way with Drupal.
Omega has toggle styles
I think this is a reasonable way to describe the nesting of how the CSS is added, the order can be moved around in code, so it is just an overview.
DRUPAL CORE
- DRUPAL MODULES
- CUSTOM MODULES
- BASE THEME
- SUB THEME
The subtheme should have the 'final say' as others have mentioned, so it can overwrite the previous styles, so long as a selector is more specific.
In an Omega subtheme there is the option to toggle the stylesheets in the appearance settings.
admin/appearance/settings/YOUR_THEME
The 'Toggle styles' tab has entries for the CSS that has been added by Drupal. I believe it 'unsets' those stylesheets so they don't get added to the document. You can disable them if you are fighting against a particular file's style definitions, unpicking the styling in Firebug/ Webkit inspector will tell you what file is causing it. I suspect you risk affecting other elements if there are many styles added in that CSS file.