Hey folks, I am fairly new to Drupal theming and even newer to Omega. That said, I have seen that Omega is clearly the way forward and I have invested much time in learning the system so far. My appreciation to Jake and others who have worked so hard to date.
One area where I struggle with though, is with general ccs layout. Yes I know it is very logical and intuitive and for that I'm thankful. However, as a relative newbie to css I find myself spending 'literally hours' messing about with Firebug trying to discover which div regions and classes effect my content.
Going forward, I think that many users would find it most useful to be able to reference of some kind of visual css diagram. Nothing too complicated, just rectangles within rectangles, which clearly identifies the various div regions and classes. Based on (say) the starter kit theme. I appreciate that the theme itself spells out the zones and regions but it seems to do little in terms of pointing out wrappers and containers, let alone whether they are divs or classes.
Ultimately some kind of wysiwyg drag and drop interface would be ideal, but in the meantime just a diagram or explanation of the css schema would be most useful
Thank you,
Paul Driver, UK
Comments
Here's a couple tools to consider
If you haven't seen this already, Jake has also provided a module called Omega Tools http://drupal.org/project/omega_tools that allows you to turn on and off visual region blocks that show the placement of the various regions in the context of the settings you've applied to your sub-theme.
As far as CSS goes, there's a tool that I have found extremely valuable in learning and visualizing CSS, and identifying divs and virtually ANY selector on a page. It's called CSSEdit and it's available from http://macrabbit.com/cssedit/. However, it is Mac-Only. So if you are on a PC--my apologies. But if you ARE on a Mac, I can't recommend CSSEdit highly enough.
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
And some more...
I haven't used it yet, but http://drupal.org/project/styleguide (D7 and D6 versions available) looks like a promising way to visualise the end result of your theming of all the various Drupal elements.
@rggoode - thanks for that reference to CSSEdit - worth investigating...
no problem...
CSEdit hasn't been updated in quite awhile. But I still make constant use of it with every project I work on.
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
CSSEdit is pre-HTML5/CSS3
Yeah, I see what you mean. I'm trying out the 3.x-dev version of Omega specifically for the responsive layout feature, and thus I discovered that CSSEdit doesn't recognise @media queries. The result is that you only get the stacked 'mobile' layout. Great for the XHTML themes, though.
I'm certainly not a designer,
I'm certainly not a designer, programmer, etc, but am able to bumble my way through things. I would have ripped my hair out long ago if it wasn't for CSSEdit. It would be nice if they would update the program or sell it to somebody who would.
I'm certainly not a designer,
I'm certainly not a designer, programmer, etc, but am able to bumble my way through things. I would have ripped my hair out long ago if it wasn't for CSSEdit. It would be nice if they would update the program or sell it to somebody who would.
good news about CSSEdit
This discussion motivated me to write to the CSSEdit developers. Here's the response I got from them:
Roger
_________________
Art has gone to the dogs
GoodeGallery.com
Another tool I found a year
Another tool I found a year ago was a Fireworks layered PNG stylesheet put together by the folks at ChapterThree: http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_appr.... It doesn't help you at the coding level (classes and ids), but rather at the visual design stage between the 6 or 7 'pages' in the Fireworks format, this document includes placeholders for about 90% of the elements that occur across Drupal sites. So, if you use this document for your design comps, you're sure to have covered the most important bases. And if you don't use Fireworks, you should be able to download the trial of FW CS5 and save the layered PNG as 6 or 7 separate layered PSDs for use in some other design app.
I think....
I do (sometimes) use Style Guide: http://drupal.org/project/styleguide
The Chapter three docs is really great, and it WOULD be very nice (at some point) if I could do something quite the same for specific Omega structure... (it is on the (quite long) @todo list)
Jake Strawn (@himerus)
ThemeGeeks | Development Geeks
Omega - 960.gs
I just installed styleguide
Thanks for the tip. I can see how styleguide would be useful.
Not sure what you mean about Chapter three docs. Do you mean something about www.chapterthree.com
@MrPaulDriver
Look up, waaaaaay up
[Excuse the Canadian 'Friendly Giant' reference...] Paul, by 'Chapter Three docs' Jake's referring to my link a few posts up this thread. It's a layered/paged Fireworks document that one firm uses to make sure they don't forget to design visual comps for the 90% most-used Drupal elements.
Got it
Thanks, I was looking at it last night.
@MrPaulDriver
FWIW. . . . (O/T)
Ha! I got the "Friendly Giant" reference right away. How could I not? That '70s TV signal bounced off the Niagara River, seemingly, to get to my family's rabbit ears in WNY.
Thank you for the flashback!
I am working on creating an
I am working on creating an overview diagram to add to the in-progress documentation. I just saw this post and wanted to let the originator know to watch for it.
Thank you. I am sure that
Thank you.
I am sure that many people like myself who are less familiar with css will find this most useful.
Also of help would be guidelines on making very specific ccs statements, see my post here http://drupal.org/node/1168296 for an example the difficulty I found. Whilst I eventually solved this problem, I have come against the same kind thing a number of times.
@MrPaulDriver