I'm trying out working with a set of custom sub-theme CSS files to apply specific layouts for different sizes/devices, and I need a little help making sense of a couple of the sizes.
To check how each of the adaptive grid files works with the browser size, I've selected one element, div#zone-user-wrapper and applied a different background color in each. So I have:
background-color: silver; in global.css
background-color: aqua; in myCustomTheme-alpha-default-narrow.css
background-color: orange; in myCustomTheme-alpha-default-normal.css
background-color: red; in myCustomTheme-alpha-default-wide.css
background-color: lime; in myCustomTheme-alpha-default.css
As I adjust the browser width, I see div#zone-user-wrapper change to the appropriate color for global, narrow, normal, and wide. But I don't see the lime color that's defined in myCustomTheme-alpha-default.css. When I have the browser width below 720px down to as small as I can make it, I get the silver color defined in global.css.
So I'm trying to make sense of where the myCustomTheme-alpha-default.css file comes into play. And in general, I guess I'm a little confused about the logic of global vs, default.
Which is the file I want to use for mobile devices like smart phones (narrower than 720), and then what is the other file for?
(I've also tried viewing the page with iPhoneSimulator for mac, which displays the global.css setting. And on that subject, does anyone have any recommendations for the best app--like iPhoneSimulator--for testing like this? I also had tried iPhony.app, but that one displayed the site reduced to a very small size and using the wide.css file)
Comments
Almost...
Roger, you are 99% there...
The THEME-alpha-default.css applies to ALL the responsive sizes, so your 3 other CSS files are overwriting the styles in your alpha default.
Otherwise, you got it!!
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs
so then global.css?
I guess that's where my confusion lies... the style from global.css seemed to be the one that applied to all, and was the one that displayed at sizes below narrow.css. And the style I had applied to default.css never displayed.
Am I missing something? if default.css applies to ALL, then what is global.css for?
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
Only...
global.css = absolutely everything, including mobile
THEME-alpha-default.css = ALL responsive layouts (narrow, normal, wide)
THEME-alpha-default-narrow.css = only narrow
Etc...
Sooooooo.... The way you've set up your tests, narrow is overwriting default for all responsive layouts... So, to test, take the color definition out of narrow, and your lime color should show up...
Confusing, I know, but hopefully my next blog/screencast will explain it well.. :)
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs
Cool... Thanks
The confusing thing is global and default, and why they are BOTH needed... seems like they'd be redundant.
I look forward to seeing the next screencast. That last comment helped a lot to make sense of it. I commented out the narrow style, and the default appeared, as you said.
I'll get the hang of it.
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
and once I do...
I can see how powerful this is going to be. Great work!
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
The name "default" in those
The name "default" in those file names does NOT mean that they are in any way "default" CSS files. Instead the "alpha-default" comes from the fact that the GRID you are using is named "alpha_default". If you chose the fluid grid this would be "alpha_fuid" => "YOURTHEME-alpha-fluid.css". Don't let the "default" in that name confuse you, it has nothing to do with the importance of that file, its just the machine name of the grid. ;)
This concept is one thing
This concept is one thing that you have to understand about Omega before being able to use any css (successfully) on it. I wish I had all the hours I wasted before understanding it back. After I got it, things went much more smoothly (relatively).
Knowing the css weights was helpful to.
Global for everything EXCEPT grids/layouts?
So would it be safe to say that I'd use global for all of my sub-theme typography, colors, and anything else that isn't grid-related... layout stuff? And then the other files are for layout and proportionately sizing of things like images. Does that sound right?
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
Please put suggestive empty classses to point users right
This is my biggest confusion. I can't for the life of me figure what goes in where. Jake, can this be provided as empty classes in each of these files to suggest to users so we don't have to keep guessing?
default-normal
in my testing with the different color banners for each stylesheet (see original post), I see the color assigned to each stylesheet change as I re-size the browser window. All EXCEPT myCustomTheme-alpha-default-normal.css. Where does that stylesheet come into play?
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
test it this way...
Roger...
so in the normal (960) version, you aren't getting your style applied properly??
Check (using firebug) on the element (body background) when you are in the 960 state, and you should see (in descending order of priority) the styles that apply currently to that item..
If something (body background was declared in all your stylesheets) it should work as follows:
global.css - works in mobile and globally until overwritten
Overwritten by THEME-alpha-default.css
Overwritten by THEME-alpha-default-narrow.css
Overwritten by THEME-alpha-default-normal.css
Overwritten by THEME-alpha-default-wide.css
So any styles that are in them all will apply in the appropriate order (based on the window size)
So if you ONLY put a definition like body background in THEME-alpha-default.css it will apply to all the responsive layouts (excluding mobile) but you can THEN choose to overwrite that css rule in another responsive size, then it takes priority and unless overwritten again, will become the "Default" for anything the rest of the way up the responsive chain.
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs